Skip to content

Add mobile navigation menu for small screen #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ARCHILODHA wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add mobile navigation menu for small screen #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 3 additions & 8 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
Comment on lines +1 to +3
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching from @import "tailwindcss" to @tailwind ... and removing the prior @theme inline mapping is unrelated to the mobile-nav feature described in the PR and can change/lose theme token behavior (fonts/colors). Consider reverting these CSS changes or updating the PR description to justify them.

Copilot uses AI. Check for mistakes.

:root {
--background: #ffffff;
--foreground: #171717;
}

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
Expand Down
281 changes: 35 additions & 246 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,262 +1,51 @@
import Image from "next/image";
import Link from "next/link";
"use client";
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding the file-level "use client" directive makes the entire homepage a client component (increasing JS sent to the browser) just to support a nav toggle. If possible, consider a no-JS approach (e.g., <details>/<summary>), or otherwise keep the existing page content and accept the tradeoff explicitly.

Copilot uses AI. Check for mistakes.

const basePath = process.env.NODE_ENV === "production" ? "/gfbs3-portfolio-demo" : "";
import { useState } from "react";
import Link from "next/link";

Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This template’s GitHub Pages setup expects a basePath helper in app/page.tsx for building /public asset URLs (see README “Update the Base Path” and next.config.ts’s basePath). Removing it will make the README instructions inaccurate and will break asset paths if/when the profile image and other /public assets are restored.

Suggested change
// GitHub Pages base path helper for /public assets
// Update "/gfbs3-portfolio-demo" to match your repo name in:
// - this file (for images: `${basePath}/filename`)
// - next.config.ts (for routing: basePath)
const basePath =
process.env.NODE_ENV === "production" ? "/gfbs3-portfolio-demo" : "";

