Skip to content

Commit c33e824

Browse files
ARCHILODHAARCHILODHA
committed
Add mobile navigation menu for small screen
1 parent e1f31b7 commit c33e824

File tree

2 files changed

+38
-254
lines changed

2 files changed

+38
-254
lines changed

‎app/globals.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
@import "tailwindcss";
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
24

35
:root {
46
--background: #ffffff;
57
--foreground: #171717;
68
}
79

8-
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
13-
}
14-
1510
@media (prefers-color-scheme: dark) {
1611
:root {
1712
--background: #0a0a0a;

‎app/page.tsx‎

Lines changed: 35 additions & 246 deletions
Original file line numberDiff line numberDiff line change
@@ -1,262 +1,51 @@
1-
import Image from "next/image";
2-
import Link from "next/link";
1+
"use client";
32

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

66
export default function Home() {
7+
const [menuOpen, setMenuOpen] = useState(false);
8+
79
return (
8-
<div className="min-h-screen bg-[#050510] text-cyan-50 font-mono selection:bg-fuchsia-500/30 selection:text-fuchsia-200 overflow-x-hidden">
9-
{/* Grid Background */}
10-
<div className="fixed inset-0 z-0 pointer-events-none">
11-
<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" />
12-
<div className="absolute bottom-0 left-0 right-0 h-[50vh] bg-gradient-to-t from-fuchsia-900/20 to-transparent opacity-30" />
13-
</div>
10+
<div>
1411

15-
{/* Navigation */}
16-
<nav className="fixed top-0 left-0 right-0 z-50 bg-[#050510]/80 backdrop-blur-md border-b border-cyan-900/30">
17-
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
18-
<Link
19-
href="/"
20-
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"
21-
>
22-
GITFOLIO
23-
</Link>
24-
<div className="flex gap-8 text-xs font-bold tracking-widest uppercase text-cyan-700/80">
25-
<Link href="#work" className="hover:text-cyan-400 hover:drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] transition-all">PROJECTS</Link>
26-
<Link href="#philosophy" className="hover:text-fuchsia-400 hover:drop-shadow-[0_0_5px_rgba(232,121,249,0.8)] transition-all">ABOUT</Link>
27-
<Link href="#contact" className="hover:text-yellow-400 hover:drop-shadow-[0_0_5px_rgba(250,204,21,0.8)] transition-all">CONTACT</Link>
28-
</div>
29-
</div>
30-
</nav>
12+
<nav>
13+
<Link href="/">GITFOLIO</Link>
3114

32-
<main className="relative z-10 max-w-6xl mx-auto px-6 pt-32 pb-20">
33-
{/* Hero Section */}
34-
<section className="py-20 md:py-32 space-y-8 relative">
35-
<div className="space-y-2">
36-
<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">
37-
<span className="w-2 h-2 rounded-full bg-cyan-400 shadow-[0_0_10px_rgba(34,211,238,1)]" />
38-
READY TO LAUNCH
39-
</div>
40-
<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)]">
41-
BUILD YOUR <br />
42-
<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 />
43-
IN MINUTES
44-
</h1>
45-
</div>
46-
<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">
47-
A beginner-friendly portfolio template that showcases your projects beautifully. Fork it, customize it, deploy it—no design skills required.
48-
</p>
49-
<div className="pt-8 flex gap-6">
50-
<Link
51-
href="#work"
52-
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)]"
53-
>
54-
<span className="relative z-10 flex items-center gap-2">
55-
GET STARTED <ArrowRightIcon className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
56-
</span>
57-
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/10 to-transparent -translate-x-full group-hover:animate-shimmer" />
58-
</Link>
59-
</div>
60-
</section>
15+
<button onClick={() => setMenuOpen(!menuOpen)}>
16+
☰
17+
</button>
6118

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

