Gears are turning. Ideas are falling into place
This commit is contained in:
parent
0faf49cace
commit
80ad010cfd
@ -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
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
47
README.md
Normal file
47
README.md
Normal 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)
|
||||
```
|
12
index.html
12
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>
|
||||
|
2461
package-lock.json
generated
2461
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
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",
|
||||
"preview": "vite preview"
|
||||
"build": "vite build",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
6
postcss.config.cjs
Normal file
6
postcss.config.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
BIN
public/profile.jpg
Normal file
BIN
public/profile.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 607 KiB |
60
src/App.svelte
Normal file
60
src/App.svelte
Normal 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
13
src/app.css
Normal 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
54
src/lib/GlitchText.svelte
Normal 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
26
src/lib/ThreeScene.svelte
Normal 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>
|
92
src/main.ts
92
src/main.ts
@ -1,88 +1,8 @@
|
||||
import './style.css';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
//scene setup
|
||||
const scene = new THREE.Scene();
|
||||
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'),
|
||||
});
|
||||
const app = new App({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
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();
|
||||
export default app
|
||||
|
@ -1,5 +0,0 @@
|
||||
canvas{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@ -1 +1,2 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
7
svelte.config.js
Normal file
7
svelte.config.js
Normal 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
20
tailwind.config.cjs
Normal 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: [],
|
||||
}
|
@ -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,
|
||||
"noEmit": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"skipLibCheck": true
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable checkJs if you'd like to use dynamic types in JS.
|
||||
* Note that setting allowJs false does not prevent the use
|
||||
* of JS in `.svelte` files.
|
||||
*/
|
||||
"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
8
tsconfig.node.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
7
vite.config.ts
Normal file
7
vite.config.ts
Normal 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()],
|
||||
})
|
Loading…
Reference in New Issue
Block a user