Merge pull request #2 from xirf/dev

Feat: Responsive and Animation

Author: xirf

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/svelte": "^3.1.0",
     "@astrojs/ts-plugin": "^1.0.10",
+    "animejs": "^3.2.1",
     "astro": "^2.8.0",
     "svelte": "^4.0.5"
   },

pnpm-lock.yaml

@@ -1,6 +1,6 @@
-
-<nav>
-    <a href="#">Home</a>
-    <a href="#">Posts</a>
-    <a href="#">Contact</a>
-</nav>
+<header class="fixed top-0 left-0 w-full text-white z-999 p-4 flex items-center justify-between">
+	<span class="text-xl font-black tracking-widest">
+		<span class="i-charm-gamepad bg-white"></span> ANDKA
+	</span>
+    <a href="mailto:hy@andka.me" class="px-4 py-1 transition-all duration-500 ease-in hover:(text-black bg-green border-transparent) border-2 border-white rounded-xl">Contact</a>
+</header>

public/anime.js

@@ -2,41 +2,47 @@
 ---
 
 <section id="about" class="relative flex p-14 w-full h-screen gap-10 text-gray-300 items-center justify-center max-w-screen-2xl m-auto">
-	<div class="grid grid-cols-2">
+	<div class="grid grid-cols-1 gap-y-8 xl:grid-cols-2">
 		<div class="flex flex-col gap-y-4 cursor-default">
-			<h1 class="leadin text-5xl tracking-wide leading-tight font-black">
+			<h1 class="leadin text-4xl lg:text-5xl tracking-wide leading-tight font-black">
 				<span class="hover:(text-green) transition-all duration-500 ease-in-out">Andika</span> is here!
 			</h1>
-			<p class="max-w-md leading-8 text-gray">
-				<span class="hover:text-green transition-all duration-500 ease-in-out">Web Developer</span> / <span
-					class="hover:text-yellow transition-all duration-500 ease-in-out">JS Enthusiast</span
-				> / <span class="hover:text-pink transition-all duration-500 ease-in-out">Weeb</span>
+			<p class="max-w-md leading-8 text-gray relative">
+				<span class="x-subs inline-block">Web Developer</span>
+				<span class="x-subs inline-block">/</span>
+				<span class="x-subs inline-block">JS Enthusiast</span>
+				<span class="x-subs inline-block">/</span>
+				<span class="x-subs inline-block">Weeb</span>
 			</p>
 
-			<div class="absolute left-2rem top-1/5 flex rotate-98deg">
+			<div class="absolute left-2rem top-2em md:top-1/5 flex rotate-98deg -z-50">
 				<div class="border-2rem border-transparent border-r-green-400"></div>
 				<div class="border-2rem border-transparent border-l-green-500"></div>
 			</div>
 
-			<div class="absolute right-2rem bottom-1/5 flex rotate-14deg">
+			<div class="absolute right-2rem bottom-1/5 flex rotate-14deg -z-50">
 				<div class="border-1rem border-transparent border-r-green-400"></div>
 				<div class="border-1rem border-transparent border-l-green-500"></div>
 			</div>
 
-			<div class="absolute w-full -bottom-3rem right-3/5 opacity-25 h-200px bg-dotted from-gray-300"></div>
+			<div class="absolute w-full -bottom-3rem right-3/5 opacity-25 h-200px bg-dotted from-gray-300 -z-50"></div>
 		</div>
-		<div class="flex flex-col gap-4 text-gray-300">
-			<p>I'm Andika Nur Pratama, a JavaScript enthusiast from East Java, Indonesia.</p>
-			<p>
-				I began my journey from 2019 in third class of my vacational school. Now i majoring in Computer Sience at <a
+		<div class="flex flex-col gap-4 text-gray-300 relative">
+			<p class="x-about inline-block">
+				Hello, I'm Andika Nur Pratama from East Java, <span
+					class="hover:(bg-gradient-to-t from-white-50% via-white via-50% to-red-500 to-50% text-black) will-move">Indonesia</span
+				>.
+			</p>
+			<p class="x-about inline-block">
+				My journey began in 2019 during vacational school, and now i majoring in Computer Sience at <a
 					href="https://umpo.ac.id/"
 					class="hover:text-green underline transition-all duration-500 ease-in-out">Muhammadiyah University of Ponorogo</a
