changed from SPA to MPA

package-lock.json

@@ -11,7 +11,6 @@
 				"@astrojs/svelte": "^4.0.2",
 				"@astrojs/tailwind": "^5.0.0",
 				"astro": "^3.2.0",
-				"astro-spa": "^1.3.9",
 				"svelte": "^4.2.1",
 				"tailwindcss": "^3.3.3"
 			},
@@ -1222,11 +1221,6 @@
 				"sharp": "^0.32.5"
 			}
 		},
-		"node_modules/astro-spa": {
-			"version": "1.3.9",
-			"resolved": "https://registry.npmjs.org/astro-spa/-/astro-spa-1.3.9.tgz",
-			"integrity": "sha512-VmXMUsKNHA1gjJYq/SO5EqRAmqifOhBOpOAaXnlH5skgTy0tq9fwANJhh1LJpaahPBGqXAaoIw6Gdq/SBRz9Ww=="
-		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.16",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",

package.json

@@ -13,7 +13,6 @@
 		"@astrojs/svelte": "^4.0.2",
 		"@astrojs/tailwind": "^5.0.0",
 		"astro": "^3.2.0",
-		"astro-spa": "^1.3.9",
 		"svelte": "^4.2.1",
 		"tailwindcss": "^3.3.3"
 	},

src/components/elements/Card.astro

@@ -1,8 +1,8 @@
 ---
 interface Props {
     primaryColor: string;
-    bgColor: string;
+    bgColor?: string | undefined;
-    scaleOnHover: boolean;
+    scaleOnHover?: boolean | undefined;
 }
 
 const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props;

src/components/sections/EducationComponent.astro

@@ -7,7 +7,7 @@ import Line from "../elements/NetworkLine.astro";
     <h1 class="text-5xl text-center">Education</h1>
     <div class="flex flex-col items-center pt-10">
         <div class="w-[90%] md:w-[600px]">
-            <Card primaryColor="#EFB495" bgColor="#303030" scaleOnHover={false}>
+            <Card primaryColor="#FFAC21">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full mb-3">
                         <h2 class="font-bold text-xl">
@@ -26,8 +26,8 @@ import Line from "../elements/NetworkLine.astro";
                     </ul>
                 </div>
             </Card>
-            <Line height="100px" />
+            <Line height="50px" />
-            <Card primaryColor="#FF8080" bgColor="#303030" scaleOnHover={false}>
+            <Card primaryColor="#EEBB00">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full mb-3">
                         <h2 class="font-bold text-xl">Cambridge IGCSE</h2><h3>
@@ -38,7 +38,7 @@ import Line from "../elements/NetworkLine.astro";
                     <h3 class="mb-1 font-bold text-lg">Achievements</h3>
                     <ul class="list-disc list-inside">
                         <li>IGCSE 5 A*s, 3 A's</li>
-                        <li>President of Technology Society</li>
+                        <li>President of Magnus Technology Society</li>
                         <li>Technology Manager of Prefects' Board</li>
                     </ul>
                 </div>

src/components/sections/IntroComponent.svelte

@@ -94,7 +94,7 @@
         text-white
         flex flex-col"
 >
-    <div class="px-1 lg:px-10 pt-10 pb-2 card-content w-full">
+    <div class="px-2 lg:px-10 pt-10 pb-2 card-content w-full">
         <div class="flex flex-row h-20">
             <div class="w-20 mr-1 flex justify-center items-center">
                 <img
@@ -116,17 +116,18 @@
             Good {greeting}, <br class="sm:hidden" />I'm Ryan!
         </div>
         <p class="text-left lg:text-justify">
-            I am born and raised in Malaysia, fluent in Mandarin and English.
+            I was born and raised in Malaysia, and fluent in Mandarin and
+            English.
             <br /><br />
-            I'm passionate in developing open source projects to benefit others,
+            I'm passionate about developing open source projects that benefit others,
-            with vast experience in leadership roles.
+            and I have extensive experience in leadership roles.
             <br /><br />
             I'm also
             <b
