verison 1.0

src/components/Card.astro

@@ -2,12 +2,13 @@
 interface Props {
     primaryColor: string;
     bgColor: string;
+    scaleOnHover: boolean;
 }
 
-const { primaryColor, bgColor = "#282828" } = Astro.props;
+const { primaryColor, bgColor = "#282828", scaleOnHover = false } = Astro.props;
 ---
 
-<div class="card">
+<div class="card z-10" class:list={[{ scale: scaleOnHover }]}>
     <slot />
 </div>
 
@@ -59,4 +60,12 @@ const { primaryColor, bgColor = "#282828" } = Astro.props;
         top: 25%;
         opacity: 1;
     }
+
+    .card.scale {
+        transition: transform 0.5s ease;
+    }
+
+    .card.scale:hover {
+        transform: scale(1.05);
+    }
 </style>

src/components/Contact.astro

@@ -0,0 +1,88 @@
+<div
+    class="w-full h-fit pb-40 flex flex-col justify-center items-center relative
+    bg-[rgb(32,32,32)] bg-[linear-gradient(180deg,_rgba(32,32,32,1)_0%,_rgba(30,30,30,1)_10%)]"
+>
+    <div class="flex flex-col justify-center items-center">
+        <div
+            id="title"
+            class="animate-gradient text-3xl text-center font-bold mb-3"
+        >
+            Get in Touch with me!
+        </div>
+        <div class="text-lg text-center mb-10 px-5">
+            I'm always open to new opportunities and collaborations!
+        </div>
+
+        <a
+            class="border-2 border-purple-500 text-purple-500 px-5 py-5 hover:bg-purple-500 hover:text-black transition-colors duration-500 ease-in-out rounded-xl"
+            href="mailto:ryanpython932@gmail.com">Send me an email!</a
+        >
+    </div>
+    <div
+        class="absolute bottom-10 left-1/2 -translate-x-1/2 text-white flex flex-row"
+    >
+        <a href="https://github.com/liyunze-coding" target="_blank">
+            <div
+                class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
+            >
+                <img
+                    src="/images/socials/github.svg"
+                    alt="github"
+                    class="aspect-square max-w-full"
+                    width="20"
+                />
+            </div>
+        </a>
+        <a href="https://codepen.io/liyunze-coding" target="_blank">
+            <div
+                class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
+            >
+                <img
+                    src="/images/socials/codepen.svg"
+                    alt="codepen"
+                    class="w-5 h-5 aspect-square"
+                />
+            </div>
+        </a>
+        <a href="https://youtube.com/@RythonDev" target="_blank">
+            <div
+                class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
+            >
+                <img
+                    src="/images/socials/youtube.svg"
+                    alt="youtube"
+                    class="w-5 h-5 aspect-square"
+                />
+            </div>
+        </a>
+        <a href="https://twitch.tv/RythonDev" target="_blank">
+            <div
+                class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
+            >
+                <img
+                    src="/images/socials/twitch.svg"
+                    alt="twitch"
+                    class="w-4 h-4 aspect-square"
+                />
+            </div>
+        </a>
+    </div>
+</div>
+
+<style>
+    #title {
+        background: linear-gradient(
+            90deg,
+            #03c988 0%,
+            #4ca1a3 55%,
+            #a149fa 100%
+        );
+
+        background-size: 300%;
+
+        background-clip: text;
+        -webkit-background-clip: text;
+
+        -webkit-text-fill-color: transparent;
+    }
+</style>

src/components/Education.astro

@@ -3,11 +3,11 @@ import Card from "./Card.astro";
 import Line from "./NetworkLine.astro";
 ---
 
-<div id="Experience" class="h-fit py-10">
+<div id="Experience" class="h-fit py-20">
     <h1 class="text-5xl text-center">Education</h1>
     <div class="flex flex-col items-center pt-10">
         <div class="w-[90%] md:w-[500px]">
-            <Card primaryColor="#fff">
+            <Card primaryColor="#FFF5E0" bgColor="#303030" scaleOnHover={false}>
                 <div class="card-content">
                     <div class="flex flex-col justify-left w-full mb-3">
                         <h2 class="font-bold text-xl">
@@ -24,7 +24,7 @@ import Line from "./NetworkLine.astro";
                 </div>
             </Card>
             <Line height="100px" />
