Build portfolio site with real CV content

Single-page scrolling portfolio using Next.js 16, Tailwind CSS v4, and Framer Motion. Sections: Hero, About, Skills, Projects, Contact. Dark theme with orange/amber accents, scroll-reveal animations, and a sticky blurring navbar. All content populated from Khaalid's CV — real bio, skills, work context, and personal projects (server hosting, game dev, AI). Contact form wired to khaalidmnbaccar@gmail.com via mailto. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-25 09:53:29 +04:00
parent fcdecaf1d1
commit debbb64f20
13 changed files with 679 additions and 78 deletions
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "portfolio",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000,
+      "autoPort": false
+    }
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
      "name": "portfolio",
      "version": "0.1.0",
      "dependencies": {
+        "framer-motion": "^12.40.0",
        "next": "16.2.6",
        "react": "19.2.4",
        "react-dom": "19.2.4"
@@ -3762,6 +3763,33 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/framer-motion": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.40.0.tgz",
+      "integrity": "sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.40.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/function-bind": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -5089,6 +5117,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/motion-dom": {
+      "version": "12.40.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.40.0.tgz",
+      "integrity": "sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "framer-motion": "^12.40.0",
    "next": "16.2.6",
    "react": "19.2.4",
    "react-dom": "19.2.4"
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,8 +1,8 @@
@import "tailwindcss";

 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #0a0a0a;
+  --foreground: #f5f5f5;
 }