Copilot uses AI. Check for mistakes.
export default function Home() {
const [menuOpen, setMenuOpen] = useState(false);

return (
<div className="min-h-screen bg-[#050510] text-cyan-50 font-mono selection:bg-fuchsia-500/30 selection:text-fuchsia-200 overflow-x-hidden">
{/* Grid Background */}
<div className="fixed inset-0 z-0 pointer-events-none">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1a1a2e_1px,transparent_1px),linear-gradient(to_bottom,#1a1a2e_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-20" />
<div className="absolute bottom-0 left-0 right-0 h-[50vh] bg-gradient-to-t from-fuchsia-900/20 to-transparent opacity-30" />
</div>
<div>

{/* Navigation */}
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#050510]/80 backdrop-blur-md border-b border-cyan-900/30">
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
<Link
href="/"
className="text-lg font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-fuchsia-400 hover:to-cyan-400 transition-all duration-300"
>
GITFOLIO
</Link>
<div className="flex gap-8 text-xs font-bold tracking-widest uppercase text-cyan-700/80">
<Link href="#work" className="hover:text-cyan-400 hover:drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] transition-all">PROJECTS</Link>
<Link href="#philosophy" className="hover:text-fuchsia-400 hover:drop-shadow-[0_0_5px_rgba(232,121,249,0.8)] transition-all">ABOUT</Link>
<Link href="#contact" className="hover:text-yellow-400 hover:drop-shadow-[0_0_5px_rgba(250,204,21,0.8)] transition-all">CONTACT</Link>
</div>
</div>
</nav>
<nav>
<Link href="/">GITFOLIO</Link>

Comment on lines +10 to 14
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PR description says this only adds a mobile menu while leaving the existing desktop navigation/content intact, but this file has been rewritten and removes most of the template (styling, sections, and components). Please rebase the mobile-nav changes onto the original page structure instead of replacing the page content.

Copilot uses AI. Check for mistakes.
<main className="relative z-10 max-w-6xl mx-auto px-6 pt-32 pb-20">
{/* Hero Section */}
<section className="py-20 md:py-32 space-y-8 relative">
<div className="space-y-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-cyan-500/30 bg-cyan-950/20 text-cyan-400 text-xs font-bold tracking-widest uppercase animate-pulse">
<span className="w-2 h-2 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,1)]" />
READY TO LAUNCH
</div>
<h1 className="text-5xl md:text-7xl font-bold tracking-tighter text-white leading-[1.1] drop-shadow-[0_0_15px_rgba(34,211,238,0.3)]">
BUILD YOUR <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-500 via-purple-500 to-cyan-500 animate-gradient-x">DEVELOPER PORTFOLIO</span> <br />
IN MINUTES
</h1>
</div>
<p className="text-lg md:text-xl text-cyan-100/70 max-w-2xl leading-relaxed font-light border-l-2 border-fuchsia-500/50 pl-6">
A beginner-friendly portfolio template that showcases your projects beautifully. Fork it, customize it, deploy it—no design skills required.
</p>
<div className="pt-8 flex gap-6">
<Link
href="#work"
className="group relative px-8 py-3 bg-cyan-950/30 border border-cyan-500/50 text-cyan-300 font-bold tracking-widest uppercase text-sm overflow-hidden hover:bg-cyan-900/50 transition-all hover:shadow-[0_0_20px_rgba(34,211,238,0.4)]"
>
<span className="relative z-10 flex items-center gap-2">
GET STARTED <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</span>
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent -translate-x-full group-hover:animate-shimmer" />
</Link>
</div>
</section>
<button onClick={() => setMenuOpen(!menuOpen)}>
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer the functional state update form for toggles (setMenuOpen((open) => !open)) to avoid any chance of stale state if updates are batched/concurrent.

Suggested change
<button onClick={() => setMenuOpen(!menuOpen)}>
<button onClick={() => setMenuOpen((open) => !open)}>

Copilot uses AI. Check for mistakes.
☰
</button>
Comment on lines +15 to +17
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hamburger toggle button needs accessible labeling/state. Please add an aria-label (or visually hidden text), wire up aria-expanded/aria-controls to the mobile menu container, and ensure focus styles are visible for keyboard users.

Copilot uses AI. Check for mistakes.

{/* Selected Work */}
<section id="work" className="py-20 space-y-12">
<div className="flex items-end justify-between border-b border-cyan-900/30 pb-4">
<h2 className="text-2xl font-bold tracking-widest text-fuchsia-400 drop-shadow-[0_0_8px_rgba(232,121,249,0.6)]">
// YOUR_PROJECTS
</h2>
<span className="text-xs font-mono text-cyan-700">Showcase what you&apos;ve built with style</span>
</div>
<div>
<Link href="#work">PROJECTS</Link>
<Link href="#about">ABOUT</Link>
<Link href="#contact">CONTACT</Link>
Comment on lines +20 to +22
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These in-page links point to #work, #about, and #contact, but the page no longer defines matching section ids (so the links won’t scroll anywhere). Please ensure the corresponding sections exist (and use the correct ids—this template previously used #philosophy for the About section).

Copilot uses AI. Check for mistakes.
</div>
Comment on lines +19 to +23
Copy link

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigation links are rendered unconditionally here, and then rendered again in the {menuOpen && ...} block below. This will duplicate links (especially on desktop) and doesn’t implement the described “mobile-only” collapsible menu—please split desktop vs mobile markup and use responsive classes (e.g., hide desktop links on small screens, show mobile panel only when open).

Copilot uses AI. Check for mistakes.

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Project 1 */}
<ProjectCard
title="PROJECT_ONE"
description="Your first amazing project goes here. Describe what problem it solves and the tech you used to build it."
tags={["REACT", "NEXTJS", "TAILWIND"]}
color="cyan"
href="#"
/>
{/* Project 2 */}
<ProjectCard
title="PROJECT_TWO"
description="Your second project showcase. Tell visitors what makes this project special and what you learned building it."
tags={["JAVASCRIPT", "API", "CSS"]}
color="fuchsia"
href="#"
/>
{/* Project 3 */}
<ProjectCard
title="PROJECT_THREE"
description="Another project to highlight your skills. Share the impact or results of this work."
tags={["TYPESCRIPT", "NODE", "EXPRESS"]}
color="purple"
href="#"
/>
{/* Project 4 */}
<ProjectCard
title="PROJECT_FOUR"
description="Keep building and adding to your portfolio. Each project tells part of your developer story."
tags={["PYTHON", "DJANGO", "POSTGRESQL"]}
color="yellow"
href="#"
/>
{menuOpen && (
<div>
<Link href="#work">PROJECTS</Link>
<Link href="#about">ABOUT</Link>
<Link href="#contact">CONTACT</Link>
</div>
</section>
)}
</nav>

{/* Philosophy / Approach */}
<section id="philosophy" className="py-20 grid md:grid-cols-12 gap-12 border-t border-cyan-900/30">
<div className="md:col-span-4 space-y-8">
<h2 className="text-2xl font-bold tracking-widest text-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.6)]">
{"// ABOUT_ME"}
</h2>

{/* Profile Image - Replace src with your image in /public */}
<div className="relative w-full aspect-[4/5] border border-cyan-500/30 rounded-sm overflow-hidden bg-cyan-950/30 group">
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,transparent_0%,rgba(5,5,16,0.8)_100%)] z-10" />
{/* Scanline effect */}
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(34,211,238,0.05)_1px,transparent_1px)] bg-[size:100%_4px] z-20 pointer-events-none" />

