Gears are turning. Ideas are falling into place

This commit is contained in:
Thomas Cole 2023-03-23 15:22:27 -04:00
parent 0faf49cace
commit 80ad010cfd
20 changed files with 2742 additions and 133 deletions

View File

@ -1,13 +0,0 @@
name: 'Test action'
on:
workflow_dispatch:
push:
branches:
- main
jobs:
check-links:
runs-on: ubuntu-latest
steps:
run: npm install

3
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["svelte.svelte-vscode"]
}

47
README.md Normal file
View File

@ -0,0 +1,47 @@
# Svelte + TS + Vite
This template should help get you started developing with Svelte and TypeScript in Vite.
## Recommended IDE Setup
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
## Need an official Svelte framework?
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
## Technical considerations
**Why use this over SvelteKit?**
- It brings its own routing solution which might not be preferable for some users.
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
**Why include `.vscode/extensions.json`?**
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
**Why enable `allowJs` in the TS template?**
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
**Why is HMR not preserving my local component state?**
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
```ts
// store.ts
// An extremely simple external store
import { writable } from 'svelte/store'
export default writable(0)
```

View File

@ -5,9 +5,19 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>thomaspcole.com</title> <title>thomaspcole.com</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<canvas id="bg"></canvas> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

2461
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,18 +1,29 @@
{ {
"name": "personal-site", "name": "temppersonal",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview",
"check": "svelte-check --tsconfig ./tsconfig.json"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.0.3",
"@tsconfig/svelte": "^3.0.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.21",
"svelte": "^3.55.1",
"svelte-check": "^2.10.3",
"tailwindcss": "^3.2.7",
"tslib": "^2.5.0",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"vite": "^4.2.0" "vite": "^4.2.0"
}, },
"dependencies": { "dependencies": {
"@types/three": "^0.149.0",
"svelte-cubed": "^0.2.1",
"three": "^0.150.1" "three": "^0.150.1"
} }
} }

6
postcss.config.cjs Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/profile.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 607 KiB

60
src/App.svelte Normal file
View File

@ -0,0 +1,60 @@
<script lang="ts">
import GlitchText from "./lib/GlitchText.svelte";
import ThreeScene from "./lib/ThreeScene.svelte";
</script>
<ThreeScene/>
<div class="fixed w-full h-full bg-green-700/20 rounded-3xl border-solid border-2 border-green-300/50">
<div class="absolute screendim"></div>
<div class="absolute scanlines"></div>
</div>
<section class="h-screen relative">
<div class="relative top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<img class="w-1/4 mx-auto rounded-full aspect-square object-cover mb-6" src="/profile.jpg" alt="">
<h1 class="text-center font-mono text-6xl text-white drop-shadow-screen ">Thomas Cole</h1>
<GlitchText strings={["system administrator", "Linux Enthusiast", "Web Developer", "Network Engineer"]} classVars="text-neutral-50 drop-shadow-screen text-center text-xl font-mono w-fit mx-auto capitalize"/>
</div>
</section>
<section class="h-screen"></section>
<style>
.scanlines{
background: linear-gradient(
rgb(134,239,172,.15),
rgb(134,239,172,.15) 3px,
transparent 3px,
transparent 9px
);
background-size: 100% 9px;
border-radius: 1.5rem;
height: 100%;
width: 100%;
overflow: hidden;
animation: scan 120s infinite linear;
}
.screendim{
background: radial-gradient(
circle,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,1) 100%
);
border-radius: 1.5rem;
height: 100%;
width: 100%;
overflow: hidden;
}
@keyframes scan{
from{
background-position: 0% 0%;
}
to{
background-position: 0% -100%;
}
}
</style>

13
src/app.css Normal file
View File

@ -0,0 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body::-webkit-scrollbar {
display: none;
}
body {
-ms-overflow-style: none;
scrollbar-width: none;
background-color: black;
}

54
src/lib/GlitchText.svelte Normal file
View File

@ -0,0 +1,54 @@
<script lang="ts">
import { onMount } from "svelte";
let text:string;
export let strings:string[];
export let classVars:string;
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+[]{},.<>/?";
let stringIndex = 0;
function pickNextWord(){
shuffleLetters(strings[stringIndex]);
if(stringIndex == strings.length-1){
stringIndex = 0;
} else {
stringIndex ++;
}
}
//https://www.youtube.com/watch?v=W5oawMJaXbU
//Hpyerplexed FTW
function shuffleLetters(targetWord:string){
let itterations = 0;
const interval = setInterval(()=>{
text = targetWord.split("").map((letter, index) => {
if(index < itterations){
return targetWord[index];
}
return letters[Math.floor(Math.random()*letters.length)];
}).join("");
if(itterations >= targetWord.length){
clearInterval(interval);
}
itterations ++;
}, 30);
}
onMount(()=>{
stringIndex = Math.floor(Math.random()*strings.length)
pickNextWord();
})
</script>
<style>
</style>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<p class={classVars} on:mouseover={pickNextWord}>
{text}
</p>