-				> and i had a lot of experience in there.
+				>.
+			</p>
+			<p class="x-about inline-block">
+				JavaScript is my primary language, but I'm also exploring PHP, Python, Rust, and C++. Beyond web development, I love tackling new
+				challenges and expanding my knowledge.
 			</p>
-			<>
-				I chose JavaScript as my main programming language because it's easy to learn and i can use it everywhere. but i also learn other
-				programming language like PHP, Python, Rust, and C++.
-			</>
 		</div>
 	</div>
 </section>

src/components/BaseNavbar.astro

@@ -2,24 +2,21 @@
 ---
 
 <section id="hero" class="relative flex p-14 w-full h-screen gap-10 bg-primary text-gray-300 items-center max-w-screen-2xl m-auto">
-	<div class="max-w-xl flex flex-col gap-y-8" data-animation="up" data-delay="0">
-		<h1 class="leadin text-6xl tracking-wide leading-tight font-black">Self Taught Web Developer</h1>
-		<p class="max-w-md leading-8">
-			Building the internet, resolving problems, developing rich user experiences and seamless experiences, and learning new things is what I
-			do.
+	<div class="max-w-xl flex flex-col gap-y-8">
+		<h1 class="title-target relative text-4xl md:text-5xl xl:text-6xl tracking-wide leading-tight font-black">Self Taught Web Developer</h1>
+		<p class="max-w-md leading-8 x-hero2">
+			The main parts of what I do are building the internet, solving complicated problems, and always growing my knowledge.
 		</p>
-		<a href="#about" class="group">
-			<button
-				class="bg-green-400 text-primary font-bold py-2 px-4 rounded-xl transition-all duration-500 ease-in-out hover:shadow-d shadow-green">
-				About Me <span class="i-charm:chevron-right from-green group-hover:rotate-90deg transition-all duration-500 ease-in-out"></span>
-			</button>
-		</a>
-
-		<div data-move="down up" style="--duration: 400ms" data-delay="300" class="will-move absolute right-1/4 bottom-4rem flex rotate-14deg">
-			<div class="border-4rem border-transparent border-r-green-400"></div>
-			<div class="border-4rem border-transparent border-l-green-500"></div>
-		</div>
-
-		<div class="absolute w-full top-1/3 -right-3/5 opacity-25 h-200px bg-dotted from-gray-300"></div>
+		<button
+			data-target="1"
+			class="w-fit bg-green-400 text-primary font-bold py-2 px-4 rounded-xl transition-all duration-500 ease-in-out hover:shadow-d shadow-green">
+			About Me <span class="i-charm:chevron-right from-green group-hover:rotate-90deg transition-all duration-500 ease-in-out"></span>
+		</button>
 	</div>
+	<div class="absolute right-1/10 xl:right-1/4 bottom-1/12 xl:bottom-8rem flex rotate-14deg">
+		<div class="border-2em xl:border-4rem border-transparent border-r-green-400"></div>
+		<div class="border-2em xl:border-4rem border-transparent border-l-green-500"></div>
+	</div>
+
+	<div class="absolute w-full top-1/6 xl:top-1/3 -left-3/5 md:left-unset md:-right-3/5 opacity-25 h-200px bg-dotted from-gray-300"></div>
 </section>

src/features/home/components/About.astro

@@ -9,42 +9,42 @@ const techStack = [
 	{ name: "Uno CSS", className: "brightness-200% invert i-logo-unocss" },
 	{ name: "Tailwind CSS", className: "brightness-200% i-logo-tailwindcss-icon" },
 	{ name: "Fastify", className: "brightness-200% invert i-logo-fastify-icon" },
-	{ name: "Postgresql", className: "i-logo-postgresql" },
+	{ name: "Postgresql", className: "brightness-75% i-logo-postgresql" },
 	{ name: "php", className: "i-logo-php" },
 ];
 ---
 
 <section
 	id="skills"