71-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
72-
{/* Project 1 */}
73-
<ProjectCard
74-
title="PROJECT_ONE"
75-
description="Your first amazing project goes here. Describe what problem it solves and the tech you used to build it."
76-
tags={["REACT", "NEXTJS", "TAILWIND"]}
77-
color="cyan"
78-
href="#"
79-
/>
80-
{/* Project 2 */}
81-
<ProjectCard
82-
title="PROJECT_TWO"
83-
description="Your second project showcase. Tell visitors what makes this project special and what you learned building it."
84-
tags={["JAVASCRIPT", "API", "CSS"]}
85-
color="fuchsia"
86-
href="#"
87-
/>
88-
{/* Project 3 */}
89-
<ProjectCard
90-
title="PROJECT_THREE"
91-
description="Another project to highlight your skills. Share the impact or results of this work."
92-
tags={["TYPESCRIPT", "NODE", "EXPRESS"]}
93-
color="purple"
94-
href="#"
95-
/>
96-
{/* Project 4 */}
97-
<ProjectCard
98-
title="PROJECT_FOUR"
99-
description="Keep building and adding to your portfolio. Each project tells part of your developer story."
100-
tags={["PYTHON", "DJANGO", "POSTGRESQL"]}
101-
color="yellow"
102-
href="#"
103-
/>
25+
{menuOpen && (
26+
<div>
27+
<Link href="#work">PROJECTS</Link>
28+
<Link href="#about">ABOUT</Link>
29+
<Link href="#contact">CONTACT</Link>
10430
</div>
105-
</section>
31+
)}
32+
</nav>
10633

107-
{/* Philosophy / Approach */}
108-
<section id="philosophy" className="py-20 grid md:grid-cols-12 gap-12 border-t border-cyan-900/30">
109-
<div className="md:col-span-4 space-y-8">
110-
<h2 className="text-2xl font-bold tracking-widest text-cyan-400 drop-shadow-[0_0_8px_rgba(34,211,238,0.6)]">
111-
{"// ABOUT_ME"}
112-
</h2>
113-
114-
{/* Profile Image - Replace src with your image in /public */}
115-
<div className="relative w-full aspect-[4/5] border border-cyan-500/30 rounded-sm overflow-hidden bg-cyan-950/30 group">
116-
<div className="absolute inset-0 bg-[linear-gradient(to_bottom,transparent_0%,rgba(5,5,16,0.8)_100%)] z-10" />
117-
{/* Scanline effect */}
118-
<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" />
119-
120-
<Image
121-
src={`${basePath}/me.png`}
122-
alt="Profile"
123-
fill
124-
className="object-cover z-0 opacity-60 group-hover:opacity-100 transition-all duration-500 grayscale group-hover:grayscale-0"
125-
/>
126-
</div>
127-
</div>
128-
<div className="md:col-span-8 space-y-8 text-cyan-100/80 leading-relaxed font-light">
129-
<p>
130-
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.
131-
</p>
132-
<div className="p-6 bg-cyan-950/20 border border-cyan-500/20 rounded-sm relative overflow-hidden">
133-
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-500 via-fuchsia-500 to-cyan-500" />
134-
<div className="grid grid-cols-2 gap-8 font-mono text-sm">
135-
<div>
136-
<h3 className="text-cyan-400 mb-4 tracking-widest uppercase text-xs border-b border-cyan-800 pb-2">STACK_TRACE</h3>
137-
<ul className="space-y-2 text-cyan-200/70">
138-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> JavaScript / Python / TypeScript</li>
139-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> React / Next.js / Node.js</li>
140-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Git / GitHub / VS Code</li>
141-
</ul>
142-
</div>
143-
<div>
144-
<h3 className="text-cyan-400 mb-4 tracking-widest uppercase text-xs border-b border-cyan-800 pb-2">PROTOCOLS</h3>
145-
<ul className="space-y-2 text-cyan-200/70">
146-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Always learning</li>
147-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Ship &gt; Perfect</li>
148-
<li className="flex items-center gap-2"><span className="text-fuchsia-500">›</span> Open source contributor</li>
149-
</ul>
150-
</div>
151-
</div>
152-
</div>
153-
</div>
154-
</section>
34+
<main>
35+
<h1>
36+
BUILD YOUR <br />
37+
<span>DEVELOPER PORTFOLIO</span>
38+
</h1>
15539

