Skip to content

Implement fully designed portfolio template #60

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

Merged
Josephat-S merged 1 commit into from
May 25, 2026
Merged

Implement fully designed portfolio template #60

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
132 changes: 132 additions & 0 deletions templates/portfolio/nextjs-monolith/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
192 changes: 192 additions & 0 deletions templates/portfolio/nextjs-monolith/app/contact/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading
Loading