fixed colors, reduced bundle

package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "@astrojs/check": "^0.5.10",
     "@astrojs/tailwind": "^5.1.0",
+    "@tsparticles/basic": "^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",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.3"

pnpm-lock.yaml

@@ -11,10 +11,16 @@ dependencies:
   '@astrojs/tailwind':
     specifier: ^5.1.0
     version: 5.1.0(astro@4.5.12)(tailwindcss@3.4.3)
+  '@tsparticles/basic':
+    specifier: ^3.3.0
+    version: 3.3.0
   '@tsparticles/engine':
     specifier: ^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
     version: 3.3.0
   astro:
@@ -1255,78 +1261,6 @@ packages:
     requiresBuild: true
     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:
     resolution: {integrity: sha512-m2cqciwsolCwrzPMcFOzruuCxqxEmofGoKHzPzN5XAUaCDNGj2lsfKHOSgk3orAQQZUmiYoJBr1rIFGEzIGvvg==}
     dependencies:
@@ -1345,97 +1279,18 @@ packages:
       '@tsparticles/engine': 3.3.0
     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:
     resolution: {integrity: sha512-m/T3SbZf8Zrn0m4Rd+8KTCMy54cofkaXa1Z7oikQYr/gPigT2C7Bo4vwQpiP8HKU+Xh5CEHFyc0s6ogfOaA2fA==}
     dependencies:
       '@tsparticles/engine': 3.3.0
     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:
     resolution: {integrity: sha512-4ZggZr4jTXXOCLXqMXkH/jfhylf9wLt2G7D/F9ZZPihh8l8F2x0YM/JvzRePynhIFXfZaMD1PRfdXNTr6HnFFQ==}
     dependencies:
       '@tsparticles/engine': 3.3.0
     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:
     resolution: {integrity: sha512-aQZJheqvoD69YYPiSlcRuWU7yEPs9dSmeOALP+fcaQwUQbVvr+wNJSUVkVNzeawtv4tPwou4QnytoWaBmZoqog==}
     dependencies:
@@ -1448,24 +1303,12 @@ packages:
       '@tsparticles/engine': 3.3.0
     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:
     resolution: {integrity: sha512-8s0dSh8bV4CN13oM86x1MPkI1T6KwuKPIiSdTcO1qKTcN1WBYzuuIPOU7Q3+fbQhSZ6F+da3zdG9unqU5sPYUA==}
     dependencies:
       '@tsparticles/engine': 3.3.0
     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:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:

src/components/Header.astro

@@ -6,13 +6,13 @@
   <h1 class="text-3xl md:text-5xl font-bold font-display text-center">
     NOAH SWERHUN
   </h1>
-  <div
+  <nav
     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><a href="#projects">PROJECTS</a></div>
+    <a href="#projects">PROJECTS</a>
     <div>·</div>
-    <div><a href="#contact">CONTACT</a></div>
+    <a href="#contact">CONTACT</a>
-  </div>
+  </nav>
 </header>

src/components/Link.astro

@@ -7,7 +7,7 @@ const { class: cls, ...rest }: HTMLAttributes<"a"> = Astro.props;
 
 <a
   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,
   )}
   {...rest}><slot /> →</a

src/components/LinkButton.astro

@@ -7,7 +7,7 @@ const { class: cls, ...rest }: HTMLAttributes<"a"> = Astro.props;
 
 <a
   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,
   )}
   {...rest}

src/components/Metadata.astro

@@ -8,7 +8,7 @@ const domain = "noahsw.xyz";
 const author = "Noah Swerhun";
 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 { title, description }: Props = Astro.props;

src/components/Particles.astro

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

src/layouts/Layout.astro

@@ -29,7 +29,7 @@ const { title, description }: Props = Astro.props;
 
     <title>{title}</title>
   </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">
       <Header />
       <main>

src/scripts/particles.ts

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

tailwind.config.mjs

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