fixed colors, reduced bundle

This commit is contained in:
Noah Swerhun 2024-04-15 15:05:26 -05:00
parent a2d95b8d73
commit c47ca1f16a
13 changed files with 35 additions and 184 deletions

View file

@ -12,8 +12,10 @@
"dependencies": { "dependencies": {
"@astrojs/check": "^0.5.10", "@astrojs/check": "^0.5.10",
"@astrojs/tailwind": "^5.1.0", "@astrojs/tailwind": "^5.1.0",
"@tsparticles/basic": "^3.3.0",
"@tsparticles/engine": "^3.3.0", "@tsparticles/engine": "^3.3.0",
"@tsparticles/slim": "^3.3.0", "@tsparticles/interaction-particles-links": "^3.3.0",
"@tsparticles/move-parallax": "^3.3.0",
"astro": "^4.5.12", "astro": "^4.5.12",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"typescript": "^5.4.3" "typescript": "^5.4.3"

View file

@ -11,10 +11,16 @@ dependencies:
'@astrojs/tailwind': '@astrojs/tailwind':
specifier: ^5.1.0 specifier: ^5.1.0
version: 5.1.0(astro@4.5.12)(tailwindcss@3.4.3) version: 5.1.0(astro@4.5.12)(tailwindcss@3.4.3)
'@tsparticles/basic':
specifier: ^3.3.0
version: 3.3.0
'@tsparticles/engine': '@tsparticles/engine':
specifier: ^3.3.0 specifier: ^3.3.0
version: 3.3.0 version: 3.3.0
'@tsparticles/slim': '@tsparticles/interaction-particles-links':
specifier: ^3.3.0
version: 3.3.0
'@tsparticles/move-parallax':
specifier: ^3.3.0 specifier: ^3.3.0
version: 3.3.0 version: 3.3.0
astro: astro:
@ -1255,78 +1261,6 @@ packages:
requiresBuild: true requiresBuild: true
dev: false dev: false
/@tsparticles/interaction-external-attract@3.3.0:
resolution: {integrity: sha512-tkwGFoOwwwZm7tcXW4zeJ0EVeRxtOre3EkMT151E/LKmjudo7sQHXpJk/tfz839OdMi3gGq7+9J88AEyl0TVhA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-bounce@3.3.0:
resolution: {integrity: sha512-4j+Dz/cj+/zgDJZPDVDZz+SCUSxzdDCcEOxjo4KwEYa/vQH4hBPlGxM7V1wIE6g/bKTbNZbmcDAW8haRVrtdSA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-bubble@3.3.0:
resolution: {integrity: sha512-xdtensiGRhR1C2cOlKBTGr5Sxu9QmMEjloSbr7mx8pyV03OnLG2j5GqFxTzVpoFa+yojjMQ/E5KXctWfQ2FbTg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-connect@3.3.0:
resolution: {integrity: sha512-mYdeRclR41qlLwbF3ONsZzu5VDkcML95BDQOrc5uVOC8AukAVhoTKjwVYgii7g3obSvYzSE1YvaAOuLDZOpNwg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-grab@3.3.0:
resolution: {integrity: sha512-07dsnz1VzuFY655Ba24kXwyYj/tFSQ0M0ae55z3UFa09o/1uJiDKCdnhBqSAT+MrLiVRX/h8BHL0XS9O3EwE/Q==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-pause@3.3.0:
resolution: {integrity: sha512-b43k5ecrdsWsiSpKtMPolPhw7EfBeaoH6fFeRUhv7tF4itTHB+DEONcvIOlN3jlQswgZm/sZcaq4dnxT31t9kw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-push@3.3.0:
resolution: {integrity: sha512-pwU2hBvp6/YstK+wtChfKJtXkEBP2Z3836rkK+CUeO7sbsSzO2SkJtmUPfJZJHCcvpCjEoDfhp/3zPskBiwe0w==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-remove@3.3.0:
resolution: {integrity: sha512-jg6aA0eC1rxZ/bamKJnApBhxABsk/4RgtaWNHLWAKTlen4TdF1pqECqit9Q5C6q5kcJrG7bmRF3VuWd80WiIwQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-repulse@3.3.0:
resolution: {integrity: sha512-6fZg9PNUZqXaBtI4OqTKPU98a7/CJP5C+us90q1QqEBhIFSxJBnIkmuloLZuZ7Vj8Ul1FID2Zr8HN5b5EJOZPw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-external-slow@3.3.0:
resolution: {integrity: sha512-flqaF6QN6XuEvKP2KhG2ln82wB9q5WPLLoUBDfWBbYI3gm+O0AH8orysHXYYGtLv+20ZdNiS8fijNl3jvNVLzQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-attract@3.3.0:
resolution: {integrity: sha512-jNFcAfrgz7hqC1rknnvnahrfLRUR8SRI5dJI1MVisi9kuNkSFJUSiGMUbDzYx8eKqfBwcFphVlWrcaylaYeWvA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-collisions@3.3.0:
resolution: {integrity: sha512-OwHaTaXA0WmHoyd6ygVnJXWqJvK8ObVUoKwSBQg7yRToZkL7lqKnqCJxjoWlHENORP9p8OF/G3JoX0rJXQYQcQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/interaction-particles-links@3.3.0: /@tsparticles/interaction-particles-links@3.3.0:
resolution: {integrity: sha512-m2cqciwsolCwrzPMcFOzruuCxqxEmofGoKHzPzN5XAUaCDNGj2lsfKHOSgk3orAQQZUmiYoJBr1rIFGEzIGvvg==} resolution: {integrity: sha512-m2cqciwsolCwrzPMcFOzruuCxqxEmofGoKHzPzN5XAUaCDNGj2lsfKHOSgk3orAQQZUmiYoJBr1rIFGEzIGvvg==}
dependencies: dependencies:
@ -1345,97 +1279,18 @@ packages:
'@tsparticles/engine': 3.3.0 '@tsparticles/engine': 3.3.0
dev: false dev: false
/@tsparticles/plugin-easing-quad@3.3.0:
resolution: {integrity: sha512-6c5SRGj9qzASOJwiAc06JVOtH9ZaTXrF9p7svZ1qr/S85fRoRL+Jz/ucl8cdRDqRJvXTrt1qkz2OMi+P+4AgEA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-circle@3.3.0: /@tsparticles/shape-circle@3.3.0:
resolution: {integrity: sha512-m/T3SbZf8Zrn0m4Rd+8KTCMy54cofkaXa1Z7oikQYr/gPigT2C7Bo4vwQpiP8HKU+Xh5CEHFyc0s6ogfOaA2fA==} resolution: {integrity: sha512-m/T3SbZf8Zrn0m4Rd+8KTCMy54cofkaXa1Z7oikQYr/gPigT2C7Bo4vwQpiP8HKU+Xh5CEHFyc0s6ogfOaA2fA==}
dependencies: dependencies:
'@tsparticles/engine': 3.3.0 '@tsparticles/engine': 3.3.0
dev: false dev: false
/@tsparticles/shape-emoji@3.3.0:
resolution: {integrity: sha512-F9tl3jUTMCRzbwhpKk3t1z2d+7vbyeAoHAEeG4UdUVorO0ovaqzj16KcpfSu2wyGkPSzUKIyHX8doB9MR8DfGw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-image@3.3.0:
resolution: {integrity: sha512-w5PHiDZjILIUEDIn10bFasY1qnSY9lwV0ekoTLGDepiS/EmyNJb0+D7gWOy/mhFlpK1637Ngbz1Axw3Zfl8ObA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-line@3.3.0:
resolution: {integrity: sha512-PPkwsBL2F4TNK/6eXThhqTcInSPpGb5rjsBR3bbWBXKGEH+4ibLA0biBQWPjxqY/UrAt4St1dpktKRmTt0XacA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-polygon@3.3.0:
resolution: {integrity: sha512-JAHKIO8Pmzft0METZn6BqTHpn9PxWXxhAlPMG0XOEuziHpvMxmTXYbJNDFlmWu9RFpAjfIeGg8zUcS1xNuGWUQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-square@3.3.0:
resolution: {integrity: sha512-72tLkzQ5QkkhgIFy+qqdA+vmBk8VE4PuJcLJ12FVH8e3uPJDO2WiLJmnCg9MHyp26uU5CEuIalrQpZ0TX1A5PQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/shape-star@3.3.0:
resolution: {integrity: sha512-RX9RLuJ9oWQbOVvVyiOBdPK8dc+RLc7DaqEOxGhMTPQeGvryjdkBU/FmiG4a7KaVyZeCI2diDW4oWEkulzZIIg==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/slim@3.3.0:
resolution: {integrity: sha512-/FAbB4b9/j7xaZYuGx+uU4rDLrLs7zEShwFHDWc4PWn/970CX+EvKszqNrBvQDuqDD3HZQ94iCwj7w9OWKXLTg==}
dependencies:
'@tsparticles/basic': 3.3.0
'@tsparticles/engine': 3.3.0
'@tsparticles/interaction-external-attract': 3.3.0
'@tsparticles/interaction-external-bounce': 3.3.0
'@tsparticles/interaction-external-bubble': 3.3.0
'@tsparticles/interaction-external-connect': 3.3.0
'@tsparticles/interaction-external-grab': 3.3.0
'@tsparticles/interaction-external-pause': 3.3.0
'@tsparticles/interaction-external-push': 3.3.0
'@tsparticles/interaction-external-remove': 3.3.0
'@tsparticles/interaction-external-repulse': 3.3.0
'@tsparticles/interaction-external-slow': 3.3.0
'@tsparticles/interaction-particles-attract': 3.3.0
'@tsparticles/interaction-particles-collisions': 3.3.0
'@tsparticles/interaction-particles-links': 3.3.0
'@tsparticles/move-parallax': 3.3.0
'@tsparticles/plugin-easing-quad': 3.3.0
'@tsparticles/shape-emoji': 3.3.0
'@tsparticles/shape-image': 3.3.0
'@tsparticles/shape-line': 3.3.0
'@tsparticles/shape-polygon': 3.3.0
'@tsparticles/shape-square': 3.3.0
'@tsparticles/shape-star': 3.3.0
'@tsparticles/updater-life': 3.3.0
'@tsparticles/updater-rotate': 3.3.0
'@tsparticles/updater-stroke-color': 3.3.0
dev: false
/@tsparticles/updater-color@3.3.0: /@tsparticles/updater-color@3.3.0:
resolution: {integrity: sha512-4ZggZr4jTXXOCLXqMXkH/jfhylf9wLt2G7D/F9ZZPihh8l8F2x0YM/JvzRePynhIFXfZaMD1PRfdXNTr6HnFFQ==} resolution: {integrity: sha512-4ZggZr4jTXXOCLXqMXkH/jfhylf9wLt2G7D/F9ZZPihh8l8F2x0YM/JvzRePynhIFXfZaMD1PRfdXNTr6HnFFQ==}
dependencies: dependencies:
'@tsparticles/engine': 3.3.0 '@tsparticles/engine': 3.3.0
dev: false dev: false
/@tsparticles/updater-life@3.3.0:
resolution: {integrity: sha512-6DDx4FfezLmXxetVx0kFZdWKWLIPa/ujFxHto0fFIVFtjLaffJPEONoOIj6/TmAlcJ+XF2jY2Md4z6vyS6bMlA==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-opacity@3.3.0: /@tsparticles/updater-opacity@3.3.0:
resolution: {integrity: sha512-aQZJheqvoD69YYPiSlcRuWU7yEPs9dSmeOALP+fcaQwUQbVvr+wNJSUVkVNzeawtv4tPwou4QnytoWaBmZoqog==} resolution: {integrity: sha512-aQZJheqvoD69YYPiSlcRuWU7yEPs9dSmeOALP+fcaQwUQbVvr+wNJSUVkVNzeawtv4tPwou4QnytoWaBmZoqog==}
dependencies: dependencies:
@ -1448,24 +1303,12 @@ packages:
'@tsparticles/engine': 3.3.0 '@tsparticles/engine': 3.3.0
dev: false dev: false
/@tsparticles/updater-rotate@3.3.0:
resolution: {integrity: sha512-4i3+0rbvzmaNGunlK443kURoEVFeAvCY5VGNX73y8S5g94RFejtGYBUUsC/LAcCxgfxa3HgYwNTT6ypslnoNuw==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@tsparticles/updater-size@3.3.0: /@tsparticles/updater-size@3.3.0:
resolution: {integrity: sha512-8s0dSh8bV4CN13oM86x1MPkI1T6KwuKPIiSdTcO1qKTcN1WBYzuuIPOU7Q3+fbQhSZ6F+da3zdG9unqU5sPYUA==} resolution: {integrity: sha512-8s0dSh8bV4CN13oM86x1MPkI1T6KwuKPIiSdTcO1qKTcN1WBYzuuIPOU7Q3+fbQhSZ6F+da3zdG9unqU5sPYUA==}
dependencies: dependencies:
'@tsparticles/engine': 3.3.0 '@tsparticles/engine': 3.3.0
dev: false dev: false
/@tsparticles/updater-stroke-color@3.3.0:
resolution: {integrity: sha512-swo8nbIQsMJa5kGkaZF4Fq1XekKNqTj3n8T921kQOdkkz/nmL8U3/ikdRUpW/OiZgvULTnihYnDtTtiMtLmcaQ==}
dependencies:
'@tsparticles/engine': 3.3.0
dev: false
/@types/babel__core@7.20.5: /@types/babel__core@7.20.5:
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
dependencies: dependencies:

BIN
public/portrait_cropped.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 143 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 250 KiB

After

Width:  |  Height:  |  Size: 143 KiB

View file

Before

Width:  |  Height:  |  Size: 250 KiB

After

Width:  |  Height:  |  Size: 250 KiB

View file

@ -6,13 +6,13 @@
<h1 class="text-3xl md:text-5xl font-bold font-display text-center"> <h1 class="text-3xl md:text-5xl font-bold font-display text-center">
NOAH SWERHUN NOAH SWERHUN
</h1> </h1>
<div <nav
class="flex flex-cols justify-between my-2 font-bold md:text-lg font-display" class="flex flex-cols justify-between my-2 font-bold md:text-lg font-display"
> >
<div><a href="#profile">PROFILE</a></div> <a href="#profile">PROFILE</a>
<div>·</div> <div>·</div>
<div><a href="#projects">PROJECTS</a></div> <a href="#projects">PROJECTS</a>
<div>·</div> <div>·</div>
<div><a href="#contact">CONTACT</a></div> <a href="#contact">CONTACT</a>
</div> </nav>
</header> </header>

View file

@ -7,7 +7,7 @@ const { class: cls, ...rest }: HTMLAttributes<"a"> = Astro.props;
<a <a
class={cn( class={cn(
"inline-block underline underline-offset-4 hover:underline-offset-8 hover:text-white transition-all duration-300 p-3", "inline-block underline underline-offset-4 hover:underline-offset-8 hover:text-accent transition-all duration-300 p-3",
cls, cls,
)} )}
{...rest}><slot /> →</a {...rest}><slot /> →</a

View file

@ -7,7 +7,7 @@ const { class: cls, ...rest }: HTMLAttributes<"a"> = Astro.props;
<a <a
class={cn( class={cn(
"inline-block bg-primary text-secondary rounded-lg hover:bg-white transition-all duration-300block font-body py-3 px-6 text-center", "inline-block bg-foreground text-background rounded-lg hover:bg-accent transition-all duration-300block font-body py-3 px-6 text-center",
cls, cls,
)} )}
{...rest} {...rest}

View file

@ -8,7 +8,7 @@ const domain = "noahsw.xyz";
const author = "Noah Swerhun"; const author = "Noah Swerhun";
const site_name = "Noah Swerhun's Website"; const site_name = "Noah Swerhun's Website";
const image_link = "https://noahsw.xyz/portrait_sm.jpg"; const image_link = "https://noahsw.xyz/portrait_cropped.jpg";
const image_desc = "Portrait of Noah Swerhun"; const image_desc = "Portrait of Noah Swerhun";
const { title, description }: Props = Astro.props; const { title, description }: Props = Astro.props;

View file

@ -9,14 +9,18 @@ const { class: cls }: Props = Astro.props;
<div id="tsparticles" class={cls}></div> <div id="tsparticles" class={cls}></div>
<script> <script>
// pnpm i @tsparticles/engine @tsparticles/slim // pnpm i @tsparticles/{engine,basic,move-parallax,interaction-particles-links}
// Make sure to import your options here // Make sure to import your options here
import { options } from "@/scripts/particles"; import { options } from "@/scripts/particles";
import { tsParticles } from "@tsparticles/engine"; import { tsParticles } from "@tsparticles/engine";
import { loadSlim } from "@tsparticles/slim"; import { loadBasic } from "@tsparticles/basic";
import { loadParallaxMover } from "@tsparticles/move-parallax";
import { loadParticlesLinksInteraction } from "@tsparticles/interaction-particles-links";
(async () => { (async () => {
await loadSlim(tsParticles); await loadBasic(tsParticles);
await loadParallaxMover(tsParticles);
await loadParticlesLinksInteraction(tsParticles);
await tsParticles.load({ id: "tsparticles", options: options }); await tsParticles.load({ id: "tsparticles", options: options });
})(); })();
</script> </script>

View file

@ -29,7 +29,7 @@ const { title, description }: Props = Astro.props;
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="font-body bg-secondary text-primary relative"> <body class="font-body bg-background text-foreground relative">
<div class="w-11/12 max-w-[1075px] mx-auto"> <div class="w-11/12 max-w-[1075px] mx-auto">
<Header /> <Header />
<main> <main>

View file

@ -1,11 +1,11 @@
import type { ISourceOptions } from "@tsparticles/engine"; import type { ISourceOptions } from "@tsparticles/engine";
const particle_color = "#2E332E"; const color = "#303331";
export const options: ISourceOptions = { export const options: ISourceOptions = {
autoPlay: true, autoPlay: true,
background: { background: {
color: "#121412", opacity: 0,
}, },
particles: { particles: {
number: { number: {
@ -19,7 +19,7 @@ export const options: ISourceOptions = {
links: { links: {
distance: 150, distance: 150,
enable: true, enable: true,
color: particle_color, color: color,
}, },
move: { move: {
enable: true, enable: true,
@ -32,10 +32,11 @@ export const options: ISourceOptions = {
type: "circle", type: "circle",
}, },
color: { color: {
value: particle_color, value: color,
}, },
opacity: { opacity: {
value: 1, value: 0.2,
} }
}, },
interactivity: { interactivity: {

View file

@ -7,8 +7,9 @@ export default {
md: "850px", md: "850px",
}, },
colors: { colors: {
secondary: "#121412", background: "#0F1210",
primary: "#F2FCF4", foreground: "#E6FFE9",
accent: "#F2FFF4",
}, },
fontFamily: { fontFamily: {
display: ["Fahkwang", "serif"], display: ["Fahkwang", "serif"],