<Image
src={`${basePath}/me.png`}
alt="Profile"
fill
className="object-cover z-0 opacity-60 group-hover:opacity-100 transition-all duration-500 grayscale group-hover:grayscale-0"
/>
</div>
</div>
<div className="md:col-span-8 space-y-8 text-cyan-100/80 leading-relaxed font-light">
<p>
Every developer has a unique journey. Share yours here—whether you&apos;re self-taught, a bootcamp grad, or transitioning careers. <strong className="text-fuchsia-400 font-bold">Your story matters.</strong> Talk about what drives you to code and the impact you want to make.
</p>
<div className="p-6 bg-cyan-950/20 border border-cyan-500/20 rounded-sm relative overflow-hidden">
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 via-fuchsia-500 to-cyan-500" />
<div className="grid grid-cols-2 gap-8 font-mono text-sm">
<div>
<h3 className="text-cyan-400 mb-4 tracking-widest uppercase text-xs border-b border-cyan-800 pb-2">STACK_TRACE</h3>
<ul className="space-y-2 text-cyan-200/70">
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> JavaScript / Python / TypeScript</li>
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> React / Next.js / Node.js</li>
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Git / GitHub / VS Code</li>
</ul>
</div>
<div>
<h3 className="text-cyan-400 mb-4 tracking-widest uppercase text-xs border-b border-cyan-800 pb-2">PROTOCOLS</h3>
<ul className="space-y-2 text-cyan-200/70">
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Always learning</li>
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Ship &gt; Perfect</li>
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Open source contributor</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<main>
<h1>
BUILD YOUR <br />
<span>DEVELOPER PORTFOLIO</span>
</h1>

{/* Contact */}
<section id="contact" className="py-20 border-t border-cyan-900/30">
<div className="max-w-3xl mx-auto text-center space-y-8">
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">
READY TO <span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500">LAUNCH?</span>
</h2>
<p className="text-cyan-200/60 text-lg">
Fork this template on GitHub and make it yours. Update the content, add your projects, and deploy to GitHub Pages in under 30 minutes.
</p>
<div className="flex flex-col items-center gap-6">
<a
href="https://github.com/ladykerr/gfbs3-portfolio-demo"
className="px-10 py-4 bg-fuchsia-600 text-white font-bold tracking-widest uppercase text-sm hover:bg-fuchsia-500 transition-all hover:shadow-[0_0_30px_rgba(232,121,249,0.6)] hover:scale-105 duration-300 clip-path-polygon"
>
FORK ON GITHUB
</a>
<div className="flex items-center gap-8 pt-4">
<SocialLink href="https://github.com" label="GITHUB" />
<SocialLink href="https://linkedin.com" label="LINKEDIN" />
<SocialLink href="https://twitter.com" label="TWITTER" />
</div>
</div>
</div>
</section>
<p>A beginner-friendly portfolio template.</p>

