feat: hero section updating

Author: sohez

src/app/components/Header.tsx

@@ -0,0 +1,70 @@
+"use client";
+import {
+  Code2Icon,
+  FolderClosedIcon,
+  GithubIcon,
+  HomeIcon,
+  InstagramIcon,
+} from "lucide-react";
+import Link from "next/link";
+import React from "react";
+
+const Header = () => {
+  return (
+    <header className="w-full fixed top-0 left-0 right-0 z-50">
+      <NavBar />
+    </header>
+  );
+};
+
+export default Header;
+
+const NavBar = () => {
+  return (
+    <div className="border-[0.2] border-gray-700 max-w-4xl mx-auto text-gray-400 backdrop-blur-3xl bg-gray-[#161B22] mt-6 p-3 px-12 rounded-2xl flex justify-between items-center">
+      <a href="" className="font-medium font-display text-gray-50 flex gap-2">
+        <Code2Icon/>
+        SOHEL SAYYED
+      </a>
+      <nav>
+        <ul className="flex gap-2 text-sm font-medium">
+          <li>
+            <Link
+              href="/"
+              className="flex items-center gap-2 hover:text-gray-200 transition-all duration-200 bg-gradient-to-b from-transparent to-transparent hover:from-transparent hover:to-gray-900 hover:border-b-[0.2] border-gray-500 px-3 py-2 rounded-lg"
+            >
+              <HomeIcon size={18} /> Home
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="/"
+              className="flex items-center gap-2 hover:text-gray-200 transition-all duration-200 bg-gradient-to-b from-transparent to-transparent hover:from-transparent hover:to-gray-900 hover:border-b-[0.2] border-gray-500 px-3 py-2 rounded-lg"
+            >
+              <FolderClosedIcon size={18} /> Projects
+            </Link>
+          </li>
+          <li className="py-1">
+            <span className="w-0.5 h-full bg-red-500 inline-block"></span>
+          </li>
+          <li>
+            <Link
+              href="/"
+              className="flex items-center gap-2 hover:text-gray-200 transition-all duration-200 bg-gradient-to-b from-transparent to-transparent hover:from-transparent hover:to-gray-900 hover:border-b-[0.2] border-gray-500 px-3 py-2 rounded-lg"
+            >
+              <InstagramIcon size={18} />
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="/"
+              className="flex items-center gap-2 hover:text-gray-200 transition-all duration-200 bg-gradient-to-b from-transparent to-transparent hover:from-transparent hover:to-gray-900 hover:border-b-[0.2] border-gray-500 px-3 py-2 rounded-lg"
+            >
+              <GithubIcon size={18} />
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+};

src/app/components/home/Hero.tsx

@@ -0,0 +1,72 @@
+import { InstagramIcon, MailIcon, SendIcon } from "lucide-react";
+import Image from "next/image";
+import React from "react";
+import "./hero.css";
+
+const Hero = () => {
+  return (
+    <section className="w-full mt-35">
+      <div className="max-w-7xl mx-auto flex flex-col gap-2 justify-center items-center">
+        <div className="group relative w-32 sm:w-40 md:w-48 lg:w-56 aspect-square overflow-hidden rounded-full  transition-all duration-300">
+          <Image
+            src="https://avatars.githubusercontent.com/u/57430072?v=4"
+            alt="Sohel Sayyed - profile photo"
+            fill
+            className="grayscale-100 hover:grayscale-0 object-cover transition-transform duration-500 ease-in-out group-hover:scale-105"
+          />
+        </div>
+        <div className="flex flex-col justify-center items-center gap-8 max-w-3xl">
+          <div>
+            <span>Hi, I&apos;m</span>
+            <h1 className="font-display tracking-wide text-5xl font-bold text-gray-50">
+              Sohel Sayyed
+            </h1>
+          </div>
+
+          <div>
+            <ul className="flex gap-3 justify-center items-center">
+              <li className="hover:text-gray-50 hover:border-b-[0.5px] p-1">
+                <InstagramIcon />
+              </li>
+              <li className="hover:text-gray-50 hover:border-b-[0.5px] p-1">
+                <MailIcon />
+              </li>
+              <li className="hover:text-gray-50 hover:border-b-[0.5px] p-1">
+                <SendIcon />
+              </li>
+            </ul>
+          </div>
+
+          <p className="text-lg">
+            I&apos;m Sayyed Sohel, a professional with extensive experience in
+            <span>crafting user-friendly websites </span>and powerful{" "}
+            <span>Android applications</span>. I can help you bring your digital
+            ideas to life, whether it&apos;s a sleek and modern website, a
+            feature-rich mobile app, or both!
+          </p>
+
+          <SkillsSlider />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;
+
+
+// slider style come from hero.css file.
+const SkillsSlider = () => {
+  return (
+    <div className="flex gap-2 justify-center items-baseline">
+      <div>I am</div>
+      <div className="slider">
+        <div className="slides ">
+          <div className="underline decoration-1 decoration-blue-500">Android Dev</div>
+          <div className="underline decoration-1 decoration-red-500">Fullstack Dev</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+  

src/app/components/home/hero.css

@@ -0,0 +1,37 @@
+.slider {
+  height: 40px; /* Height of one line of text */
+  overflow: hidden;
+  position: relative;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.slides {
+  display: flex;
+  flex-direction: column;
+  animation: slide 4s linear infinite;
+}
+
+.slides div {
+  height: 40px; /* Same as slider height */
+  display: flex;
+  align-items: center;
+}
+
+@keyframes slide {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-40px); /* Move up to show the 2nd item */
+  }
+  90% {
+    transform: translateY(-40px);
+  }
+  100% {
+    transform: translateY(0); /* Back to first */
+  }
+}