-            <Card primaryColor="#fff">
+            <Card primaryColor="#FFF5E0" bgColor="#303030" scaleOnHover={false}>
                 <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>

src/components/Intro.svelte

@@ -15,33 +15,12 @@
         greeting = "evening";
     }
 
-    // Intro
-    let intro1: string = "I like to make cool stuff";
-    let intro2: string = "as a ";
-    let introState1: string = "";
-    let introState2: string = "";
-    let lineOneFinished: boolean = false;
-
-    async function animateIntro(interval: number) {
-        for (let i = 0; i < intro1.length; i++) {
-            introState1 += intro1[i];
-            await sleep(interval);
-        }
-
-        lineOneFinished = true;
-
-        for (let j = 0; j < intro2.length; j++) {
-            introState2 += intro2[j];
-            await sleep(interval);
-        }
-    }
-
     // Roles
     let roles: string[] = [
-        "developer",
-        "streamer",
-        "content creator",
-        "student",
+        "Developer",
+        "Streamer",
+        "Content creator",
+        "Student",
     ];
     let roleState: string = "";
     let role: string;
@@ -105,91 +84,104 @@
     // after window finish loading, call animateRoles()
     onMount(async () => {
         await sleep(800);
-        await animateIntro(50);
         animateRoles();
     });
 </script>
 
 <div
     id="intro"
-    class="w-full h-[105vh]
+    class="h-fit
         text-white
-        flex justify-center items-end"
+        flex flex-col"
 >
-    <div
-        id="intro-content"
-        class="
-        flex flex-row justify-between items-center
-        w-4/5 h-4/5
-        p-20 mt-24
-        border-[#404040] border-2 border-solid
-        rounded-3xl"
-    >
-        <div class="w-1/2">
-            <h1 class="text-4xl mt-10">Good {greeting}, I'm</h1>
-            <h2
-                id="name"
-                class="animate-gradient text-5xl text-center py-2 font-bold w-fit"
-            >
-                RythonDev
-            </h2>
-            <p class="text-2xl mt-5 leading-7">
-                {introState1}<span
-                    class:animate-pulse={!lineOneFinished}
-                    class:opacity-0={lineOneFinished}>|</span
-                >
-                <br />{introState2}
-                {roleState}<span
-                    class="opacity-0"
-                    class:animate-pulse={lineOneFinished}
-                    class:opacity-1={lineOneFinished}>|</span
-                >
-            </p>
-            <div class="mt-10">
-                <p class="text-lg leading-6">
-                    A computer science undergraduate student, passionate in
-                    frontend web development and content creation.
-                </p>
+    <div class="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
+                    src="/images/pfp_transparent_square.png"
+                    alt="Ryan"
+                    width="100"
+                    class="rounded-full max-w-full bg-[#404040]"
+                />
             </div>
-            <div class="mt-10"></div>
+            <div class="flex flex-col justify-center items-start ml-2">
+                <div class="text-2xl font-bold">RythonDev</div>
+                <div class="text-xl w-full">
+                    {roleState}<span class="animate-pulse">|</span>
+                </div>
+            </div>
+        </div>
+        <div class="text-2xl font-bold mt-10">
+            Good {greeting}, I'm Ryan!
+        </div>
+        <p class="mt-3">
+            I am an undergraduate student, passionate in frontend web
+            development. I built this website using Astro, Svelte, TailwindCSS
+            and Typescript!
+        </p>
+        <p class="mt-1">I hope you enjoy your stay here!</p>
+        <div class="flex flex-row justify-center items-center mt-10">
+            <a href="https://github.com/liyunze-coding" target="_blank">
+                <div
+                    class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200"
+                >
+                    <img
+                        src="/images/socials/github.svg"
+                        alt="github"
+                        class="aspect-square max-w-full"
+                        width="20"
+                    />
+                </div>
+            </a>
+            <a href="https://codepen.io/liyunze-coding" target="_blank">
+                <div
+                    class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-gray-200 transition-colors duration-150"
+                >
+                    <img
+                        src="/images/socials/codepen.svg"
+                        alt="codepen"
+                        class="w-5 h-5 aspect-square"
+                    />
+                </div>
+            </a>
+            <a href="https://youtube.com/@RythonDev" target="_blank">
+                <div
+                    class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-red-400 transition-colors duration-150"
+                >
+                    <img
+                        src="/images/socials/youtube.svg"
+                        alt="youtube"
+                        class="w-5 h-5 aspect-square"
+                    />
+                </div>
+            </a>
+            <a href="https://twitch.tv/RythonDev" target="_blank">
+                <div
+                    class="bg-gray-300 rounded-full w-7 h-7 flex justify-center items-center mr-3 hover:bg-purple-400 transition-colors duration-150"
+                >
+                    <img
+                        src="/images/socials/twitch.svg"
+                        alt="twitch"
+                        class="w-4 h-4 aspect-square"
+                    />
+                </div>
+            </a>
         </div>
     </div>
 </div>
 
 <style>
-    #intro {
-        background: rgba(30, 32, 34, 1);
-        background: linear-gradient(
-            180deg,
-            rgba(30, 32, 34, 1) 0%,
-            rgba(30, 32, 34, 1) 95%,
-            rgba(20, 22, 24, 0) 100%
+    .card-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        background-image: radial-gradient(
+            rgba(255, 255, 255, 0.1) 1px,
+            transparent 1px
         );
-    }
-
-    #intro-content {
-        background: rgb(29, 32, 35);
-        background: linear-gradient(
-            90deg,
-            rgba(29, 32, 35, 1) 0%,
-            rgba(29, 32, 35, 1) 70%,
-            rgba(50, 53, 58, 1) 100%
-        );
-    }
-
-    #name {
-        background: linear-gradient(
-            90deg,
-            #ff7dac 0%,
-            #33d2ff 55%,
-            #9845e8 100%
-        );
-
-        background-size: 300%;
-
-        background-clip: text;
-        -webkit-background-clip: text;
-
-        -webkit-text-fill-color: transparent;
+        background-position: 50% 50%;
+        background-size: 1.1rem 1.1rem;
+        border-radius: 1.25rem;
+        overflow: hidden;
     }
 </style>