-                >well networked with various Twitch streamers and content
+                >well-connected with various Twitch streamers and content
                 creators</b
-            >, with prominent projects that positively impacted the streaming
+            >, thanks to prominent projects that have had a positive impact on
-            community. I'm strongly motivated in the fields of
+            the streaming community. I'm strongly motivated in the fields of
             <b> web development</b>, <b>computer vision</b> and
             <b>data science</b>.
         </p>

src/components/sections/NavBar.astro

@@ -2,6 +2,8 @@
     <label
         class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
         aria-label="Menu"
+        transition:persist
+        transition:name="hamburger"
     >
         <span class="top-bun"></span>
         <input type="checkbox" aria-label="Toggle menu" />
@@ -11,27 +13,27 @@
         <nav class="flex flex-col capitalize" role="navigation">
             <a
                 class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#home">Home</a
+                href="./">Home</a
             >
             <a
                 class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#what-i-do">What I Do</a
+                href="what-i-do">What I Do</a
             >
             <a
                 class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#projects">Projects</a
+                href="projects">Projects</a
             >
             <a
                 class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#skills">Skills</a
+                href="skills">Skills</a
             >
             <a
                 class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#education">Education</a
+                href="education">Education</a
             >
             <a
                 class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
-                href="#contact">Contact</a
+                href="contact">Contact</a
             >
         </nav>
     </aside>
@@ -39,6 +41,7 @@
         id="navbar"
         class="fixed z-50 top-0 w-full hidden md:flex justify-center
             bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]"
+        transition:name="navBar"
     >
         <div
             id="navbar-div"
@@ -46,28 +49,28 @@
         >
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#home">home</a
+                href="./">home</a
             >
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#what-i-do">What I Do</a
+                href="what-i-do">What I Do</a
             >
 
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#projects">projects</a
+                href="projects">projects</a
             >
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#skills">skills</a
+                href="skills">skills</a
             >
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#education">education</a
+                href="education">education</a
             >
             <a
                 class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
-                href="#contact">contact</a
+                href="contact">contact</a
             >
         </div>
     </div>
@@ -90,6 +93,8 @@
     .hamburger-menu {
         --x-width: calc(var(--hamburger-height) * 1.41421356237);
 
+        display: none;
+
         translate: 0 -20px;
         flex-direction: column;
 
@@ -172,6 +177,12 @@
         max-width: 10rem;
         min-height: 100vh;
     }
+
+    @media (max-width: 767px) {
+        .hamburger-menu {
+            display: flex;
+        }
+    }
 </style>
 
 <script defer is:inline>

src/components/sections/SkillsComponent.astro

@@ -7,7 +7,7 @@ import Line from "../elements/NetworkLine.astro";
     <h1 class="text-center text-5xl">Skills</h1>
     <div class="flex flex-col items-center">
         <div class="w-[90%] md:w-[600px] pt-10">
-            <Card primaryColor="#9EDDFF" bgColor="#282828" scaleOnHover={false}>
+            <Card primaryColor="#19a7ce">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full">
                         <h2 class="font-bold text-2xl">Web Development</h2>
