Gears are turning. Ideas are falling into place

.gitea/workflows/test.yaml

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

.vscode/extensions.json

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

README.md

@@ -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)
+```

index.html

@@ -5,9 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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>
   <body>
-    <canvas id="bg"></canvas>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -1,18 +1,29 @@
 {
-  "name": "personal-site",
+  "name": "temppersonal",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "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",
     "vite": "^4.2.0"
   },
   "dependencies": {
+    "@types/three": "^0.149.0",
+    "svelte-cubed": "^0.2.1",
     "three": "^0.150.1"
   }
 }

postcss.config.cjs

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

src/App.svelte

@@ -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>

src/app.css

@@ -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;
+}

src/lib/GlitchText.svelte

@@ -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>

src/lib/ThreeScene.svelte

@@ -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>

src/main.ts

@@ -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();

src/style.css

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

src/vite-env.d.ts

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

svelte.config.js

@@ -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(),
+}

tailwind.config.cjs

@@ -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: [],
+}

tsconfig.json

@@ -1,19 +1,20 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
-    "strict": 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" }]
 }

tsconfig.node.json

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

vite.config.ts

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