src/components/NavBar.astro

@@ -0,0 +1,245 @@
+<div class="w-full">
+    <label
+        class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg"
+        aria-label="Menu"
+    >
+        <span class="top-bun"></span>
+        <input type="checkbox" aria-label="Toggle menu" />
+        <span class="bottom-bun"></span>
+    </label>
+    <aside class="sidebar flex z-20 border-l border-white">
+        <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-500"
+                href="#home">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-500"
+                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-500"
+                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-500"
+                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-500"
+                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-500"
+                href="#contact">Contact</a
+            >
+        </nav>
+    </aside>
+    <div
+        id="navbar"
+        class="fixed z-50 top-0 w-full hidden md:flex justify-center bg-[#202020] border-b border-solid border-white"
+    >
+        <div
+            id="navbar-div"
+            class="py-4 uppercase w-full flex flex-row justify-center items-center"
+        >
+            <a
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                href="#home">home</a
+            >
+            <a
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                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-500 rounded-md"
+                href="#projects">projects</a
+            >
+            <a
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                href="#skills">skills</a
+            >
+            <a
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                href="#education">education</a
+            >
+            <a
+                class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+                href="#contact">contact</a
+            >
+        </div>
+    </div>
+</div>
+
+<style>
+    :root {
+        --bar-width: 30px;
+        --bar-height: 4px;
+        --hamburger-gap: 6px;
+        --foreground: #141414;
+        --background: white;
+        --hamburger-margin: 20px;
+        --animation-timing: 200ms ease-in-out;
+        --hamburger-height: calc(
+            var(--bar-height) * 3 + var(--hamburger-gap) * 2
+        );
+    }
+
+    .hamburger-menu {
+        --x-width: calc(var(--hamburger-height) * 1.41421356237);
+
+        translate: 0 -200px;
+        flex-direction: column;
+
+        gap: var(--hamburger-gap);
+        width: max-content;
+        top: var(--hamburger-margin);
+        right: var(--hamburger-margin);
+        z-index: 30;
+        cursor: pointer;
+        background: var(--foreground);
+
+        rotate: 180deg;
+
+        transition: translate var(--animation-timing);
+    }
+
+    .hamburger-menu input:focus-visible {
+        border: 1px solid var(--background);
+        box-shadow: 0 0 0 1px var(--foreground);
+    }
+
+    .hamburger-menu input,
+    .hamburger-menu span {
+        content: "";
+        width: var(--bar-width);
+        height: var(--bar-height);
+        background-color: white;
+        border-radius: 9999px;
+        transform-origin: left center;
+        transition:
+            opacity var(--animation-timing),
+            width var(--animation-timing),
+            rotate var(--animation-timing),
+            translate var(--animation-timing),
+            background-color var(--animation-timing);
+    }
+
+    .hamburger-menu input {
+        appearance: none;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        pointer-events: none;
+    }
+
+    .hamburger-menu .top-bun.active {
+        rotate: 45deg;
+        width: var(--x-width);
+        translate: 0 calc(var(--bar-height) / -2);
+    }
+
+    .hamburger-menu .bottom-bun.active {
+        rotate: -45deg;
+        width: var(--x-width);
+        translate: 0 calc(var(--bar-height) / 2);
+    }
+
+    .hamburger-menu input:checked {
+        opacity: 0;
+        width: 0;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: 0;
+        right: 0;
+        transition: translate var(--animation-timing);
+        translate: 100%;
+        padding: 0.5rem 1rem;
+        padding-top: calc(
+            var(--hamburger-height) + var(--hamburger-margin) + 1rem
+        );
+        background-color: var(--foreground);
+        color: var(--background);
+        max-width: 10rem;
+        min-height: 100vh;
+    }
+</style>
+
+<script defer is:inline>
+    const sidebar = document.querySelectorAll(".sidebar-url");
+    const hamburger = document.querySelector(".hamburger-menu");
+    const checkbox = document.querySelector("input");
+
+    const topBun = document.querySelector(".top-bun");
+    const bottomBun = document.querySelector(".bottom-bun");
+
+    const openSideBar = () => {
+        checkbox.checked = true;
+        document.querySelector(".sidebar").style.translate = "0";
+        topBun.classList.add("active");
+        bottomBun.classList.add("active");
+    };
+
+    const closeSideBar = () => {
+        checkbox.checked = false;
+        document.querySelector(".sidebar").style.translate = "100%";
+        topBun.classList.remove("active");
+        bottomBun.classList.remove("active");
+    };
+
+    // for each sidebar url, if clicked on, uncheck the checkbox
+    sidebar.forEach((url) => {
+        url.addEventListener("click", () => {
+            closeSideBar();
+        });
+    });
+
+    if (window.innerWidth < 768) {
+        hamburger.style.translate = "0 0";
+    }
+
+    // window.addEventListener("scroll", () => {
+    // 	if (window.scrollY > 50 || window.innerWidth < 768) {
+    // 		hamburger.style.translate = "0 0";
+    // 	} else {
+    // 		hamburger.style.translate = "0 -200px";
+    // 		closeSideBar();
+    // 	}
+    // });
+
+    // if clicked outside of the hamburger menu, close the sidebar
+    window.addEventListener("click", (e) => {
+        if (
+            e.target !== hamburger &&
+            e.target !== topBun &&
+            e.target !== bottomBun &&
+            e.target !== checkbox &&
+            e.target !== document.querySelector(".sidebar") &&
+            e.target !== document.querySelector(".sidebar nav")
+        ) {
+            closeSideBar();
+        }
+    });
+
+    // if window is resized, check if it's less than 768px
+    window.addEventListener("resize", () => {
+        if (window.innerWidth < 768) {
+            hamburger.style.translate = "0 0";
+        } else {
+            hamburger.style.translate = "0 -200px";
+            closeSideBar();
+        }
+    });
+
+    // if checked, translate the sidebar
+    checkbox.addEventListener("change", () => {
+        if (checkbox.checked) {
+            openSideBar();
+        } else {
+            closeSideBar();
+        }
+    });
+</script>