-	class="relative flex items-center justify-center p-14 w-full h-screen gap-10 bg-primary text-gray-300 items-center max-w-screen-2xl m-auto">
-	<div class="flex flex-col gap-y-8 text-center justify-center items-center">
-		<h1 class="leadin text-6xl tracking-wide leading-tight font-black">Things I do</h1>
-		<div class="flex flex-col gap-3">
-			<p class="leading-8 max-w-4xl">
-				While my primary playground is web development, my curiosity knows no bounds. <span class="text-red">Beyond coding</span>, I thrive on
-				embracing fresh horizons and tackling exciting challenges. Learning is my compass, and I'm forever charting new territories.
+	class="relative flex items-center justify-center p-14 w-full h-screen gap-10 text-gray-300 items-center max-w-screen-2xl m-auto">
+	<div class="flex relative flex-col gap-y-8 text-center justify-center items-center">
+		<h1 class="x-title inline-block text-4xl md:text-6xl tracking-wide leading-tight font-black">Things I do</h1>
+		<div class=" flex flex-col gap-3">
+			<p class="leading-8 max-w-4xl x-title inline-block">
+				While my primary playground is web development, my curiosity knows no bounds.  Aside from <span class="text-red">coding</span>, I enjoy broadening my experiences and taking on new challenges. Learning is my compass, and I'm always exploring new territory.
 			</p>
-			<p class="leading-8 max-w-4xl">
+			<p class="leading-8 max-w-4xl x-title inline-block">
 				Here are some of the things I do, and some of the things I'm <span class="text-green">learning</span>.
 			</p>
 		</div>
 
-		<div class="text-7xl my-8 flex max-w-3xl items-center justify-center grayscale brightness-200% gap-10 gap-y-12 flex-wrap color-inherit">
+		<div class="text-4xl md:text-5xl xl:text-7xl relative my-8 flex max-w-3xl items-center justify-center grayscale brightness-200% gap-4 md:gap-10 gap-y-8 lg:gap-y-12 flex-wrap color-inherit">
 			{
 				techStack.map((tech, index) => (
-					<div class="flex flex-col gap-4 opacity-75 hover:opacity-100 duration-300 transition-all">
+					<div class="x-skill inline-block flex flex-col gap-2 lg:gap-4 opacity-75 text-center items-center justify-center">
 						<div class={tech.className} />
 						<span class="text-xs">{tech.name}</span>
 					</div>
 				))
 			}
 		</div>
 
-		<div data-delay="200" data-move="down up" style="--duration:500ms" class="absolute will-move right-0 top-2/6 flex rotate-14deg">
+		<div 
+		class=" absolute right-0 top-2/6 flex rotate-14deg -z-50">
 			<div class="border-1.5rem border-transparent border-r-green-400"></div>
 			<div class="border-1.5rem border-transparent border-l-green-500"></div>
 		</div>
 
-		<div class="absolute w-300px top-0 left-0 opacity-15 h-screen bg-dotted from-gray-300"></div>
+		<div class="absolute w-300px top-0 -left-200px lg:left-0 opacity-15 h-screen bg-dotted from-gray-300 -z-50"></div>
 	</div>
 </section>

src/features/home/components/Hero.astro

@@ -5,24 +5,32 @@ import About from "./components/About.astro";
 ---
 
 <div class="relative w-full h-screen overflow-hidden">
-	<div id="fullpage" class="w-full relative transition-all duration-1000 ease-in-out">
+	<div id="fullpage" class="w-full relative ease-in-out-quart">
 		<Hero />
 		<About />
 		<Skills />
 	</div>
 </div>
 
+<script src="/anime.js" is:inline>
+import anime from "public/anime";
+</script>
 <script is:inline>
 const fullpage = document.getElementById("fullpage");
 const sections = fullpage.querySelectorAll("section").length;