@@ -24,6 +24,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-orange-700
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             HTML
@@ -31,6 +32,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-blue-700
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             CSS
@@ -38,6 +40,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-yellow-400 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Javascript
@@ -45,6 +48,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-blue-400 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             TypeScript
@@ -52,6 +56,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-[#617CBE]
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             PHP
@@ -59,6 +64,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-yellow-500 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Express
@@ -66,6 +72,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-orange-500
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Svelte
@@ -73,6 +80,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-[#00D8FF] hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             React
@@ -80,6 +88,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-green-500 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Vue
@@ -87,6 +96,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-white hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Astro
@@ -94,6 +104,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-[#07B6D4] hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             TailwindCSS
@@ -101,6 +112,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-[#8500C7]
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Vite
@@ -109,7 +121,7 @@ import Line from "../elements/NetworkLine.astro";
                 </div>
             </Card>
             <Line height="50px" />
-            <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={false}>
+            <Card primaryColor="#a1eebd">
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full">
                         <h2 class="font-bold text-2xl">Data Science</h2>
@@ -128,6 +140,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:text-white hover:bg-blue-700
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Python
@@ -135,6 +148,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-cyan-500
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             R
@@ -142,6 +156,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-green-600
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             OpenCV
@@ -149,6 +164,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-blue-500 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             SAS
@@ -156,6 +172,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-orange-700
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             MySQL
@@ -163,6 +180,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-blue-800
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Pandas
@@ -170,6 +188,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-green-700
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             Selenium
@@ -177,6 +196,7 @@ import Line from "../elements/NetworkLine.astro";
                         <div
                             class="w-fit text-white bg-gray-500 hover:bg-gray-200 hover:text-black
                                 rounded-full px-3 py-1 mr-1 my-1
+                                cursor-default
                                 transition-colors duration-300"
                         >
                             BeautifulSoup4

src/components/sections/WhatIDoComponent.astro

@@ -6,12 +6,11 @@ import Card from "../elements/Card.astro";
     <div
         class="w-full h-fit flex flex-col justify-center items-center max-w-[1440px]"
     >
-        <div class="h-[1px] w-1/3 bg-[#404040] mb-10"></div>
         <h1 class="text-center text-5xl mb-10">What I Do</h1>
         <div
             class="grid grid-cols-1 w-[90%] sm:w-[350px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
         >
-            <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
+            <Card primaryColor="#19a7ce" scaleOnHover={true}>
                 <div class="card-content">
                     <h2 class="font-bold text-xl text-center">
                         Web Development
@@ -24,7 +23,7 @@ import Card from "../elements/Card.astro";
                 </div>
             </Card>
 
-            <Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
+            <Card primaryColor="#a1eebd" scaleOnHover={true}>
                 <div class="card-content">
                     <h2 class="font-bold text-xl text-center">Data Science</h2>
                     <hr class="w-full" />
@@ -36,7 +35,7 @@ import Card from "../elements/Card.astro";
                 </div>
             </Card>
 
-            <Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
+            <Card primaryColor="#9D76C1" scaleOnHover={true}>
                 <div class="card-content">
                     <h2 class="font-bold text-xl text-center">
                         Content Creation

src/layouts/Layout.astro

@@ -1,22 +1,18 @@
 ---
-// @ts-ignore
-import { Spa } from "astro-spa";
-
 interface Props {
     title: string;
+    description: string;
 }
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
+import { ViewTransitions } from "astro:transitions";
 ---
 
 <!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <meta
+        <meta name="description" content={description} />
-            name="description"
-            content="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
-        />
         <meta name="viewport" content="width=device-width" /><meta
             name="keywords"
             content="Rython, student, developer, frontend, web developer, streamer, coworking"
@@ -29,7 +25,7 @@ const { title } = Astro.props;
     </head>
     <body>
         <slot />
-        <Spa />
+        <ViewTransitions />
     </body>
 </html>
 <style is:global>

src/pages/contact.astro

@@ -0,0 +1,55 @@
+---
+import NavBar from "../components/sections/NavBar.astro";
+import Layout from "../layouts/Layout.astro";
+import ContactComponent from "../components/sections/ContactComponent.astro";
+import Card from "../components/elements/Card.astro";
+---
+
+<Layout
+    title="Contact"
+    description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
+>
+    <NavBar />
+    <div id="what-i-do" class="mt-10 pt-20">
+        <h1 class="text-center text-5xl">Contact</h1>
+        <div class="mt-10 flex justify-center items-center">
+            <div class="w-[90%] md:w-[600px]">
+                <Card primaryColor="#40A2D8">
+                    <div class="card-content">
+                        <div class="flex flex-col justify-left w-full mb-3">
+                            <h2 class="font-bold text-xl text-center">
+                                Seeking a young dev with fresh ideas and a
+                                hunger to make a difference?
+                            </h2>
+                        </div>
+                        <hr class="w-full mb-3" />
+                        <div class="text-center">
+                            Whether it's sponsorships or collaboration
+                            opportunities, drop me a line and let's spark some
+                            digital magic!
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        </div>
+        <div class="mt-10">
+            <ContactComponent />
+        </div>
+    </div>
+</Layout>
+
+<style>
+    .card-content {
+        display: flex;
+        flex-direction: column;
+        background-image: radial-gradient(
+            rgba(255, 255, 255, 0.1) 1px,
+            transparent 1px
+        );
+        background-position: 50% 50%;
+        background-size: 1.1rem 1.1rem;
+        padding: 2rem 2rem;
+        border-radius: 1.25rem;
+        overflow: hidden;
+    }
+</style>

src/pages/education.astro

@@ -0,0 +1,12 @@
+---
+import NavBar from "../components/sections/NavBar.astro";
+import Layout from "../layouts/Layout.astro";
+import EducationComponent from "../components/sections/EducationComponent.astro";
+---
+
+<Layout title="Education" description="Find out RythonDev's previous education">
+    <NavBar />
+    <div id="Education" class="mt-10">
+        <EducationComponent />
+    </div>
+</Layout>

src/pages/index.astro

@@ -2,27 +2,30 @@
 import NavBar from "../components/sections/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/elements/NetworkLine.astro";
-import WhatIDo from "../components/sections/WhatIDo.astro";
+import WhatIDo from "../components/sections/WhatIDoComponent.astro";
-import Intro from "../components/sections/Intro.svelte";
+import Intro from "../components/sections/IntroComponent.svelte";
-import Projects from "../components/sections/Projects.svelte";
+import Projects from "../components/sections/ProjectsComponent.svelte";
-import Education from "../components/sections/Education.astro";
+import Education from "../components/sections/EducationComponent.astro";
-import Skills from "../components/sections/Skills.astro";
+import Skills from "../components/sections/SkillsComponent.astro";
-import Contact from "../components/sections/Contact.astro";
+import Contact from "../components/sections/ContactComponent.astro";
 import Card from "../components/elements/Card.astro";
 ---
 
-<Layout title="Ryan's Portfolio">
+<Layout
+    title="Ryan's Portfolio"
+    description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
+>
     <NavBar />
     <div id="home" class="pt-20 flex justify-center items-center">
         <div class="w-[90%] xl:w-1/2 lg:w-1/2 max-w-[1080px]">
-            <Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
+            <Card bgColor="#252525" primaryColor="#BEADFA">
                 <Intro client:load />
             </Card>
         </div>
     </div>
-
+    <NetworkLine height="70px" />
     <div id="what-i-do">
-        <NetworkLine height="70px" />
+        <div class="h-[1px] w-1/3 bg-[#404040] mb-10 mx-auto"></div>
         <WhatIDo />
     </div>
     <div id="projects">

src/pages/projects.astro

@@ -0,0 +1,12 @@
+---
+import NavBar from "../components/sections/NavBar.astro";
+import Layout from "../layouts/Layout.astro";
+import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
+---
+
+<Layout title="Projects" description="View what projects RythonDev has made">
+    <NavBar />
+    <div id="what-i-do" class="mt-10 pb-20">
+        <ProjectsComponent />
+    </div>
+</Layout>

src/pages/skills.astro

@@ -0,0 +1,92 @@
+---
+import NavBar from "../components/sections/NavBar.astro";
+import Layout from "../layouts/Layout.astro";
+import SkillsComponent from "../components/sections/SkillsComponent.astro";
+import Line from "../components/elements/NetworkLine.astro";
+import Card from "../components/elements/Card.astro";
+---
+
+<Layout
+    title="Skills"
+    description="Learn what skills RythonDev has honed in the past few years"
+>
+    <NavBar />
+    <div id="skills" class="mt-10 pb-20">
+        <SkillsComponent />
+        <Line height="50px" />
+        <div class="w-[90%] md:w-[600px] mx-auto">
+            <Card primaryColor="#9D76C1">
+                <div class="card-content">
+                    <div class="flex flex-col justify-left w-full">
+                        <h2 class="font-bold text-2xl">Content Creation</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left lg:text-justify">
+                        Since I was little, I loved watching YouTube videos and
+                        the idea of bringing joy and laughter to a wider
+                        audience. Thus, I began my journey in content creation
+                        through YouTube videos and Twitch streaming. I typically
+                        do coworking & study streams to keep myself accountable
+                        and encourage productivity amongst viewers. I also do
+                        software and game development streams where I showcase
+                        my work flow.
+                    </p>
+                    <div class="w-full flex flex-row flex-wrap justify-start">
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-gray-50 hover:text-black
+                            rounded-full px-3 py-1 mr-1 my-1
+                            cursor-default
+                            transition-colors duration-300"
+                        >
+                            OBS
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-gray-50 hover:text-black
+                            rounded-full px-3 py-1 mr-1 my-1
+                            cursor-default
+                            transition-colors duration-300"
+                        >
+                            DaVinci Resolve
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-purple-500
+                            rounded-full px-3 py-1 mr-1 my-1
+                            cursor-default
+                            transition-colors duration-300"
+                        >
+                            Twitch
+                        </div>
+                        <div
+                            class="w-fit text-white bg-gray-500 hover:bg-red-600 hover:text-white
+                            rounded-full px-3 py-1 mr-1 my-1
+                            cursor-default
+                            transition-colors duration-300"
+                        >
+                            YouTube
+                        </div>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    </div>
+</Layout>
+
+<style>
+    .card-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background-image: radial-gradient(
+            rgba(255, 255, 255, 0.1) 1px,
+            transparent 1px
+        );
+        background-position: 50% 50%;
+        background-size: 1.1rem 1.1rem;
+        padding-top: 2rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-bottom: 0.5rem;
+        border-radius: 1.25rem;
+        overflow: hidden;
+    }
+</style>

src/pages/what-i-do.astro

@@ -0,0 +1,208 @@
+---
+import NavBar from "../components/sections/NavBar.astro";
+import Layout from "../layouts/Layout.astro";
+import WhatIDoComponent from "../components/sections/WhatIDoComponent.astro";
+import Card from "../components/elements/Card.astro";
+import Line from "../components/elements/NetworkLine.astro";
+---
+
+<Layout
+    title="What I Do"
+    description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
+>
+    <NavBar />
+    <div id="what-i-do" class="mt-10 pt-20 pb-20">
+        <WhatIDoComponent />
+
+        <div class="mx-auto w-[90%] md:w-[750px] mt-20">
+            <Card primaryColor="#19a7ce">
+                <div class="card-content">
+                    <h2
+                        id="web-dev"
+                        class="font-bold text-2xl animate-gradient"
+                    >
+                        Web Development
+                    </h2>
+                    <hr class="w-full mb-3 mt-3" />
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">Websites</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            I go beyond coding; I'm a developer who translates
+                            your vision into a captivating online presence.
+                            Through custom designs, intuitive user experiences,
+                            and special attention to detail, I weave your unique
+                            narrative into every strand of your website.
+                        </p>
+                    </div>
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">Web Apps</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            I craft solutions that streamline workflows, boost
+                            efficiency, and empower your users to achieve more.
+                            With a focus on intuitive interfaces, powerful
+                            functionality, and data-driven optimization, I
+                            transform complex ideas into elegant tools that
+                            seamlessly integrate into your ecosystem.
+                        </p>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-xl">Widgets</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            Leveraging my web development skills, I built stream
+                            widgets to level up the stream! Easy to use and
+                            customize, my work have been used by 100+ streamers
+                            from pomodoro timers to to-do lists!
+                        </p>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
+            <Card primaryColor="#a1eebd">
+                <div class="card-content">
+                    <h2
+                        id="data-science"
+                        class="font-bold text-2xl animate-gradient"
+                    >
+                        Data Science
+                    </h2>
+                    <hr class="w-full mb-3 mt-3" />
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">
+                            Data Analysis and Visualization
+                        </h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            I'm your data artist, translating numbers into works
+                            of art that inform, inspire, and guide
+                            decision-making. We'll create visually compelling
+                            narratives that turn dry statistics into captivating
+                            stories using Python and R.
+                        </p>
+                    </div>
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">
+                            Statistics and Probability
+                        </h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            Every number tells a story, but it takes the
+                            language of statistics and probability to truly
+                            understand it. Our world is awash in data, but it's
+                            only through these powerful tools that we can
+                            transform it into meaningful insights and actionable
+                            intelligence.
+                        </p>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-xl">Machine Learning</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            Machine learning isn't just about mimicking human
+                            intelligence, it's about surpassing it. We push the
+                            boundaries of what's possible, collaborating with
+                            code to solve problems beyond human capabilities.
+                        </p>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
+            <Card primaryColor="#9D76C1">
+                <div class="card-content">
+                    <h2
+                        id="content-creation"
+                        class="font-bold text-2xl animate-gradient"
+                    >
+                        Content Creation
+                    </h2>
+                    <hr class="w-full mb-3 mt-3" />
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">Streaming</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            Streaming isn't just about entertainment, it's about
+                            building a brand that resonates and inspires.
+                            Streaming allows me to enhance my marketing skills
+                            and the ability to entertain and engage with viewers
+                            in real time.
+                        </p>
+                    </div>
+                    <div class="mb-5">
+                        <h3 class="font-bold text-xl">Video Editing</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            I may be at the beginning of my video editing
+                            adventure, but I'm committed to making your vision a
+                            reality. I'll learn, adapt, and work tirelessly to
+                            translate your ideas into compelling videos that
+                            resonate with your audience.
+                        </p>
+                    </div>
+                    <div>
+                        <h3 class="font-bold text-xl">Personality</h3>
+                        <p class="mt-1 md:text-justify text-left">
+                            I believe content should be an adventure, not a
+                            formula. my world is a vibrant playground of
+                            unscripted interactions, quirky challenges, and raw
+                            emotional moments. It's messy, it's exhilarating,
+                            and it's uniquely me.
+                        </p>
+                    </div>
+                </div>
+            </Card>
+        </div>
+    </div>
+</Layout>
+
+<style>
+    .card-content {
+        display: flex;
+        flex-direction: column;
+        background-image: radial-gradient(
+            rgba(255, 255, 255, 0.1) 1px,
+            transparent 1px
+        );
+        background-position: 50% 50%;
+        background-size: 1.1rem 1.1rem;
+        padding: 2rem 2rem;
+        border-radius: 1.25rem;
+        overflow: hidden;
+    }
+
+    #web-dev {
+        background: linear-gradient(
+            90deg,
+            #afd3e2 0%,
+            #19a7ce 45%,
+            #a5d7e8 100%
+        );
+
+        background-size: 300%;
+
+        background-clip: text;
+        -webkit-background-clip: text;
+
+        -webkit-text-fill-color: transparent;
+    }
+
+    #data-science {
+        background: linear-gradient(
+            90deg,
+            #a1eebd 0%,
+            #7bd3ea 45%,
+            #f6f7c4 100%
+        );
+
+        background-size: 300%;
+
+        background-clip: text;
+        -webkit-background-clip: text;
+
+        -webkit-text-fill-color: transparent;
+    }
+
+    #content-creation {
+        background: linear-gradient(90deg, #9d76c1 40%, #ff6868 90%);
+
+        background-size: 300%;
+
+        background-clip: text;
+        -webkit-background-clip: text;
+
+        -webkit-text-fill-color: transparent;
+    }
+</style>