src/components/NetworkLine.astro

@@ -13,10 +13,10 @@ const { height } = Astro.props;
 <style define:vars={{ height }}>
     @keyframes gradientAnimation {
         0% {
-            background-position: 0 -100%;
+            background-position: 0 50%;
         }
         100% {
-            background-position: 0 50%;
+            background-position: 0 -100%;
         }
     }
     #line-container {

src/components/Projects.svelte

@@ -229,17 +229,17 @@
 
     <div class="mt-10 w-full">
         <div
-            class="flex flex-col md:flex-row justify-between h-fit w-full px-20"
+            class="flex flex-col lg:flex-row justify-between h-fit w-full px-10 lg:px-20"
         >
             <div
-                class="image-container w-full md:w-1/2 aspect-video [perspective:200px] relative md:ml-20"
+                class="image-container w-full lg:w-1/2 mb-3 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
             >
                 <img
                     src="/images/projects/coworking-guide.webp"
                     alt="coworking guide"
                     class="absolute max-w-full
                     top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-50%)_translateY(-50%)] opacity-40
+                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
                     border-2 border-solid border-white rounded-xl"
                     width="600"
                 />
@@ -249,7 +249,7 @@
                     width="600"
                     class="absolute max-w-full
                     top-1/2 left-1/2
-                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-48%)_translateY(-52%)] opacity-1
+                    [transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
                     border-2 border-solid border-white rounded-xl"
                 />
                 <div
@@ -270,7 +270,7 @@
                 </div>
             </div>
             <div
-                class="w-full md:w-1/2 h-[340px] flex flex-col justify-center md:pr-20"
+                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:pr-20"
             >
                 <h2 class="text-3xl font-bold mb-5">Coworking Guide</h2>
                 <p class="text-xl">
@@ -281,25 +281,27 @@
             </div>
         </div>
         <div
-            class="flex flex-col-reverse md:flex-row justify-between h-fit w-full px-16"
+            class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
         >
             <div
-                class="w-full md:w-1/2 h-[340px] flex flex-col justify-center md:pl-20"
+                class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10"
             >
-                <h2 class="text-3xl font-bold mb-5">Chat-Task-Tic Widget</h2>
-                <p class="text-xl">
+                <h2 class="text-3xl font-bold mb-5 lg:text-right">
+                    Chat-Task-Tic Widget
+                </h2>
+                <p class="text-xl lg:text-right">
                     A widget for Coworking and Study Twitch streamers, allows
                     the streamer and the chatters to add their tasks to the
                     widget, to be displayed on stream!
                 </p>
             </div>
             <div
-                class="image-container w-full md:w-1/2 aspect-video [perspective:200px] relative md:ml-20"
+                class="image-container w-full lg:w-1/2 aspect-video [perspective:200px] relative"
             >
                 <!-- task bot -->
                 <div
                     class="task-widget absolute flex flex-col opacity-30
-                            w-full h-[99%]
+                            w-[90%] h-[99%]
                             top-1/2 left-1/2 [transform:translateX(-59%)_translateY(-49%)_translateZ(-50px)_rotateY(-3deg)]"
                 >
                     <div
@@ -344,7 +346,7 @@
                 </div>
                 <div
                     class="task-widget absolute flex flex-col
-                            w-full h-[99%]
+                            w-[90%] h-[99%]
                             top-1/2 left-1/2 [transform:translateX(-60%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)]"
                 >
                     <div
@@ -389,14 +391,14 @@
                 </div>
 
                 <div
-                    class="visit-div absolute w-full h-full bg-[rgba(0,0,0,0.5)] opacity-0
+                    class="visit-div absolute w-[90%] h-full bg-[rgba(0,0,0,0.5)] opacity-0
                     rounded-md
                     [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                     border-2 border-solid border-white
                     overflow-hidden"
                 >
                     <a
-                        href="https://github.com/liyunze-coding/multi-task-widget-infinity"
+                        href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"
                         target="_blank"
                         class="absolute [transform:translateX(-50%)_translateY(-50%)] top-1/2 left-1/2
                         px-5 py-3 bg-blue-500 rounded-xl opacity-1

src/components/Skills.astro

@@ -1,25 +1,144 @@
 ---
 import Card from "../components/Card.astro";
+import Line from "../components/NetworkLine.astro";
 ---
 
-<div class="w-full h-[200vh]">
+<div class="w-full h-fit pt-20">
     <h1 class="text-center text-5xl">Skills</h1>
     <div class="flex flex-col items-center">
-        <div class="w-1/2 pt-10">
-            <Card primaryColor="#fff">
+        <div class="w-[90%] md:w-[600px] pt-10">
+            <Card primaryColor="#9EDDFF" bgColor="#282828" scaleOnHover={false}>
                 <div class="card-content">
-                    <div class="flex flex-col justify-left w-full mb-3">
-                        <h2 class="font-bold text-xl">
-                            Diploma in Computer Science
-                        </h2><h3>Jan 2022 - Present</h3>
+                    <div class="flex flex-col justify-left w-full">
+                        <h2 class="font-bold text-2xl">Web Development</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left lg:text-justify">
+                        I started my web development journey by building
+                        websites and widgets using vanilla HTML, CSS, Javascript
+                        and Express. As I learnt more about the fundamentals of
+                        web development, I delved into frameworks such as
+                        Svelte, React and Astro.
+                    </p>
+                    <div class="w-full flex flex-row flex-wrap justify-center">
+                        <div
+                            class="w-fit bg-orange-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            HTML
+                        </div>
+                        <div
+                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            CSS
+                        </div>
+                        <div
+                            class="w-fit bg-yellow-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Javascript
+                        </div>
+                        <div
+                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            TypeScript
+                        </div>
+                        <div
+                            class="w-fit bg-yellow-500 text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Express
+                        </div>
+                        <div
+                            class="w-fit bg-orange-600 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Svelte
+                        </div>
+                        <div
+                            class="w-fit bg-cyan-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            React
+                        </div>
+                        <div
+                            class="w-fit bg-white text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Astro
+                        </div>
+                        <div
+                            class="w-fit bg-purple-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Qwik
+                        </div>
+                        <div
+                            class="w-fit bg-cyan-400 text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            TailwindCSS
+                        </div>
+                        <div
+                            class="w-fit bg-purple-400 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Vite
+                        </div>
+                    </div>
+                </div>
+            </Card>
+            <Line height="50px" />
+            <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={false}>
+                <div class="card-content">
+                    <div class="flex flex-col justify-left w-full">
+                        <h2 class="font-bold text-2xl">Data Science</h2>
+                    </div>
+                    <hr class="w-full" />
+                    <p class="text-left lg:text-justify">
+                        My first exposure to data science was through learning
+                        Computer Vision. I learn how to use OpenCV in Python to
+                        open a webcam and detect faces. Later on, I took a
+                        Diploma course that is focused in data science, where I
+                        learnt how to do the fundamentals of data science such
+                        as extracting, transforming and loading data, as well as
+                        data visualisation.
+                    </p>
+                    <div class="w-full flex flex-row flex-wrap justify-center">
+                        <div
+                            class="w-fit bg-yellow-400 bg-[linear-gradient(_125deg,_#4b8bbe_0%,_#4b8bbe_50%,_#ffd43b_51%,_#f0c808_100%_)]
+                            text-black rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Python
+                        </div>
+                        <div
+                            class="w-fit bg-cyan-400 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            R
+                        </div>
+                        <div
+                            class="w-fit bg-green-400 bg-[linear-gradient(_90deg,_#CC0000_0%,_#CC0000_32%,_#00BB00_33%,_#00BB00_65%,_#0000DD_66%,_#0000DD_100%_)]
+                            text-white rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            OpenCV
+                        </div>
+                        <div
+                            class="w-fit bg-blue-400 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            SAS
+                        </div>
+                        <div
+                            class="w-fit bg-purple-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Machine Learning
+                        </div>
+                        <div
+                            class="w-fit bg-blue-500 rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            BeautifulSoup4
+                        </div>
+                        <div
+                            class="w-fit bg-green-500 text-white rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Selenium
+                        </div>
+                        <div
+                            class="w-fit bg-blue-500 text-white rounded-full px-3 py-1 mr-1 my-1"
+                        >
+                            Pandas
+                        </div>
                     </div>
-                    <hr class="w-full mb-3" />
-                    <h3 class="mb-1 font-bold text-lg">Achievements</h3>
-                    <ul class="list-disc list-inside">
-                        <li>3-time Dean's List recipient</li>
-                        <li>President of Computer Programming Club</li>
-                        <li>Vice President of Diploma Union</li>
-                    </ul>
                 </div>
             </Card>
         </div>
@@ -37,7 +156,10 @@ import Card from "../components/Card.astro";
         );
         background-position: 50% 50%;
         background-size: 1.1rem 1.1rem;
-        padding: 2rem 2rem;
+        padding-top: 2rem;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-bottom: 0.5rem;
         border-radius: 1.25rem;
         overflow: hidden;
     }