-let moveAbleElement = document.querySelectorAll("section");
+
+const commonAnimationConfig = {
+    translateY: [ 50, 0 ],
+    opacity: [ 0, 1 ],
+    easing: "easeOutCirc",
+    duration: 1000,
+    loop: false,
+};
 
 let isAnimating = false;
 let activeSection = 0;
 
 function onWheel(e) {
-    e.preventDefault();
-
     if (isAnimating || (activeSection <= 0 && e.deltaY < 0) || (activeSection >= sections - 1 && e.deltaY > 0)) return;
 
     if (e.deltaY > 0) {
@@ -35,20 +43,19 @@ function onWheel(e) {
 }
 
 function onTouchStart(e) {
-    e.preventDefault();
     const touch = e.touches[ 0 ];
     touchStartY = touch.pageY;
 
     document.addEventListener("touchmove", onTouchMove);
 }
 
 function onTouchMove(e) {
-    e.preventDefault();
     const touch = e.touches[ 0 ];
     const touchEndY = touch.pageY;
 
     if (isAnimating || (activeSection <= 0 && touchEndY > touchStartY) || (activeSection >= sections - 1 && touchEndY < touchStartY)) return;
 
+    sectionBefore = activeSection;
     if (touchEndY > touchStartY) {
         activeSection -= 1;
     } else {
@@ -60,28 +67,47 @@ function onTouchMove(e) {
 
 function scrollToSection(section) {
     if (isAnimating) return;
-
+    activeSection = section;
     isAnimating = true;
 
     fullpage.style.transform = `translateY(-${section * 100}vh)`;
 
-    moveAbleElement.forEach((el, index) => {
-        if (index === section) {
-            el.classList.add("visible");
-        } else {
-            el.classList.remove("visible");
-        }
-
-        if (index < section) {
-            el.classList.add("up");
-            el.classList.remove("down");
-        } else if (index > section) {
-            el.classList.add("down");
-            el.classList.remove("up");
-        } else {
-            el.classList.remove("up");
-            el.classList.remove("down");
-        }
+    const animeConfig = [];
+
+    if (activeSection === 0) {
+        animeConfig.push({
+            targets: ".x-hero",
+            delay: anime.stagger(7, { start: 1000 }),
+            ...commonAnimationConfig,
+        });
+    } else if (activeSection === 1) {
+        animeConfig.push({
+            targets: ".x-subs",
+            delay: anime.stagger(50, { start: 1000 }),
+            ...commonAnimationConfig,
+        });
+
+        animeConfig.push({
+            targets: ".x-about",
+            delay: anime.stagger(150, { start: 500 }),
+            ...commonAnimationConfig,
+        });
+    } else if (activeSection === 2) {
+        animeConfig.push({
+            targets: ".x-skill",
+            delay: anime.stagger(70, { start: 1000 }),
+            ...commonAnimationConfig,
+        });
+
+        animeConfig.push({
+            targets: ".x-title",
+            delay: anime.stagger(200, { start: 500 }),
+            ...commonAnimationConfig,
+        });
+    }
+
+    animeConfig.forEach((config) => {
+        anime(config);
     });
 
     setTimeout(() => {
@@ -92,9 +118,14 @@ function scrollToSection(section) {
 document.addEventListener("wheel", onWheel);
 document.addEventListener("touchstart", onTouchStart);
 document.addEventListener("touchmove", onTouchMove);
+document.querySelectorAll("button").forEach((button) => {
+    button.addEventListener("click", () => {
+        scrollToSection(parseInt(button.dataset.target));
+    });
+});
 </script>
 <style is:global>
-	.will-move {
-		transition: all var(--duration, 1s) ease-in;
+	.ease-in-out-quart {
+		transition: all 1200ms cubic-bezier(0.88, 0, 0.265, 1) 0s;
 	}
 </style>

src/features/home/components/Skills.astro

@@ -1,4 +1,5 @@
 ---
+
 import BaseHead from "@/components/BaseHead.astro";
 import Footer from "@/components/Footer.astro";
 import BaseNavbar from "@/components/BaseNavbar.astro";
@@ -14,12 +15,10 @@ const { title } = Astro.props;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="/style/fullpage.min.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
     <BaseHead title={title} />
   </head>
   <body class="bg-primary h-screen font-sans overflow-x-hidden">
-    <!-- <BaseNavbar /> -->
+    <BaseNavbar />
     <slot />
     <!-- <Footer /> -->
   </body>

src/features/home/index.astro

@@ -1,7 +1,7 @@
 {
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
       "@/*": [
         "src/*"