@theme inline {
@@ -12,15 +12,25 @@
  --font-mono: var(--font-geist-mono);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+html {
+  scroll-behavior: smooth;
 }

 body {
  background: var(--background);
  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-track {
+  background: #0a0a0a;
+}
+::-webkit-scrollbar-thumb {
+  background: #f97316;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #fb923c;
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,21 +13,17 @@ const geistMono = Geist_Mono({
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Khaalid.M.N Baccar — Software Engineer",
+  description:
+    "Software Engineer with hands-on experience in enterprise application development, SAP ERP solutions, and full-stack web development.",
 };

 export default function RootLayout({
  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: React.ReactNode }>) {
  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body className="bg-[#0a0a0a] text-white antialiased">{children}</body>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,65 +1,19 @@
-import Image from "next/image";
+import Navbar from "@/components/Navbar";
+import Hero from "@/components/Hero";
+import About from "@/components/About";
+import Skills from "@/components/Skills";
+import Projects from "@/components/Projects";
+import Contact from "@/components/Contact";

 export default function Home() {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+    <main>
+      <Navbar />
+      <Hero />
+      <About />
+      <Skills />
+      <Projects />
+      <Contact />
    </main>
-    </div>
  );
 }
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -0,0 +1,72 @@
+import SectionWrapper from "./SectionWrapper";
+
+const stats = [
+  { value: "1+", label: "Years Industry Experience" },
+  { value: "1st", label: "Class Honours Degree" },
+  { value: "15+", label: "Technologies" },
+  { value: "2", label: "Languages Spoken" },
+];
+
+const techHighlights = ["C#", "JavaScript", "Python", ".NET", "Node.js", "Angular"];
+
+export default function About() {
+  return (
+    <SectionWrapper id="about" className="py-28 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-4 mb-16">
+          <span className="font-mono text-orange-400 text-sm">01.</span>
+          <h2 className="text-3xl font-bold text-white">About Me</h2>
+          <div className="flex-1 h-px bg-zinc-800" />
+        </div>
+
+        <div className="grid md:grid-cols-5 gap-16 items-start">
+          <div className="md:col-span-3 space-y-5">
+            <p className="text-zinc-400 leading-8">
+              I&apos;m a Software Engineer with hands-on experience in enterprise application
+              development and SAP ERP solutions. Currently working at{" "}
+              <span className="text-zinc-300 font-medium">Accenture Technology</span> in a
+              client-facing environment, delivering scalable and business-oriented software systems.
+            </p>
+            <p className="text-zinc-400 leading-8">
+              I have a strong foundation in backend development, database systems, and API design,
+              with additional interest in game development and server infrastructure. I hold a{" "}
+              <span className="text-zinc-300 font-medium">
+                BSc (Hons) in Software Engineering — First Class Honours
+              </span>{" "}
+              from the University of Technology, Mauritius.
+            </p>
+            <p className="text-zinc-400 leading-8">
+              I&apos;m passionate about problem-solving, clean architecture, and continuous
+              technical growth. Whether it&apos;s building enterprise ERP solutions or personal
+              projects in AI and game development, I bring the same care and curiosity to
+              everything I work on.
+            </p>
+
+            <div className="pt-2 flex flex-wrap gap-2.5">
+              {techHighlights.map((tech) => (
+                <span
+                  key={tech}
+                  className="font-mono text-xs text-orange-400 border border-orange-500/25 bg-orange-500/5 px-3 py-1.5 rounded-md"
+                >
+                  {tech}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="md:col-span-2 grid grid-cols-2 gap-4">
+            {stats.map(({ value, label }) => (
+              <div
+                key={label}
+                className="bg-zinc-900/60 border border-zinc-800 rounded-xl p-5 hover:border-orange-500/30 transition-colors"
+              >
+                <div className="text-3xl font-bold text-orange-400 mb-1">{value}</div>
+                <div className="text-zinc-500 text-sm leading-tight">{label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </SectionWrapper>
+  );
+}
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { useState } from "react";
+import SectionWrapper from "./SectionWrapper";
+
+function GitHubIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+function LinkedInIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+}
+
+function EmailIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="2" y="4" width="20" height="16" rx="2" />
+      <path d="M22 7L13.03 12.7a2 2 0 01-2.06 0L2 7" />
+    </svg>
+  );
+}
+
+const socials = [
+  { label: "GitHub", href: "https://github.com", Icon: GitHubIcon },
+  { label: "LinkedIn", href: "https://linkedin.com", Icon: LinkedInIcon },
+  { label: "Email", href: "mailto:khaalidmnbaccar@gmail.com", Icon: EmailIcon },
+];
+
+const CONTACT_EMAIL = "khaalidmnbaccar@gmail.com";
+
+const inputClass =
+  "w-full bg-zinc-900/60 border border-zinc-800 rounded-lg px-4 py-3 text-white text-sm placeholder-zinc-600 focus:outline-none focus:border-orange-500/60 transition-colors";
+
+export default function Contact() {
+  const [form, setForm] = useState({ name: "", email: "", message: "" });
+  const [status, setStatus] = useState<"idle" | "opening">("idle");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus("opening");
+    const subject = `Portfolio contact from ${form.name}`;
+    const body = `${form.message}\n\nReply to: ${form.email}`;
+    window.location.href = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    setTimeout(() => setStatus("idle"), 1500);
+  };
+
+  return (
+    <SectionWrapper id="contact" className="py-28 px-6">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center gap-4 mb-16">
+          <span className="font-mono text-orange-400 text-sm">04.</span>
+          <h2 className="text-3xl font-bold text-white">Get In Touch</h2>
+          <div className="flex-1 h-px bg-zinc-800" />
+        </div>
+
+        <p className="text-zinc-400 text-base leading-relaxed text-center mb-12">
+          I&apos;m open to new opportunities and collaborations. Whether you have a project in
+          mind or just want to connect — feel free to reach out.
+        </p>
+
+        <form onSubmit={handleSubmit} className="space-y-5 mb-12">
+          <div className="grid sm:grid-cols-2 gap-5">
+            <div>
+              <label htmlFor="name" className="block text-sm text-zinc-400 mb-2 font-medium">
+                Name
+              </label>
+              <input
+                id="name"
+                type="text"
+                required
+                value={form.name}
+                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+                placeholder="Your name"
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-sm text-zinc-400 mb-2 font-medium">
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                required
+                value={form.email}
+                onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+                placeholder="your@email.com"
+                className={inputClass}
+              />
+            </div>
+          </div>
+          <div>
+            <label htmlFor="message" className="block text-sm text-zinc-400 mb-2 font-medium">
+              Message
+            </label>
+            <textarea
+              id="message"
+              required
+              rows={5}
+              value={form.message}
+              onChange={(e) => setForm((f) => ({ ...f, message: e.target.value }))}
+              placeholder="What's on your mind?"
+              className={`${inputClass} resize-none`}
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={status !== "idle"}
+            className="w-full py-3.5 bg-orange-500 hover:bg-orange-400 disabled:opacity-60 text-white font-semibold rounded-lg transition-all duration-200 hover:shadow-[0_0_25px_rgba(249,115,22,0.3)] active:scale-[0.99]"
+          >
+            {status === "opening" ? "Opening mail client…" : "Send Message"}
+          </button>
+        </form>
+
+        <div className="flex justify-center gap-8">
+          {socials.map(({ label, href, Icon }) => (
+            <a
+              key={label}
+              href={href}
+              target={href.startsWith("mailto") ? undefined : "_blank"}
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 text-zinc-500 hover:text-orange-400 transition-colors text-sm"
+            >
+              <Icon />
+              <span>{label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-20 pt-8 border-t border-zinc-900 text-center">
+        <p className="font-mono text-zinc-600 text-xs">
+          Built with Next.js &amp; Tailwind CSS — Designed &amp; Developed by Khaalid.M.N Baccar
+        </p>
+      </div>
+    </SectionWrapper>
+  );
+}
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const fadeUp = (delay = 0) => ({
+  initial: { opacity: 0, y: 24 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.6, delay, ease: "easeOut" as const },
+});
+
+export default function Hero() {
+  return (
+    <section
+      id="hero"
+      className="relative min-h-screen flex flex-col items-center justify-center px-6 overflow-hidden"
+    >
+      {/* Dot grid background */}
+      <div
+        className="absolute inset-0 opacity-[0.035]"
+        style={{
+          backgroundImage: "radial-gradient(circle, #fff 1px, transparent 1px)",
+          backgroundSize: "40px 40px",
+        }}
+      />
+      {/* Orange radial glow */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_50%,rgba(249,115,22,0.07)_0%,transparent_70%)]" />
+
+      <div className="relative z-10 max-w-4xl w-full text-center">
+        <motion.p
+          {...fadeUp(0)}
+          className="font-mono text-orange-400 text-sm tracking-[0.3em] uppercase mb-6"
+        >
+          Hello, World! — I&apos;m
+        </motion.p>
+
+        <motion.h1
+          {...fadeUp(0.1)}
+          className="text-5xl sm:text-7xl md:text-8xl font-bold text-white tracking-tight mb-4 leading-none"
+        >
+          Khaalid{" "}
+          <span className="text-orange-400">Baccar</span>
+        </motion.h1>
+
+        <motion.h2
+          {...fadeUp(0.2)}
+          className="text-xl sm:text-2xl text-zinc-400 font-light mb-8"
+        >
+          Software Engineer &amp; Full Stack Developer
+        </motion.h2>
+
+        <motion.p
+          {...fadeUp(0.3)}
+          className="text-zinc-500 text-base sm:text-lg max-w-xl mx-auto leading-relaxed mb-10"
+        >
+          I build scalable, business-oriented software — from enterprise ERP solutions
+          to full-stack web applications. Passionate about clean architecture and
+          continuous technical growth.
+        </motion.p>
+
+        <motion.div
+          {...fadeUp(0.4)}
+          className="flex flex-wrap gap-4 justify-center"
+        >
+          <a
+            href="#projects"
+            className="px-7 py-3 bg-orange-500 hover:bg-orange-400 text-white font-semibold rounded-lg transition-all duration-200 hover:shadow-[0_0_30px_rgba(249,115,22,0.35)] active:scale-95"
+          >
+            View My Work
+          </a>
+          <a
+            href="#contact"
+            className="px-7 py-3 border border-zinc-700 text-zinc-300 hover:border-orange-500/60 hover:text-orange-400 font-semibold rounded-lg transition-all duration-200 active:scale-95"
+          >
+            Get In Touch
+          </a>
+        </motion.div>
+      </div>
+
+      {/* Scroll indicator */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.2 }}
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
+      >
+        <span className="font-mono text-zinc-600 text-xs tracking-widest uppercase">Scroll</span>
+        <motion.div
+          animate={{ y: [0, 6, 0] }}
+          transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" as const }}
+          className="w-px h-10 bg-gradient-to-b from-orange-400/60 to-transparent"
+        />
+      </motion.div>
+    </section>
+  );
+}
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const links = [
+  { label: "About", href: "#about" },
+  { label: "Skills", href: "#skills" },
+  { label: "Projects", href: "#projects" },
+  { label: "Contact", href: "#contact" },
+];
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+
+  return (
+    <header
+      className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
+        scrolled ? "bg-[#0a0a0a]/80 backdrop-blur-md border-b border-white/5" : ""
+      }`}
+    >
+      <nav className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
+        <a
+          href="#hero"
+          className="font-mono text-orange-400 font-bold text-xl tracking-tight hover:text-orange-300 transition-colors"
+        >
+          &lt;KB /&gt;
+        </a>
+
+        <ul className="hidden md:flex items-center gap-8">
+          {links.map(({ label, href }) => (
+            <li key={href}>
+              <a
+                href={href}
+                className="text-zinc-400 hover:text-orange-400 transition-colors text-sm font-medium"
+              >
+                {label}
+              </a>
+            </li>
+          ))}
+        </ul>
+
+        <a
+          href="#contact"
+          className="hidden md:inline-flex items-center px-4 py-2 border border-orange-500/50 text-orange-400 rounded-lg text-sm font-medium hover:bg-orange-500/10 hover:border-orange-400 transition-all"
+        >
+          Hire Me
+        </a>
+      </nav>
+    </header>
+  );
+}
--- a/src/components/Projects.tsx
+++ b/src/components/Projects.tsx
@@ -0,0 +1,123 @@
+import SectionWrapper from "./SectionWrapper";
+
+const projects = [
+  {
+    number: "01",
+    title: "Server Management & Hosting",
+    description:
+      "Self-hosted server infrastructure covering web hosting, service deployment, and uptime monitoring. Includes Linux server configuration, network setup, reverse proxying, and automated maintenance scripts.",
+    tags: ["Linux", "Docker", "Nginx", "Bash", "Server Config"],
+    github: "https://github.com",
+    live: null,
+  },
+  {
+    number: "02",
+    title: "Game Development",
+    description:
+      "A collection of 2D and 3D game projects built with Unity (C#) and Construct3. Explores game mechanics, physics systems, collision detection, level design, and interactive storytelling.",
+    tags: ["Unity", "C#", "Construct3", "Game Design"],
+    github: "https://github.com",
+    live: null,
+  },
+  {
+    number: "03",
+    title: "AI Development",
+    description:
+      "Personal projects exploring AI and machine learning concepts, including model integration into applications, intelligent automation scripts, and experiments with AI APIs for real-world use cases.",
+    tags: ["Python", "AI/ML", "Automation", "APIs"],
+    github: "https://github.com",
+    live: null,
+  },
+];
+
+export default function Projects() {
+  return (
+    <SectionWrapper id="projects" className="py-28 px-6 bg-zinc-950/40">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-4 mb-16">
+          <span className="font-mono text-orange-400 text-sm">03.</span>
+          <h2 className="text-3xl font-bold text-white">Projects</h2>
+          <div className="flex-1 h-px bg-zinc-800" />
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projects.map(({ number, title, description, tags, github, live }) => (
+            <div
+              key={title}
+              className="group bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 flex flex-col hover:border-orange-500/30 hover:-translate-y-1 transition-all duration-300"
+            >
+              <div className="flex items-start justify-between mb-4">
+                <span className="font-mono text-orange-400/40 text-3xl font-bold leading-none select-none">
+                  {number}
+                </span>
+                <div className="flex gap-3">
+                  <a
+                    href={github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-zinc-500 hover:text-orange-400 transition-colors"
+                    aria-label={`${title} on GitHub`}
+                  >
+                    <GitHubIcon />
+                  </a>
+                  {live && (
+                    <a
+                      href={live}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-zinc-500 hover:text-orange-400 transition-colors"
+                      aria-label={`${title} live demo`}
+                    >
+                      <ExternalLinkIcon />
+                    </a>
+                  )}
+                </div>
+              </div>
+
+              <h3 className="text-white font-semibold text-lg mb-3 group-hover:text-orange-400 transition-colors">
+                {title}
+              </h3>
+              <p className="text-zinc-500 text-sm leading-relaxed flex-1 mb-5">{description}</p>
+
+              <div className="flex flex-wrap gap-2">
+                {tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="font-mono text-xs text-zinc-400 bg-zinc-800/60 px-2.5 py-1 rounded-md"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </SectionWrapper>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />
+    </svg>
+  );
+}
--- a/src/components/SectionWrapper.tsx
+++ b/src/components/SectionWrapper.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { useRef, type ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+export default function SectionWrapper({ children, id, className = "" }: Props) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-80px" });
+
+  return (
+    <motion.div
+      ref={ref}
+      id={id}
+      className={className}
+      initial={{ opacity: 0, y: 40 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 0.6, ease: "easeOut" as const }}
+    >
+      {children}
+    </motion.div>
+  );
+}
--- a/src/components/Skills.tsx
+++ b/src/components/Skills.tsx
@@ -0,0 +1,55 @@
+import SectionWrapper from "./SectionWrapper";
+
+const skillGroups = [
+  {
+    category: "Languages",
+    skills: ["C#", "JavaScript", "Python", "PHP", "ABAP"],
+  },
+  {
+    category: "Frameworks",
+    skills: [".NET", "Node.js", "Angular", "Flutter", "Unity", "Construct3"],
+  },
+  {
+    category: "Databases",
+    skills: ["Oracle", "SQL Server", "MySQL", "MongoDB", "Firebase"],
+  },
+  {
+    category: "DevOps & Tools",
+    skills: ["Docker", "Linux", "Git", "Azure DevOps", "Server Hosting", "CI/CD"],
+  },
+];
+
+export default function Skills() {
+  return (
+    <SectionWrapper id="skills" className="py-28 px-6">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex items-center gap-4 mb-16">
+          <span className="font-mono text-orange-400 text-sm">02.</span>
+          <h2 className="text-3xl font-bold text-white">Skills &amp; Tech</h2>
+          <div className="flex-1 h-px bg-zinc-800" />
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {skillGroups.map(({ category, skills }) => (
+            <div
+              key={category}
+              className="bg-zinc-900/40 border border-zinc-800 rounded-xl p-6 hover:border-zinc-700 transition-colors"
+            >
+              <h3 className="text-orange-400 font-mono text-xs font-semibold uppercase tracking-widest mb-5">
+                {category}
+              </h3>
+              <ul className="space-y-3">
+                {skills.map((skill) => (
+                  <li key={skill} className="flex items-center gap-2.5 text-zinc-400 text-sm">
+                    <span className="w-1.5 h-1.5 rounded-full bg-orange-400/60 flex-shrink-0" />
+                    {skill}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </SectionWrapper>
+  );
+}