src/components/WhatIDo.astro

@@ -6,9 +6,20 @@ import Card from "../components/Card.astro";
     <div class="h-[1px] w-1/3 bg-[#404040] mb-5"></div>
     <h1 class="text-center text-5xl mb-10">What I Do</h1>
     <div
-        class="grid grid-cols-1 xl:grid-cols-3 place-content-center justify-center w-4/5 gap-12"
+        class="grid grid-cols-1 w-[400px] lg:w-[90%] lg:grid-cols-3 place-content-center justify-center xl:w-4/5 gap-5 xl:gap-12"
     >
-        <Card primaryColor="#be68ed">
+        <Card primaryColor="#B0D9B1" bgColor="#282828" scaleOnHover={true}>
+            <div class="card-content">
+                <h2 class="font-bold text-xl text-center">Web Development</h2>
+                <hr class="w-full" />
+                <p class="text-center">
+                    I like to code things for the web, particularly on the
+                    frontend. I enjoy bringing ideas to life in the browser.
+                </p>
+            </div>
+        </Card>
+
+        <Card primaryColor="#40F8FF" bgColor="#282828" scaleOnHover={true}>
             <div class="card-content">
                 <h2 class="font-bold text-xl text-center">Data Science</h2>
                 <hr class="w-full" />
@@ -19,24 +30,14 @@ import Card from "../components/Card.astro";
             </div>
         </Card>
 
