Best Commit Ever

Author: vspcoderz

src/app/globals.css

@@ -1,6 +1,20 @@
 @import "tailwindcss";
 
-
+@theme {
+    --animate-dash-scroll: dash-scroll 1.5s linear infinite;
+  
+    @keyframes dash-scroll {
+      0% { background-position: 0 0; }
+      100% { background-position: 16px 0; }
+    }
+  }
+  
+  .infinite-dashed-border {
+    background-image: repeating-linear-gradient(to right, white 0, white 4px, transparent 4px, transparent 8px);
+    height: 2px; /* border thickness */
+    animation: var(--animate-dash-scroll);
+  }
+  
 
 .font-space-grotesk {
     font-family: var(--font-space-grotesk) , 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

src/app/page.js

@@ -2,11 +2,14 @@
 
 import React, { useState } from "react";
 import HeroSection from "@/components/HeroSection";
+import Navbar from "@/components/Navbar";
 
 const Home = () => {
   return (
     <>
+      <Navbar />
       <HeroSection />
+      
     </>
   );
 };

src/components/Anime.jsx src/components/AboutMe.jsxsrc/components/Anime.jsx renamed to src/components/AboutMe.jsx

@@ -6,22 +6,22 @@ import Link from "next/link";
 const HeroSection = () => {
   return (
     <>
-      <section className="w-full h-screen bg-neutral-900">
-        <section className="min-h-screen w-full flex items-center bg-neutral-900">
-          <main className="w-full flex flex-col items-center justify-center pt-24 pb-16 border-y-2 border-dashed border-gray-600 ">
-            {/* Accent Graphic */}
+      <section className="w-full h-screen flex flex-col items-center justify-center bg-neutral-900 ">
+        <main className="min-h-max w-full flex flex-col items-center bg-neutral-900 ">
+          <div className="w-full infinite-dashed-border" />
+
+          <main className="w-full flex flex-col items-center justify-center pt-24 pb-16">
             <span className="rounded-2xl bg-white/10 shadow-lg p-3 flex items-center justify-center mb-8">
               <Image
                 src="/logo.png"
                 alt="Hero Logo"
                 width={72}
                 height={72}
                 className="h-14 w-14 object-cover rounded-2xl"
-                priority
               />
             </span>
-            {/* Bold Headline */}
-            <div className="flex flex-col items-center gap-2 ">
+
+            <div className="flex flex-col items-center gap-2">
               <h1 className="text-5xl flex items-center justify-center sm:text-7xl font-space-mono font-extrabold uppercase tracking-tight text-white text-center">
                 I am
                 <div className="flex items-center justify-center ml-8">
@@ -37,7 +37,7 @@ const HeroSection = () => {
                 </div>
               </h1>
             </div>
-            {/* Subtitle / Role */}
+
             <div className="mt-6 mb-2">
               <WordRotate
                 className="text-lg sm:text-2xl text-gray-400 tracking-wide text-center"
@@ -50,7 +50,7 @@ const HeroSection = () => {
                 ]}
               />
             </div>
-            {/* Buttons */}
+
             <div className="flex gap-5 mt-10 flex-wrap justify-center">
               <button className="px-8 py-3 bg-white text-black text-lg rounded-full font-semibold shadow-lg hover:bg-gray-300/90 transition">
                 <Link href="/project">My Work</Link>
@@ -60,11 +60,12 @@ const HeroSection = () => {
               </button>
             </div>
           </main>
-          {/* Modern Bottom Divider */}
-          <div className="w-full flex justify-center mt-16 absolute bottom-12 left-0">
-            <div className="h-2 w-32 rounded-full bg-white/10 shadow-md" />
-          </div>
-        </section>
+
+          <div className=" w-full infinite-dashed-border" />
+        </main>
+        <div className="w-full flex justify-center mt-16">
+          <div className="h-2 w-32 rounded-full bg-white/10 shadow-md" />
+        </div>
       </section>
     </>
   );

src/components/HeroSection.jsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import React from "react";
+import ThaYT from "@/components/ThaYT";
+
+const Navbar = () => {
+  return (
+    <nav className="fixed w-full top-4 flex justify-center items-center ">
+      <main className="bg-zinc-950/80 rounded-full shadow-lg py-3 justify-around w-6xl flex flex-row gap-5 items-center ">
+        <div>
+          <span className="rounded-2xl  px-4 font-space-mono font-bold text-lg flex items-center justify-center">
+            <Image
+              src="/logo.png"
+              alt="Hero Logo"
+              width={72}
+              height={72}
+              className="h-14 w-14 object-cover rounded-2xl mr-2"
+            />
+            Vspcoderz
+          </span>
+        </div>
+        <div className="flex flex-row gap-3 justify-around">
+            <ThaYT name="Projects" href="/projects" arrow={false} className="mr-2"    />
+            <ThaYT name="Skill" href="/skills" arrow={false}  className="mr-2"    />
+            <ThaYT name="About Me" href="/about" arrow={false}  className="mr-2"    />
+            <ThaYT name="Contact Me" href="/contact" arrow={true} className="mr-2"    />
+        </div>
+      </main>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/Navbar.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Link from "next/link";
+
+const ThaYT = (props) => {
+  return (
+    <Link href={props.href}>
+      <button
+        type="button"
+        className="relative inline-flex items-center text-gray-500 font-normal text-lg font-poppins cursor-pointer border-0 bg-transparent transition-colors duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)] focus:outline-none hover:text-white focus:text-white group"
+      >
+        <span className="relative font-space-grotesk uppercase text-sm font-bold">
+          {props.name}
+          <span className="absolute bottom-[-7px] left-0 h-[1px] bg-white w-0 group-hover:w-full group-focus:w-full transition-all duration-500 ease-[cubic-bezier(0.25,0.8,0.25,1)]"></span>
+        </span>
+
+        {props.arrow && (
+          <span className="ml-2.5">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 448 512"
+              className="w-[0.9em] h-[0.8em] fill-current text-gray-500 transition-transform duration-500 ease-out -rotate-[45deg] group-hover:rotate-0 group-hover:text-white group-focus:rotate-0 group-focus:text-white"
+            >
+              <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path>
+            </svg>
+          </span>
+        )}
+      </button>
+    </Link>
+  );
+};
+
+export default ThaYT;