26
src/lib/ThreeScene.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import * as THREE from 'three';
import * as SC from 'svelte-cubed';
let y;
$: camZpos = (y*.1)+1;
//Animation callback
SC.onFrame(()=>{
});
</script>
<svelte:window bind:scrollY={y}/>
<SC.Canvas>
<SC.Mesh
geometry={new THREE.BoxGeometry()}
material={new THREE.MeshStandardMaterial({
color: 0xff00ff
})}
/>
<SC.PerspectiveCamera position={[0,0,camZpos]}/>
<SC.AmbientLight intensity={0.6} />
<SC.DirectionalLight intensity={0.6} position={[-2, 3, 2]} />
</SC.Canvas>

View File

@ -1,88 +1,8 @@
import './style.css'; import './app.css'
import * as THREE from 'three'; import App from './App.svelte'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
//scene setup const app = new App({
const scene = new THREE.Scene(); target: document.getElementById('app'),
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); })
const camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'),
});
renderer.setPixelRatio(window.devicePixelRatio); export default app
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera2.position.setZ(30);
//Monitors
const monitorGeo = new THREE.BoxGeometry(10,10,1);
const monitorMaterial = new THREE.MeshStandardMaterial({color: 0x0000ff});
const monitor1 = new THREE.Mesh(monitorGeo, monitorMaterial);
const monitor2 = new THREE.Mesh(monitorGeo, monitorMaterial);
monitor2.position.x = -15;
monitor2.position.z = 5;
monitor2.lookAt(camera2.position);
const monitor3 = new THREE.Mesh(monitorGeo, monitorMaterial);
monitor3.position.x = 15;
monitor3.position.z = 5;
monitor3.lookAt(camera2.position)
scene.add(monitor1, monitor2, monitor3);
// Lights
const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const lightHelper = new THREE.PointLightHelper(pointLight)
const gridHelper = new THREE.GridHelper(200, 50);
const camHelper = new THREE.CameraHelper(camera2);
scene.add(lightHelper, gridHelper, camHelper);
const controls = new OrbitControls(camera, renderer.domElement);
renderer.render(scene, camera);
function lookAtMonitor(monitor: number){
switch (monitor) {
case 1:
camera2.lookAt(monitor1.position);
break;
case 2:
camera2.lookAt(monitor2.position);
break;
case 3:
camera2.lookAt(monitor3.position);
break;
default:
break;
}
//camera.position.lerp(new THREE.Vector3(-10,0,30), 0.02)
//camera.lookAt(new THREE.Vector3(-10, 0, 30));
}
function animate(){
requestAnimationFrame(animate)
controls.update();
lookAtMonitor(3);
renderer.render(scene, camera);
}
animate();

View File

@ -1,5 +0,0 @@
canvas{
position: fixed;
top: 0;
left: 0;
}

1
src/vite-env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference types="svelte" />
/// <reference types="vite/client" /> /// <reference types="vite/client" />

7
svelte.config.js Normal file
View File

@ -0,0 +1,7 @@
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
}

20
tailwind.config.cjs Normal file
View File

@ -0,0 +1,20 @@
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,svelte,html}"
],
theme: {
extend: {
fontFamily:{
sans: ['Montserrat', defaultTheme.fontFamily.sans],
mono: ['Share Tech Mono', defaultTheme.fontFamily.mono]
}
},
dropShadow: {
'screen':'0 0 2px rgb(134,239,172)'
}
},
plugins: [],
}

View File

@ -1,19 +1,20 @@
{ {
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ESNext",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"module": "ESNext", "module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, /**
"esModuleInterop": true, * Typecheck JS in `.svelte` and `.js` files by default.
"noEmit": true, * Disable checkJs if you'd like to use dynamic types in JS.
"noUnusedLocals": true, * Note that setting allowJs false does not prevent the use
"noUnusedParameters": true, * of JS in `.svelte` files.
"noImplicitReturns": true, */
"skipLibCheck": true "allowJs": true,
"checkJs": true,
"isolatedModules": true
}, },
"include": ["src"] "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
"references": [{ "path": "./tsconfig.node.json" }]
} }

8
tsconfig.node.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node"
},
"include": ["vite.config.ts"]
}

7
vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
})