-        <Card primaryColor="#be68ed">
-            <div class="card-content">
-                <h2 class="font-bold text-xl text-center">Web Development</h2>
-                <hr class="w-full" />
-                <p class="text-center">
-                    I like to code things for the web, whether it's to inform or
-                    to entertain.
-                </p>
-            </div>
-        </Card>
-
-        <Card primaryColor="#be68ed">
+        <Card primaryColor="#9D76C1" bgColor="#282828" scaleOnHover={true}>
             <div class="card-content">
                 <h2 class="font-bold text-xl text-center">Content Creation</h2>
                 <hr class="w-full" />
                 <p class="text-center">
-                    I am experienced in streaming on Twitch and marketing
-                    myself, but I aim to improve my video editing skills.
+                    I am experienced in streaming on Twitch, experienced in
+                    customizing settings in OBS, and aim to improve my video
+                    editing skills.
                 </p>
             </div>
         </Card>
@@ -57,5 +58,6 @@ import Card from "../components/Card.astro";
         padding: 2rem 2rem;
         border-radius: 1.25rem;
         overflow: hidden;
+        min-width: 210px;
     }
 </style>

src/layouts/Layout.astro

@@ -108,6 +108,10 @@ const { title } = Astro.props;
         font-style: normal;
     }
 
+    html {
+        scroll-behavior: smooth;
+    }
+
     * {
         margin: 0;
         padding: 0;

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import NavBar from "../components/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/NetworkLine.astro";
 import WhatIDo from "../components/WhatIDo.astro";
@@ -6,13 +7,34 @@ import Intro from "../components/Intro.svelte";
 import Projects from "../components/Projects.svelte";
 import Education from "../components/Education.astro";
 import Skills from "../components/Skills.astro";
+import Contact from "../components/Contact.astro";
+import Card from "../components/Card.astro";
 ---
 
 <Layout title="Ryan's Portfolio">
-    <Intro client:load />
-    <NetworkLine height="100px" />
-    <WhatIDo />
-    <Projects client:idle />
-    <Education />
-    <Skills />
+    <NavBar />
+    <div id="home" class="pt-20 flex justify-center items-center">
+        <div class="w-[90%] lg:w-1/2">
+            <Card bgColor="#252525" primaryColor="#BEADFA" scaleOnHover={false}>
+                <Intro client:load />
+            </Card>
+        </div>
+    </div>
+
+    <div id="what-i-do">
+        <NetworkLine height="100px" />
+        <WhatIDo />
+    </div>
+    <div id="projects">
+        <Projects client:idle />
+    </div>
+    <div id="skills">
+        <Skills />
+    </div>
+    <div id="education">
+        <Education />
+    </div>
+    <div id="contact">
+        <Contact />
+    </div>
 </Layout>