<Link href="#work">GET STARTED</Link>
</main>

<footer className="py-8 text-center text-xs font-mono text-cyan-900/50 border-t border-cyan-900/20">
<p>Made with ❤️ by <a href="https://gh.io/gfb" target="_blank" rel="noopener noreferrer" className="text-cyan-700 hover:text-cyan-400 hover:drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] transition-all">GitHub for Beginners</a> and <a href="https://gh.io/gfb-copilot" target="_blank" rel="noopener noreferrer" className="text-cyan-700 hover:text-cyan-400 hover:drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] transition-all">GitHub Copilot</a></p>
<footer>
Made with ❤️ by GitHub for Beginners
</footer>
</div>
);
}

function ProjectCard({ title, description, tags, color, href }: { title: string, description: string, tags: string[], color: "cyan" | "fuchsia" | "purple" | "yellow", href: string }) {
// Valid color options for the card styling
const validColors = ["cyan", "fuchsia", "purple", "yellow"] as const;

// Runtime validation: default to "cyan" if an invalid color is provided
const safeColor = validColors.includes(color) ? color : "cyan";

const colorClasses = {
cyan: "group-hover:border-cyan-500/50 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]",
fuchsia: "group-hover:border-fuchsia-500/50 group-hover:shadow-[0_0_20px_rgba(232,121,249,0.2)]",
purple: "group-hover:border-purple-500/50 group-hover:shadow-[0_0_20px_rgba(168,85,247,0.2)]",
yellow: "group-hover:border-yellow-500/50 group-hover:shadow-[0_0_20px_rgba(234,179,8,0.2)]",
};

const textColors = {
cyan: "group-hover:text-cyan-400",
fuchsia: "group-hover:text-fuchsia-400",
purple: "group-hover:text-purple-400",
yellow: "group-hover:text-yellow-400",
};

return (
<Link href={href} className={`group block space-y-4 p-6 bg-[#0a0a1a] border border-cyan-900/30 transition-all duration-300 ${colorClasses[safeColor]}`}>
<div className="flex justify-between items-start">
<h3 className={`text-xl font-bold text-white tracking-wider transition-colors ${textColors[safeColor]}`}>
{title}
</h3>
<ArrowUpRightIcon className={`w-5 h-5 text-cyan-700 transition-all group-hover:translate-x-1 group-hover:-translate-y-1 ${textColors[safeColor]}`} />
</div>
<p className="text-sm text-cyan-100/60 leading-relaxed font-light border-l border-cyan-900/50 pl-4">
{description}
</p>
<div className="flex gap-2 pt-2">
{tags.map(tag => (
<span key={tag} className="text-[10px] uppercase tracking-widest font-bold text-cyan-700 bg-cyan-950/30 px-2 py-1 border border-cyan-900/30 group-hover:border-cyan-500/30 group-hover:text-cyan-300 transition-colors">
{tag}
</span>
))}
</div>
</Link>
);
}

function SocialLink({ href, label }: { href: string, label: string }) {
return (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
className="text-xs font-bold tracking-widest text-cyan-700 hover:text-cyan-400 hover:drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] transition-all"
>
{label}
</a>
</div>
);
}

// Simple Icons
function ArrowRightIcon({ className }: { className?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
<path d="M5 12h14" />
<path d="m12 5 7 7-7 7" />
</svg>
)
}

function ArrowUpRightIcon({ className }: { className?: string }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
<path d="M7 17L17 7" />
<path d="M7 7h10v10" />
</svg>
)
}
}
Loading