From 83de07c37e2f6e722836c26a709c2f01ef4b7d5d Mon Sep 17 00:00:00 2001
From: Josephat-S <sangwajozaphat@gmail.com>
Date: Mon, 25 May 2026 22:42:00 +0200
Subject: [PATCH] implemented a full designed portfolio template

---
 .../nextjs-monolith/app/about/page.tsx        | 132 ++++++++++++
 .../nextjs-monolith/app/contact/page.tsx      | 192 ++++++++++++++++++
 .../portfolio/nextjs-monolith/app/page.tsx    | 189 +++++++++++++++--
 .../nextjs-monolith/app/projects/page.tsx     | 136 +++++++++++++
 .../nextjs-monolith/components/Footer.tsx     | 113 +++++++++++
 .../components/ProjectCard.tsx                |  64 ++++++
 .../portfolio/nextjs-monolith/lib/nav.ts      |   6 +
 7 files changed, 810 insertions(+), 22 deletions(-)
 create mode 100644 templates/portfolio/nextjs-monolith/app/about/page.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/app/contact/page.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/app/projects/page.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/components/Footer.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/components/ProjectCard.tsx
 create mode 100644 templates/portfolio/nextjs-monolith/lib/nav.ts

diff --git a/templates/portfolio/nextjs-monolith/app/about/page.tsx b/templates/portfolio/nextjs-monolith/app/about/page.tsx
new file mode 100644
index 0000000..6403daa
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/app/about/page.tsx
@@ -0,0 +1,132 @@
+import Footer from '../../components/Footer';
+
+const timeline = [
+  {
+    period: '2023 — Present',
+    title: 'Senior Frontend Engineer',
+    company: 'TechCorp',
+    description: 'Leading the frontend architecture for a SaaS platform serving 100k+ users. Driving performance optimizations and mentoring junior developers.',
+  },
+  {
+    period: '2021 — 2023',
+    title: 'Frontend Developer',
+    company: 'StartupXYZ',
+    description: 'Built and shipped multiple customer-facing features from concept to production. Introduced TypeScript and improved test coverage by 60%.',
+  },
+  {
+    period: '2019 — 2021',
+    title: 'Junior Developer',
+    company: 'AgencyName',
+    description: 'Developed responsive websites and web applications for diverse clients across e-commerce, healthcare, and education sectors.',
+  },
+  {
+    period: '2018',
+    title: 'Computer Science Degree',
+    company: 'State University',
+    description: 'Graduated with honors. Focused on algorithms, data structures, and human-computer interaction. Built a capstone project using React and Node.js.',
+  },
+];
+
+const skills = [
+  'React', 'Next.js', 'TypeScript', 'Tailwind CSS',
+  'Node.js', 'PostgreSQL', 'Git', 'Figma',
+];
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        {/* Hero / Intro */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
+          {/* Text */}
+          <div>
+            <h1 className="text-3xl sm:text-4xl font-bold text-foreground">About Me</h1>
+            <div className="mt-6 space-y-4 text-text-secondary leading-relaxed">
+              <p>
+                Hi there! I&apos;m Alex Chen, a full-stack developer based in San Francisco
+                with over 5 years of experience building web applications. I&apos;m passionate
+                about creating intuitive, performant digital experiences that make a real
+                difference in people&apos;s lives.
+              </p>
+              <p>
+                My journey into software development started with a curiosity about how
+                things work on the internet. That curiosity turned into a career where I
+                get to solve complex problems every day. I specialize in React ecosystems,
+                TypeScript, and modern CSS — but I&apos;m always exploring new technologies.
+              </p>
+              <p>
+                When I&apos;m not coding, you&apos;ll find me contributing to open source projects,
+                writing technical blog posts, or hiking trails around the Bay Area. I believe
+                in continuous learning and sharing knowledge with the community.
+              </p>
+            </div>
+          </div>
+
+          {/* Image Placeholder */}
+          <div className="flex justify-center lg:justify-end">
+            <div className="w-72 h-80 rounded-theme bg-bg-secondary border border-border flex items-center justify-center">
+              <div className="text-center">
+                <div className="w-20 h-20 rounded-full bg-primary/20 mx-auto flex items-center justify-center">
+                  <span className="text-2xl font-bold text-primary">AC</span>
+                </div>
+                <p className="mt-3 text-sm text-text-secondary">Profile Photo</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Experience Timeline */}
+        <div className="mb-20">
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-10">Experience</h2>
+
+          <div className="space-y-8">
+            {timeline.map((entry, index) => (
+              <div key={index} className="relative pl-8 border-l-2 border-border">
+                {/* Dot */}
+                <div className="absolute left-[-9px] top-1 w-4 h-4 rounded-full bg-primary border-4 border-background" />
+
+                <div className="pb-2">
+                  <span className="text-xs font-medium text-primary uppercase tracking-wide">
+                    {entry.period}
+                  </span>
+                  <h3 className="mt-1 text-lg font-semibold text-foreground">
+                    {entry.title}
+                  </h3>
+                  <p className="text-sm text-text-secondary font-medium">{entry.company}</p>
+                  <p className="mt-2 text-sm text-text-secondary leading-relaxed">
+                    {entry.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Tech Stack */}
+        <div>
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-10 text-center">
+            Tech Stack
+          </h2>
+
+          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            {skills.map((skill) => (
+              <div
+                key={skill}
+                className="flex items-center justify-center gap-2 p-4 rounded-theme border border-border bg-card hover:border-primary hover:shadow-sm transition"
+              >
+                <div className="w-6 h-6 rounded bg-bg-secondary flex items-center justify-center">
+                  <span className="text-xs font-bold text-primary">
+                    {skill.charAt(0)}
+                  </span>
+                </div>
+                <span className="text-sm font-medium text-foreground">{skill}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/templates/portfolio/nextjs-monolith/app/contact/page.tsx b/templates/portfolio/nextjs-monolith/app/contact/page.tsx
new file mode 100644
index 0000000..c672d4f
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/app/contact/page.tsx
@@ -0,0 +1,192 @@
+import Footer from '../../components/Footer';
+
+export default function ContactPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        <div className="mb-10">
+          <h1 className="text-3xl sm:text-4xl font-bold text-foreground">Contact</h1>
+          <p className="mt-3 text-text-secondary">
+            Have a question or want to work together? Drop me a message.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-5 gap-12">
+          {/* Contact Form */}
+          <div className="lg:col-span-3">
+            <form className="space-y-5">
+              {/* Name */}
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-foreground mb-1.5">
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  placeholder="Your name"
+                  className="w-full px-4 py-2.5 rounded-theme border border-border bg-card text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
+                />
+              </div>
+
+              {/* Email */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-1.5">
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  placeholder="you@example.com"
+                  className="w-full px-4 py-2.5 rounded-theme border border-border bg-card text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
+                />
+              </div>
+
+              {/* Subject */}
+              <div>
+                <label htmlFor="subject" className="block text-sm font-medium text-foreground mb-1.5">
+                  Subject
+                </label>
+                <input
+                  type="text"
+                  id="subject"
+                  name="subject"
+                  placeholder="What's this about?"
+                  className="w-full px-4 py-2.5 rounded-theme border border-border bg-card text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition"
+                />
+              </div>
+
+              {/* Message */}
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-foreground mb-1.5">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={5}
+                  placeholder="Tell me about your project or idea..."
+                  className="w-full px-4 py-2.5 rounded-theme border border-border bg-card text-foreground placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition resize-none"
+                />
+              </div>
+
+              {/* Submit */}
+              <button
+                type="submit"
+                className="w-full rounded-theme bg-primary px-6 py-3 text-white font-medium hover:bg-primary-hover transition"
+              >
+                Send Message
+              </button>
+            </form>
+          </div>
+
+          {/* Contact Info */}
+          <div className="lg:col-span-2">
+            <div className="p-6 rounded-theme border border-border bg-card">
+              <h2 className="text-lg font-semibold text-foreground mb-6">Get in Touch</h2>
+
+              <div className="space-y-5">
+                {/* Email */}
+                <div className="flex items-start gap-3">
+                  <div className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center flex-shrink-0">
+                    <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground">Email</p>
+                    <p className="text-sm text-text-secondary">hello@alexchen.dev</p>
+                  </div>
+                </div>
+
+                {/* Location */}
+                <div className="flex items-start gap-3">
+                  <div className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center flex-shrink-0">
+                    <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground">Location</p>
+                    <p className="text-sm text-text-secondary">San Francisco, CA</p>
+                  </div>
+                </div>
+
+                {/* Availability */}
+                <div className="flex items-start gap-3">
+                  <div className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center flex-shrink-0">
+                    <svg className="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground">Availability</p>
+                    <p className="text-sm text-text-secondary">
+                      <span className="inline-block w-2 h-2 rounded-full bg-green-500 mr-1.5" />
+                      Open to freelance &amp; full-time
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Social Links */}
+              <div className="mt-8 pt-6 border-t border-border">
+                <p className="text-sm font-medium text-foreground mb-3">Follow Me</p>
+                <div className="flex gap-3">
+                  <a
+                    href="https://github.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center text-text-secondary hover:text-primary hover:border-primary border border-transparent transition"
+                    aria-label="GitHub"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://twitter.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center text-text-secondary hover:text-primary hover:border-primary border border-transparent transition"
+                    aria-label="Twitter"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                    </svg>
+                  </a>
+                  <a
+                    href="https://linkedin.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center text-text-secondary hover:text-primary hover:border-primary border border-transparent transition"
+                    aria-label="LinkedIn"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <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>
+                  </a>
+                  <a
+                    href="https://dribbble.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="w-9 h-9 rounded-theme bg-bg-secondary flex items-center justify-center text-text-secondary hover:text-primary hover:border-primary border border-transparent transition"
+                    aria-label="Dribbble"
+                  >
+                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.174 10.174 0 004.392-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.05 10.05 0 006.12 2.068c1.47 0 2.874-.31 4.176-.718zM5.034 20.54c.23-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 13.747 1.64 13.678.9 13.65c0 .12-.003.24-.003.36 0 2.57.96 4.92 2.535 6.7l-.398-.17zM1.124 11.64c.757.008 5.58.012 11.012-1.28-1.974-3.51-4.11-6.465-4.425-6.885A10.15 10.15 0 001.124 11.64zM9.03 2.78c.327.435 2.49 3.38 4.44 6.96 4.23-1.586 6.02-3.99 6.2-4.246A10.09 10.09 0 0012 1.88c-1.035 0-2.04.156-2.97.45v.45zm12.21 4.14c-.222.29-2.2 2.835-6.6 4.605.21.435.405.885.585 1.335.063.157.126.315.186.465 3.39-.427 6.75.26 7.08.33-.015-2.46-.885-4.72-2.355-6.435l1.104-.3z" />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/templates/portfolio/nextjs-monolith/app/page.tsx b/templates/portfolio/nextjs-monolith/app/page.tsx
index b057037..ab18076 100644
--- a/templates/portfolio/nextjs-monolith/app/page.tsx
+++ b/templates/portfolio/nextjs-monolith/app/page.tsx
@@ -1,26 +1,171 @@
+import Link from 'next/link';
+import ProjectCard from '../components/ProjectCard';
+import Footer from '../components/Footer';
+
 export default function Home() {
+  const featuredProjects = [
+    {
+      title: 'E-Commerce Platform',
+      description: 'A full-stack e-commerce solution with real-time inventory management, payment processing, and an admin dashboard.',
+      tags: ['React', 'Node.js', 'Stripe'],
+      color: '#6366f1',
+      link: '/projects',
+    },
+    {
+      title: 'Task Management App',
+      description: 'Collaborative project management tool with drag-and-drop boards, real-time updates, and team workspaces.',
+      tags: ['Next.js', 'Prisma', 'PostgreSQL'],
+      color: '#8b5cf6',
+      link: '/projects',
+    },
+    {
+      title: 'Weather Dashboard',
+      description: 'Beautiful weather visualization app with interactive charts, location search, and 7-day forecasts.',
+      tags: ['TypeScript', 'API', 'Chart.js'],
+      color: '#06b6d4',
+      link: '/projects',
+    },
+  ];
+
+  const skills = [
+    'React', 'Next.js', 'TypeScript', 'Tailwind CSS',
+    'Node.js', 'PostgreSQL', 'Git', 'Figma',
+  ];
+
   return (
-    <main className="min-h-screen flex flex-col items-center justify-center px-6 text-center bg-background text-foreground">
-      <h1 className="text-5xl font-bold tracking-tight">
-        Welcome to <span className="text-primary">{{projectName}}</span>
-      </h1>
-      <p className="mt-4 text-xl text-text-secondary max-w-2xl">
-        A <strong>{{variant}}</strong> portfolio, scaffolded by Opusify CLI.
-      </p>
-      <div className="mt-8 flex gap-4">
-        <a
-          href="#projects"
-          className="rounded-theme bg-primary px-6 py-3 text-white font-medium hover:bg-primary-hover transition"
-        >
-          View Projects
-        </a>
-        <a
-          href="#contact"
-          className="rounded-theme border border-border px-6 py-3 font-medium hover:bg-bg-secondary transition"
-        >
-          Contact Me
-        </a>
-      </div>
-    </main>
+    <div className="min-h-screen bg-background">
+      {/* Hero Section */}
+      <section className="relative max-w-5xl mx-auto px-6 py-24 lg:py-32 text-center overflow-hidden">
+        {/* Decorative gradient blob */}
+        <div
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full blur-3xl pointer-events-none"
+          style=\{{ background: 'radial-gradient(circle, var(--primary) 0%, transparent 70%)', opacity: 0.12 }}
+        />
+
+        <div className="relative z-10">
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-foreground tracking-tight">
+            Hi, I&apos;m <span className="text-primary">Alex Chen</span>
+          </h1>
+          <p className="mt-4 text-lg sm:text-xl text-text-secondary max-w-2xl mx-auto">
+            A full-stack developer building modern web experiences with the{' '}
+            <strong className="text-foreground">{{variant}}</strong> aesthetic.
+            Welcome to <span className="text-primary font-semibold">{{projectName}}</span>.
+          </p>
+          <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+            <Link
+              href="/projects"
+              className="rounded-theme bg-primary px-7 py-3 text-white font-medium hover:bg-primary-hover transition"
+            >
+              View Projects
+            </Link>
+            <Link
+              href="/contact"
+              className="rounded-theme border border-border px-7 py-3 font-medium text-foreground hover:bg-bg-secondary transition"
+            >
+              Contact Me
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* About Preview Section */}
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground">About Me</h2>
+          <p className="mt-3 text-text-secondary max-w-xl mx-auto">
+            I specialize in building performant, accessible web applications
+            that delight users and solve real problems.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+          <div className="text-center p-6 rounded-theme border border-border bg-card">
+            <p className="text-3xl font-bold text-primary">5+</p>
+            <p className="mt-1 text-sm text-text-secondary">Years Experience</p>
+          </div>
+          <div className="text-center p-6 rounded-theme border border-border bg-card">
+            <p className="text-3xl font-bold text-primary">50+</p>
+            <p className="mt-1 text-sm text-text-secondary">Projects Completed</p>
+          </div>
+          <div className="text-center p-6 rounded-theme border border-border bg-card">
+            <p className="text-3xl font-bold text-primary">30+</p>
+            <p className="mt-1 text-sm text-text-secondary">Happy Clients</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Featured Projects Section */}
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        <div className="flex items-center justify-between mb-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground">Featured Projects</h2>
+          <Link
+            href="/projects"
+            className="text-sm font-medium text-primary hover:underline hidden sm:inline-flex items-center"
+          >
+            View All Projects
+            <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+            </svg>
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {featuredProjects.map((project) => (
+            <ProjectCard key={project.title} {...project} />
+          ))}
+        </div>
+
+        <div className="mt-8 text-center sm:hidden">
+          <Link href="/projects" className="text-sm font-medium text-primary hover:underline">
+            View All Projects &rarr;
+          </Link>
+        </div>
+      </section>
+
+      {/* Skills / Tech Stack Section */}
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        <div className="text-center mb-10">
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground">Tech Stack</h2>
+          <p className="mt-3 text-text-secondary">Technologies I work with daily</p>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {skills.map((skill) => (
+            <div
+              key={skill}
+              className="flex items-center justify-center gap-2 p-4 rounded-theme border border-border bg-card hover:border-primary hover:shadow-sm transition"
+            >
+              <div className="w-6 h-6 rounded bg-bg-secondary flex items-center justify-center">
+                <span className="text-xs font-bold text-primary">
+                  {skill.charAt(0)}
+                </span>
+              </div>
+              <span className="text-sm font-medium text-foreground">{skill}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Contact CTA Section */}
+      <section className="bg-bg-secondary border-t border-b border-border">
+        <div className="max-w-5xl mx-auto px-6 py-20 text-center">
+          <h2 className="text-2xl sm:text-3xl font-bold text-foreground">
+            Let&apos;s Work Together
+          </h2>
+          <p className="mt-3 text-text-secondary max-w-lg mx-auto">
+            Have a project in mind or want to collaborate? I&apos;m always open to
+            discussing new opportunities and creative ideas.
+          </p>
+          <Link
+            href="/contact"
+            className="mt-8 inline-block rounded-theme bg-primary px-8 py-3 text-white font-medium hover:bg-primary-hover transition"
+          >
+            Get In Touch
+          </Link>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
   );
 }
diff --git a/templates/portfolio/nextjs-monolith/app/projects/page.tsx b/templates/portfolio/nextjs-monolith/app/projects/page.tsx
new file mode 100644
index 0000000..70c5a9d
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/app/projects/page.tsx
@@ -0,0 +1,136 @@
+import Link from 'next/link';
+import Footer from '../../components/Footer';
+
+const filters = ['All', 'Web App', 'Mobile', 'Design', 'Open Source'];
+
+const projects = [
+  {
+    title: 'E-Commerce Platform',
+    description: 'A full-stack e-commerce solution with real-time inventory management, payment processing via Stripe, and a comprehensive admin dashboard for store owners.',
+    tags: ['React', 'Node.js', 'Stripe'],
+    color: '#6366f1',
+    category: 'Web App',
+  },
+  {
+    title: 'Task Management App',
+    description: 'Collaborative project management tool featuring drag-and-drop Kanban boards, real-time updates with WebSockets, and team workspace management.',
+    tags: ['Next.js', 'Prisma', 'PostgreSQL'],
+    color: '#8b5cf6',
+    category: 'Web App',
+  },
+  {
+    title: 'Weather Dashboard',
+    description: 'Beautiful weather visualization application with interactive charts, geolocation-based search, and detailed 7-day forecasts with hourly breakdowns.',
+    tags: ['TypeScript', 'API', 'Chart.js'],
+    color: '#06b6d4',
+    category: 'Web App',
+  },
+  {
+    title: 'Social Media Clone',
+    description: 'A cross-platform mobile application replicating core social media features including feeds, stories, real-time messaging, and push notifications.',
+    tags: ['React Native', 'Firebase', 'Expo'],
+    color: '#f43f5e',
+    category: 'Mobile',
+  },
+  {
+    title: 'Design System',
+    description: 'A comprehensive component library and design system with tokens, accessibility guidelines, and interactive documentation powered by Storybook.',
+    tags: ['Figma', 'Storybook', 'CSS'],
+    color: '#f59e0b',
+    category: 'Design',
+  },
+  {
+    title: 'CLI Tool',
+    description: 'A developer-focused command-line interface for scaffolding projects, managing configurations, and automating repetitive development workflows.',
+    tags: ['Node.js', 'TypeScript', 'Commander'],
+    color: '#10b981',
+    category: 'Open Source',
+  },
+];
+
+export default function ProjectsPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        {/* Page Header */}
+        <div className="mb-10">
+          <h1 className="text-3xl sm:text-4xl font-bold text-foreground">All Projects</h1>
+          <p className="mt-3 text-text-secondary">
+            A collection of projects I&apos;ve built — from web apps to open source tools.
+          </p>
+        </div>
+
+        {/* Filter Buttons */}
+        <div className="flex flex-wrap gap-2 mb-10">
+          {filters.map((filter, index) => (
+            <button
+              key={filter}
+              className={`px-4 py-2 text-sm font-medium rounded-theme transition ${
+                index === 0
+                  ? 'bg-primary text-white'
+                  : 'bg-card border border-border text-text-secondary hover:text-foreground hover:border-primary'
+              }`}
+            >
+              {filter}
+            </button>
+          ))}
+        </div>
+
+        {/* Projects Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {projects.map((project) => (
+            <div
+              key={project.title}
+              className="group border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg hover:scale-[1.02] transition-all duration-300"
+            >
+              {/* Image Placeholder */}
+              <div
+                className="aspect-video w-full"
+                style=\{{ backgroundColor: project.color }}
+              >
+                <div className="w-full h-full flex items-center justify-center">
+                  <span className="text-white/70 text-sm font-medium">Project Preview</span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-5">
+                <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition">
+                  {project.title}
+                </h3>
+                <p className="mt-2 text-sm text-text-secondary leading-relaxed">
+                  {project.description}
+                </p>
+
+                {/* Tags */}
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {project.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-2 py-1 text-xs rounded-full bg-bg-secondary text-text-secondary border border-border"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+
+                {/* Link */}
+                <Link
+                  href="#"
+                  className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+                >
+                  View Project
+                  <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                  </svg>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/templates/portfolio/nextjs-monolith/components/Footer.tsx b/templates/portfolio/nextjs-monolith/components/Footer.tsx
new file mode 100644
index 0000000..ef1b047
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/components/Footer.tsx
@@ -0,0 +1,113 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="border-t border-border bg-card">
+      <div className="max-w-5xl mx-auto px-6 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* Brand */}
+          <div>
+            <Link href="/" className="text-xl font-bold text-primary">
+              {{projectName}}
+            </Link>
+            <p className="mt-3 text-text-secondary text-sm leading-relaxed">
+              A passionate developer crafting digital experiences with modern
+              technologies. Building products that make a difference.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h3 className="font-semibold text-foreground mb-4">Quick Links</h3>
+            <ul className="space-y-2">
+              <li>
+                <Link href="/" className="text-sm text-text-secondary hover:text-primary transition">
+                  Home
+                </Link>
+              </li>
+              <li>
+                <Link href="/projects" className="text-sm text-text-secondary hover:text-primary transition">
+                  Projects
+                </Link>
+              </li>
+              <li>
+                <Link href="/about" className="text-sm text-text-secondary hover:text-primary transition">
+                  About
+                </Link>
+              </li>
+              <li>
+                <Link href="/contact" className="text-sm text-text-secondary hover:text-primary transition">
+                  Contact
+                </Link>
+              </li>
+            </ul>
+          </div>
+
+          {/* Social */}
+          <div>
+            <h3 className="font-semibold text-foreground mb-4">Social</h3>
+            <div className="flex gap-4">
+              {/* GitHub */}
+              <a
+                href="https://github.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-primary transition"
+                aria-label="GitHub"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                </svg>
+              </a>
+              {/* Twitter/X */}
+              <a
+                href="https://twitter.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-primary transition"
+                aria-label="Twitter"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+              </a>
+              {/* LinkedIn */}
+              <a
+                href="https://linkedin.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-primary transition"
+                aria-label="LinkedIn"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <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>
+              </a>
+              {/* Dribbble */}
+              <a
+                href="https://dribbble.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-text-secondary hover:text-primary transition"
+                aria-label="Dribbble"
+              >
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.174 10.174 0 004.392-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.05 10.05 0 006.12 2.068c1.47 0 2.874-.31 4.176-.718zM5.034 20.54c.23-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 13.747 1.64 13.678.9 13.65c0 .12-.003.24-.003.36 0 2.57.96 4.92 2.535 6.7l-.398-.17zM1.124 11.64c.757.008 5.58.012 11.012-1.28-1.974-3.51-4.11-6.465-4.425-6.885A10.15 10.15 0 001.124 11.64zM9.03 2.78c.327.435 2.49 3.38 4.44 6.96 4.23-1.586 6.02-3.99 6.2-4.246A10.09 10.09 0 0012 1.88c-1.035 0-2.04.156-2.97.45v.45zm12.21 4.14c-.222.29-2.2 2.835-6.6 4.605.21.435.405.885.585 1.335.063.157.126.315.186.465 3.39-.427 6.75.26 7.08.33-.015-2.46-.885-4.72-2.355-6.435l1.104-.3z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="mt-10 pt-6 border-t border-border text-center">
+          <p className="text-sm text-text-secondary">
+            &copy; {currentYear} {{projectName}}. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/templates/portfolio/nextjs-monolith/components/ProjectCard.tsx b/templates/portfolio/nextjs-monolith/components/ProjectCard.tsx
new file mode 100644
index 0000000..16e8fd3
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/components/ProjectCard.tsx
@@ -0,0 +1,64 @@
+import Link from 'next/link';
+
+interface ProjectCardProps {
+  title: string;
+  description: string;
+  tags: string[];
+  color: string;
+  link: string;
+}
+
+export default function ProjectCard({
+  title,
+  description,
+  tags,
+  color,
+  link,
+}: ProjectCardProps) {
+  return (
+    <div className="group border border-border rounded-theme bg-card overflow-hidden hover:shadow-lg hover:scale-[1.02] transition-all duration-300">
+      {/* Image Placeholder */}
+      <div
+        className="aspect-video w-full"
+        style=\{{ backgroundColor: color }}
+      >
+        <div className="w-full h-full flex items-center justify-center">
+          <span className="text-white/70 text-sm font-medium">Project Preview</span>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-5">
+        <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition">
+          {title}
+        </h3>
+        <p className="mt-2 text-sm text-text-secondary leading-relaxed">
+          {description}
+        </p>
+
+        {/* Tags */}
+        <div className="mt-3 flex flex-wrap gap-2">
+          {tags.map((tag) => (
+            <span
+              key={tag}
+              className="px-2 py-1 text-xs rounded-full bg-bg-secondary text-text-secondary border border-border"
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        {/* Link */}
+        <Link
+          href={link}
+          className="mt-4 inline-flex items-center text-sm font-medium text-primary hover:underline"
+        >
+          View Project
+          <svg className="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+          </svg>
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/templates/portfolio/nextjs-monolith/lib/nav.ts b/templates/portfolio/nextjs-monolith/lib/nav.ts
new file mode 100644
index 0000000..941a983
--- /dev/null
+++ b/templates/portfolio/nextjs-monolith/lib/nav.ts
@@ -0,0 +1,6 @@
+export const navLinks = [
+  { href: '/', label: 'Home' },
+  { href: '/projects', label: 'Projects' },
+  { href: '/about', label: 'About' },
+  { href: '/contact', label: 'Contact' },
+];