156-
{/* Contact */}
157-
<section id="contact" className="py-20 border-t border-cyan-900/30">
158-
<div className="max-w-3xl mx-auto text-center space-y-8">
159-
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">
160-
READY TO <span className="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-500">LAUNCH?</span>
161-
</h2>
162-
<p className="text-cyan-200/60 text-lg">
163-
Fork this template on GitHub and make it yours. Update the content, add your projects, and deploy to GitHub Pages in under 30 minutes.
164-
</p>
165-
<div className="flex flex-col items-center gap-6">
166-
<a
167-
href="https://github.com/ladykerr/gfbs3-portfolio-demo"
168-
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"
169-
>
170-
FORK ON GITHUB
171-
</a>
172-
<div className="flex items-center gap-8 pt-4">
173-
<SocialLink href="https://github.com" label="GITHUB" />
174-
<SocialLink href="https://linkedin.com" label="LINKEDIN" />
175-
<SocialLink href="https://twitter.com" label="TWITTER" />
176-
</div>
177-
</div>
178-
</div>
179-
</section>
40+
<p>A beginner-friendly portfolio template.</p>
41+
42+
<Link href="#work">GET STARTED</Link>
18043
</main>
18144

182-
<footer className="py-8 text-center text-xs font-mono text-cyan-900/50 border-t border-cyan-900/20">
183-
<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>
45+
<footer>
46+
Made with ❤️ by GitHub for Beginners
18447
</footer>
185-
</div>
186-
);
187-
}
188-
189-
function ProjectCard({ title, description, tags, color, href }: { title: string, description: string, tags: string[], color: "cyan" | "fuchsia" | "purple" | "yellow", href: string }) {
190-
// Valid color options for the card styling
191-
const validColors = ["cyan", "fuchsia", "purple", "yellow"] as const;
192-
193-
// Runtime validation: default to "cyan" if an invalid color is provided
194-
const safeColor = validColors.includes(color) ? color : "cyan";
195-
196-
const colorClasses = {
197-
cyan: "group-hover:border-cyan-500/50 group-hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]",
198-
fuchsia: "group-hover:border-fuchsia-500/50 group-hover:shadow-[0_0_20px_rgba(232,121,249,0.2)]",
199-
purple: "group-hover:border-purple-500/50 group-hover:shadow-[0_0_20px_rgba(168,85,247,0.2)]",
200-
yellow: "group-hover:border-yellow-500/50 group-hover:shadow-[0_0_20px_rgba(234,179,8,0.2)]",
201-
};
202-
203-
const textColors = {
204-
cyan: "group-hover:text-cyan-400",
205-
fuchsia: "group-hover:text-fuchsia-400",
206-
purple: "group-hover:text-purple-400",
207-
yellow: "group-hover:text-yellow-400",
208-
};
209-
210-
return (
211-
<Link href={href} className={`group block space-y-4 p-6 bg-[#0a0a1a] border border-cyan-900/30 transition-all duration-300 ${colorClasses[safeColor]}`}>
212-
<div className="flex justify-between items-start">
213-
<h3 className={`text-xl font-bold text-white tracking-wider transition-colors ${textColors[safeColor]}`}>
214-
{title}
215-
</h3>
216-
<ArrowUpRightIcon className={`w-5 h-5 text-cyan-700 transition-all group-hover:translate-x-1 group-hover:-translate-y-1 ${textColors[safeColor]}`} />
217-
</div>
218-
<p className="text-sm text-cyan-100/60 leading-relaxed font-light border-l border-cyan-900/50 pl-4">
219-
{description}
220-
</p>
221-
<div className="flex gap-2 pt-2">
222-
{tags.map(tag => (
223-
<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">
224-
{tag}
225-
</span>
226-
))}
227-
</div>
228-
</Link>
229-
);
230-
}
23148

232-
function SocialLink({ href, label }: { href: string, label: string }) {
233-
return (
234-
<a
235-
href={href}
236-
target="_blank"
237-
rel="noopener noreferrer"
238-
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"
239-
>
240-
{label}
241-
</a>
49+
</div>
24250
);
243-
}
244-
245-
// Simple Icons
246-
function ArrowRightIcon({ className }: { className?: string }) {
247-
return (
248-
<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}>
249-
<path d="M5 12h14" />
250-
<path d="m12 5 7 7-7 7" />
251-
</svg>
252-
)
253-
}
254-
255-
function ArrowUpRightIcon({ className }: { className?: string }) {
256-
return (
257-
<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}>
258-
<path d="M7 17L17 7" />
259-
<path d="M7 7h10v10" />
260-
</svg>
261-
)
262-
}
51+
}

0 commit comments

Comments
 (0)