initial commit - website redesign

This commit is contained in:
core 2023-05-31 21:09:44 -04:00
commit 06c8bdc49b
Signed by: core
GPG Key ID: FDBF740DADDCEECF
26 changed files with 2187 additions and 0 deletions

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

38
README.md Normal file
View File

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

31
package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "coredoesdev",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.26.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.3.0"
},
"type": "module"
}

12
src/app.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

99
src/components/Bar.svelte Normal file
View File

@ -0,0 +1,99 @@
<script lang="ts">
export let selected;
let pages = [
{id: "home", href: "/"},
{id: "projects", href: "/projects"},
{id: "about", href: "/about"},
{id: "contact", href: "/contact"},
{id: "blog", href: "/blog"}
]
</script>
<div class="bar">
<img alt="logo" src="/img/logo.png" class="logo" />
<div class="bar-right">
<nav class="nav">
<ul class="menu">
{#each pages as page}
{#if page.id === selected}
<li class="item"><a href="{page.href}" class="link selected">{page.id}();</a></li>
{:else}
<li class="item"><a href="{page.href}" class="link gradienthover">{page.id}();</a></li>
{/if}
{/each}
</ul>
</nav>
</div>
</div>
<style>
.bar {
width: 100%;
height: 60px;
}
.checkbox {
display: none;
}
.logo {
position: absolute;
top: 0;
left: 0;
width: 60px;
}
.bar-right {
float: right;
margin-top: 5px;
}
a {
text-decoration: none;
color: white;
}
a.selected {
color: #585b5f;
cursor: default;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: right;
}
@media only screen and (max-width: 500px) {
li {
margin-bottom: 5px;
}
}
@media only screen and (min-width: 500px) {
.item {
display: inline;
margin-left: 5px;
}
.hideonlarge {
display: none;
}
}
.gradienthover:hover {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.item {
padding: 2px;
}
</style>

View File

@ -0,0 +1,19 @@
<script lang="ts">
export let offset = "35";
</script>
<div class="content">
<div style="--offset:{offset};" class="content-text">
<slot></slot>
</div>
</div>
<style>
@media only screen and (min-width: 500px) {
.content-text {
position: absolute;
top: calc(var(--offset) * 1%);
margin-left: 3.5%;
}
}
</style>

View File

@ -0,0 +1,5 @@
<svelte:head>
<link rel="stylesheet" href="/css/common.css">
</svelte:head>
<slot></slot>

58
src/routes/+page.svelte Normal file
View File

@ -0,0 +1,58 @@
<script>
import Bar from "$components/Bar.svelte";
import Content from "$components/Content.svelte";
</script>
<svelte:head>
<title>coredoesdev</title>
</svelte:head>
<Bar selected="home"/>
<Content>
<p>Hi, I'm <span class="gradient">core</span>.</p>
<p>I'm a freelance software developer and video editor.</p>
<span><span class="coregreen">[core ~]$</span> ls</span>
<ul class="lsres">
<li class="lsli"><a class="ls" href="/">.</a></li>
<li class="lsli"><a class="ls" href="/projects">projects/</a></li>
<li class="lsli"><a class="ls" href="/about">about.txt</a></li>
<li class="lsli"><a class="ls" href="/contact">contact.txt</a></li>
<li class="lsli"><a class="ls" href="/blog">blog/</a></li>
</ul>
<p>click to navigate</p>
</Content>
<style>
.gradient {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.coregreen {
color: var(--core-green);
}
.ls {
color: var(--core-light-blue);
transition: 0.2s;
text-decoration: none;
}
.ls:hover:not(.nohover) {
color: var(--core-blue);
}
.lsres {
list-style: none;
margin: 0;
padding: 0;
}
</style>

View File

@ -0,0 +1,50 @@
<script>
import Bar from "$components/Bar.svelte";
import Content from "$components/Content.svelte";
</script>
<svelte:head>
<title>about - coredoesdev</title>
</svelte:head>
<Bar selected="about"/>
<Content offset="30">
<span><span class="coregreen">[core ~]$</span> cat about.txt</span>
<p><i>Q: Who are you?</i></p>
<p>A: I'm core, an independent freelance software developer and video editor.</p>
<p><i>Q: What do you make?</i></p>
<p>A: I make lots of different things. You can see all the projects I am involved in <a class="hover-click hovergradient link" href="/projects">here.</a> This list isn't complete though.</p>
<p><i>Q: What programming languages/technologies do you use?</i></p>
<p>A: All of them! In all seriousness, for each project (if it's not too important) I try to learn some new technique, technology or language. If I am making something important, I'll use something I am comfortable with, typically Svelte for web-anything and Rust for everything else. I also use Python quite a lot. You can scroll through the project page and each project has a listing of what language or technology was used to build it.</p>
<p><i>Q: Who do you work with?</i></p>
<p>A: Most of the time I'm working with my buddies in <a class="hover-click hovergradient link" href="https://e3t.cc">e3team.</a></p>
<p><a class="link hovergradient" href="/">&larr; return home</a></p>
</Content>
<style>
.hover-click {
cursor: pointer;
}
.hovergradient:hover {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.link {
text-decoration: none;
color: var(--core-light-blue);
}
.coregreen {
color: var(--core-green);
}
</style>

View File

@ -0,0 +1,55 @@
<script>
import Bar from "$components/Bar.svelte";
import Content from "$components/Content.svelte";
</script>
<svelte:head>
<title>contact - coredoesdev</title>
</svelte:head>
<Bar selected="contact"/>
<Content offset="30">
<span><span class="coregreen">[core ~]$</span> cat contact.txt</span>
<p>You can reach me in many places.</p>
<ul>
<li>Matrix: @core:e3t.cc</li>
<li>Mastodon: TBD</li>
<li>Discord: core#8531</li>
<li>Email: core (AT) coredoes (DOT) dev, or core (AT) e3t (DOT) cc</li>
</ul>
<p>I take security very seriously. Do <b>not</b> be afraid to ask for PGP. My two PGP keys are:</p>
<ul>
<li class="hover-click"><a href="https://keyserver.ubuntu.com/pks/lookup?op=get&search=0xb630ee3b52b8ab02b29588b907956edecb6d8a16" class="link hovergradient">B630EE3B52B8AB02B29588B907956EDECB6D8A16</a></li>
<li class="hover-click"><a href="https://keyserver.ubuntu.com/pks/lookup?op=get&search=0x8581c1619952b409dc4c5db79d0daed5555dd0b4" class="link hovergradient">8581C1619952B409DC4C5DB79D0DAED5555DD0B4</a></li>
<li class="hover-click"><a href="https://meta.e3t.cc/~core.pgp" class="link hovergradient">or, download both</a></li>
</ul>
<p><a class="link hovergradient" href="/">&larr; return home</a></p>
</Content>
<style>
.hover-click {
cursor: pointer;
}
.hovergradient:hover {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.link {
text-decoration: none;
color: var(--core-light-blue);
}
.coregreen {
color: var(--core-green);
}
</style>

View File

@ -0,0 +1,163 @@
<script lang="ts">
import Bar from "$components/Bar.svelte";
import Content from "$components/Content.svelte";
enum TechOrLang {
TypeScript = 'typescript',
Rust = 'rust',
Ansible = 'ansible',
Bash = 'bash',
InkScape = 'inkscape',
Jenkins = 'jenkins',
Python = 'python',
Squarespace = 'squarespace',
ActixWeb = 'actix-web',
Postgresql = 'postgres',
SeaORM = 'seaorm',
NebulaVPN = 'nebula-vpn',
Cryptography = 'cryptography',
PKI = 'pki',
JavaScript = 'javascript',
Electron = 'electron',
React = 'react',
Wordpress = 'wordpress',
PHP = 'php',
Ed25519 = 'ed25519',
Networking = 'networking',
Tarpaulin = 'tarpaulin',
Tokio = 'tokio',
AsyncStd = 'async-std'
}
interface Project {
id: string,
name: string,
role: string,
tech: TechOrLang[],
link: string
}
let projects: Project[] = [
{
id: "starkingdoms.io",
name: "StarKingdoms.IO",
role: "Co-Developer",
tech: [TechOrLang.TypeScript, TechOrLang.Rust,
TechOrLang.Ansible, TechOrLang.Bash,
TechOrLang.InkScape, TechOrLang.Jenkins,
TechOrLang.Python, TechOrLang.AsyncStd],
link: "https://starkingdoms.io"
},
{
id: "4circlecoaching",
name: "4 Circle Coaching",
role: "Contributor",
tech: [TechOrLang.Squarespace],
link: "https://4circlecoaching.com"
},
{
id: "trifid",
name: "trifid",
role: "Project Lead",
tech: [TechOrLang.Rust, TechOrLang.Cryptography, TechOrLang.ActixWeb, TechOrLang.NebulaVPN, TechOrLang.Postgresql, TechOrLang.SeaORM, TechOrLang.PKI],
link: "https://hub.e3t.cc/~core/trifid"
},
{
id: "dnapi-rs",
name: "dnapi-rs",
role: "Project Lead",
tech: [TechOrLang.Rust, TechOrLang.Cryptography, TechOrLang.NebulaVPN, TechOrLang.PKI],
link: "https://crates.io/crates/dnapi-rs"
},
{
id: "pyblocks",
name: "PyBlocks",
role: "Project Lead",
tech: [TechOrLang.JavaScript, TechOrLang.Python, TechOrLang.Electron, TechOrLang.React],
link: "https://git.e3t.cc/~core/pyblocks"
},
{
id: "smst",
name: "Stingrays Summer Swim Team",
role: "Freelance Developer",
tech: [TechOrLang.Wordpress, TechOrLang.PHP],
link: "https://gosmst.com"
},
{
id: "e3pf",
name: "e3team Protocol Framework",
role: "Project Lead",
tech: [TechOrLang.Rust, TechOrLang.Cryptography, TechOrLang.Networking, TechOrLang.Ed25519, TechOrLang.Tokio],
link: "https://git.e3t.cc/~core/e3pf"
}
];
</script>
<svelte:head>
<title>projects - coredoesdev</title>
</svelte:head>
<Bar selected="projects"/>
<Content offset="25">
<p>This is a <i>rough</i> listing of projects I am or have been involved with, along with my role and relavent concepts or technologies. This list is not complete as some projects do not warrant inclusion here.</p>
<span><span class="coregreen">[core ~]$</span> ls projects/</span>
<ul class="lsres">
{#each projects as project}
<li class="lsli"><a class="ls" href="{project.link}">{project.name}</a> - {project.role} - {project.tech.join(', ')}</li>
{/each}
</ul>
<p>click to visit</p>
<p><a class="link hovergradient" href="/">&larr; return home</a></p>
</Content>
<style>
.gradient {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.hovergradient:hover {
background-image: var(--core-gradient);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-size: 100%;
background-repeat: repeat;
}
.link {
text-decoration: none;
color: var(--core-light-blue);
}
.coregreen {
color: var(--core-green);
}
.ls {
color: var(--core-light-blue);
transition: 0.2s;
text-decoration: none;
}
.ls:hover:not(.nohover) {
color: var(--core-blue);
}
.lsres {
list-style: none;
margin: 0;
padding: 0;
}
</style>

19
static/css/common.css Normal file
View File

@ -0,0 +1,19 @@
@import url('/fonts/firacode/FiraCode.css');
:root {
--bg-color: #0E1313;
--core-green: rgba(0, 214, 143, 1);
--core-blue: rgba(5, 40, 176, 1);
--core-light-blue: #007ec2;
--core-gradient: linear-gradient(90deg, rgba(0, 214, 143, 1) 0%, rgba(5, 40, 176, 1) 100%);
}
html {
scroll-behavior: smooth; /* smooth scroll anchors */
}
body {
background-color: var(--bg-color);
font-family: 'Fira Code', monospace;
color: white;
}

BIN
static/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -0,0 +1,54 @@
/* cyrillic-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_cyrillic-ext.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_greek-ext.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_greek.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/firacode/woff2/firacode_latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
static/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

21
svelte.config.js Normal file
View File

@ -0,0 +1,21 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter(),
alias: {
"$components": "src/components"
}
}
};
export default config;

17
tsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

6
vite.config.ts Normal file
View File

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});

1518
yarn.lock Normal file

File diff suppressed because it is too large Load Diff