From ab9d04fd84372bbb1f62258daf79f96a62264295 Mon Sep 17 00:00:00 2001 From: ebedi Date: Wed, 10 Jun 2026 12:55:40 +0200 Subject: [PATCH 1/2] refactor[templae/portfolio]:refactor design to portflio -variant Minimal Dark --design Minimal Clean --- .../portfolio/nextjs-monolith/.gitignore | 3 +- .../nextjs-monolith/app/about/page.tsx | 157 +++-------- .../nextjs-monolith/app/contact/page.tsx | 243 +++++------------- .../portfolio/nextjs-monolith/app/globals.css | 178 ++++--------- .../portfolio/nextjs-monolith/app/layout.tsx | 85 +++--- .../portfolio/nextjs-monolith/app/page.tsx | 179 ++----------- .../nextjs-monolith/app/projects/page.tsx | 158 ++++-------- .../nextjs-monolith/app/skills/page.tsx | 142 ++++------ 8 files changed, 306 insertions(+), 839 deletions(-) diff --git a/templates/portfolio/nextjs-monolith/.gitignore b/templates/portfolio/nextjs-monolith/.gitignore index 7ef8c73..4a524d3 100644 --- a/templates/portfolio/nextjs-monolith/.gitignore +++ b/templates/portfolio/nextjs-monolith/.gitignore @@ -2,4 +2,5 @@ node_modules .env # editos files -.vscode \ No newline at end of file +.vscode +.next \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/about/page.tsx b/templates/portfolio/nextjs-monolith/app/about/page.tsx index 6403daa..4d84d5c 100644 --- a/templates/portfolio/nextjs-monolith/app/about/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/about/page.tsx @@ -1,132 +1,51 @@ -import Footer from '../../components/Footer'; +import Link from 'next/link'; -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.', - }, -]; +export const metadata = { + title: 'About | {{projectName}}', + description: 'Learn more about {{projectName}}', +}; -const skills = [ - 'React', 'Next.js', 'TypeScript', 'Tailwind CSS', - 'Node.js', 'PostgreSQL', 'Git', 'Figma', -]; - -export default function AboutPage() { +export default function About() { return ( -
-
- {/* Hero / Intro */} -
- {/* Text */} -
-

About Me

-
-

- Hi there! I'm Alex Chen, a full-stack developer based in San Francisco - with over 5 years of experience building web applications. I'm passionate - about creating intuitive, performant digital experiences that make a real - difference in people's lives. -

-

- 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'm always exploring new technologies. -

-

- When I'm not coding, you'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. -

-
-
- - {/* Image Placeholder */} -
-
-
-
- AC -
-

Profile Photo

-
-
-
+
+
+ + {/* Header */} +
+

+ About Me. +

+
- {/* Experience Timeline */} -
-

Experience

- -
- {timeline.map((entry, index) => ( -
- {/* Dot */} -
- -
- - {entry.period} - -

- {entry.title} -

-

{entry.company}

-

- {entry.description} -

-
-
- ))} -
+ {/* Content */} +
+

+ I am a passionate builder and creator focusing on delivering high-quality digital experiences. + With a strong foundation in modern web technologies, I specialize in crafting fast, scalable, + and visually striking applications. +

+

+ My approach is rooted in simplicity and performance. I believe that the best design is invisible, + allowing the content and functionality to take center stage. +

- {/* Tech Stack */} -
-

- Tech Stack -

- -
- {skills.map((skill) => ( -
+

Core Stack

+
+ {['Next.js', 'React', 'TypeScript', 'Tailwind CSS', 'Node.js', 'PostgreSQL'].map((skill) => ( + -
- - {skill.charAt(0)} - -
- {skill} -
+ {skill} + ))}
-
- -
+
); -} +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/contact/page.tsx b/templates/portfolio/nextjs-monolith/app/contact/page.tsx index c672d4f..b9973bd 100644 --- a/templates/portfolio/nextjs-monolith/app/contact/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/contact/page.tsx @@ -1,192 +1,69 @@ -import Footer from '../../components/Footer'; +export const metadata = { + title: 'Contact | {{projectName}}', + description: 'Get in touch with {{projectName}}', +}; -export default function ContactPage() { +export default function Contact() { return ( -
-
-
-

Contact

-

- Have a question or want to work together? Drop me a message. -

+
+
+ + {/* Header */} +
+

+ Let's Connect. +

+

Have a project in mind or just want to chat?

+
-
- {/* Contact Form */} -
-
- {/* Name */} -
- - -
- - {/* Email */} -
- - -
- - {/* Subject */} -
- - -
- - {/* Message */} -
- - +
+ +
+
+ + {/* Direct Links */} + -
-
+
); -} +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/globals.css b/templates/portfolio/nextjs-monolith/app/globals.css index 1afd4c4..b14de89 100644 --- a/templates/portfolio/nextjs-monolith/app/globals.css +++ b/templates/portfolio/nextjs-monolith/app/globals.css @@ -2,133 +2,51 @@ @tailwind components; @tailwind utilities; -/* ===== Base Theme: Minimal Clean (Default) ===== */ -:root { - --bg-color: #ffffff; - --bg-secondary: #f9fafb; - --text-color: #111827; - --text-secondary: #6b7280; - --primary: #2563eb; - --primary-hover: #1d4ed8; - --border-color: #e5e7eb; - --card-bg: #ffffff; - --font-family: 'Inter', system-ui, sans-serif; - --radius: 0.5rem; -} - -/* ===== Glassmorphism Theme ===== */ -[data-theme="Glassmorphism"] { - --bg-color: #0f172a; - --bg-secondary: rgba(255, 255, 255, 0.05); - --text-color: #f1f5f9; - --text-secondary: #94a3b8; - --primary: #8b5cf6; - --primary-hover: #7c3aed; - --border-color: rgba(255, 255, 255, 0.1); - --card-bg: rgba(255, 255, 255, 0.08); - --font-family: 'Inter', system-ui, sans-serif; - --radius: 1rem; -} - -[data-theme="Glassmorphism"] .glass { - background: rgba(255, 255, 255, 0.08); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); -} - -/* ===== Dark Terminal Theme ===== */ -[data-theme="Dark Terminal"] { - --bg-color: #000000; - --bg-secondary: #0a0a0a; - --text-color: #3fb950; - --text-secondary: #8b949e; - --primary: #3fb950; - --primary-hover: #2ea043; - --border-color: #21262d; - --card-bg: #0d1117; - --font-family: 'JetBrains Mono', 'Fira Code', monospace; - --radius: 0.25rem; -} - - -/* ===== Brutalist Theme ===== */ -[data-theme="Brutalist"] { - --bg-color: #ffffff; - --bg-secondary: #f0f0f0; - --text-color: #000000; - --text-secondary: #333333; - --primary: #dc2626; - --primary-hover: #b91c1c; - --border-color: #000000; - --card-bg: #ffffff; - --font-family: 'Courier New', ui-monospace, monospace; - --radius: 0; -} - -/* ===== Soft Pastel Theme ===== */ -[data-theme="Soft Pastel"] { - --bg-color: #fdf4ff; - --bg-secondary: #f5f0ff; - --text-color: #3b1f5e; - --text-secondary: #7c5a9e; - --primary: #a855f7; - --primary-hover: #9333ea; - --border-color: #e9d5ff; - --card-bg: #ffffff; - --font-family: 'Inter', system-ui, sans-serif; - --radius: 1.5rem; -} - -/* ===== Corporate Blue Theme ===== */ -[data-theme="Corporate Blue"] { - --bg-color: #f8fafc; - --bg-secondary: #f1f5f9; - --text-color: #0f172a; - --text-secondary: #475569; - --primary: #1e40af; - --primary-hover: #1e3a8a; - --border-color: #cbd5e1; - --card-bg: #ffffff; - --font-family: 'Georgia', 'Times New Roman', serif; - --radius: 0.25rem; -} - -/* ===== Neon Cyberpunk Theme ===== */ -[data-theme="Neon Cyberpunk"] { - --bg-color: #0a0015; - --bg-secondary: #1a0030; - --text-color: #e0f2fe; - --text-secondary: #7dd3fc; - --primary: #f472b6; - --primary-hover: #ec4899; - --border-color: #581c87; - --card-bg: rgba(88, 28, 135, 0.2); - --font-family: 'Inter', system-ui, sans-serif; - --radius: 0.75rem; -} - -[data-theme="Neon Cyberpunk"] .neon-glow { - box-shadow: 0 0 10px rgba(244, 114, 182, 0.4), 0 0 20px rgba(244, 114, 182, 0.2); -} - -/* ===== Earth Tones Theme ===== */ -[data-theme="Earth Tones"] { - --bg-color: #faf7f2; - --bg-secondary: #f5efe6; - --text-color: #3d2c1e; - --text-secondary: #78614e; - --primary: #b45309; - --primary-hover: #92400e; - --border-color: #d6c4a8; - --card-bg: #fffdf8; - --font-family: 'Inter', system-ui, sans-serif; - --radius: 0.75rem; -} - -/* ===== Apply variables globally ===== */ -body { - background-color: var(--bg-color); - color: var(--text-color); - font-family: var(--font-family); -} +@layer base { + :root { + --background: #0a0a0a; + --foreground: #f5f5f5; + --muted: #a3a3a3; + --accent: #ffffff; + --border: #262626; + } + + body { + background-color: var(--background); + color: var(--foreground); + font-family: 'Inter', system-ui, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: 0; + padding: 0; + } + + ::selection { + background-color: var(--foreground); + color: var(--background); + } +} + +/* --- Simple Modern Animations --- */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(12px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@layer utilities { + .animate-fade-in { + opacity: 0; + animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; + } + + .delay-100 { animation-delay: 100ms; } + .delay-200 { animation-delay: 200ms; } + .delay-300 { animation-delay: 300ms; } + .delay-400 { animation-delay: 400ms; } +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/layout.tsx b/templates/portfolio/nextjs-monolith/app/layout.tsx index e77f3b2..1ab308e 100644 --- a/templates/portfolio/nextjs-monolith/app/layout.tsx +++ b/templates/portfolio/nextjs-monolith/app/layout.tsx @@ -1,44 +1,11 @@ -import type { Metadata } from 'next'; -import Link from 'next/link'; import './globals.css'; -import { navLinks } from '../lib/nav'; -import AnimationProvider from '../components/AnimationProvider'; -{{#if (eq design "Dark Terminal")}} -import { Terminal } from 'lucide-react'; -{{/if}} +import Link from 'next/link'; -export const metadata: Metadata = { +export const metadata = { title: '{{projectName}} - Portfolio', - description: 'A {{variant}} portfolio built with Opusify CLI.', + description: 'A modern portfolio generated by Opusify', }; -function Navbar() { - return ( -
- -
- ); -} - export default function RootLayout({ children, }: { @@ -46,12 +13,48 @@ export default function RootLayout({ }) { return ( - - - + + + {/* Minimalist Top Navigation */} +
+
+ + {/* Logo / Brand Name */} + + {{projectName}}. + + + {/* Navigation Links */} + + + {/* Mobile Menu Placeholder (Optional for later) */} +
+ + + + + +
+ +
+
+ + {/* Main Content Area */} +
{children} - +
+ + {/* Minimal Footer */} +
+

© {new Date().getFullYear()} {{projectName}}. All rights reserved.

+
+ ); -} +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/page.tsx b/templates/portfolio/nextjs-monolith/app/page.tsx index ab18076..f1b9b06 100644 --- a/templates/portfolio/nextjs-monolith/app/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/page.tsx @@ -1,171 +1,40 @@ 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 ( -
- {/* Hero Section */} -
- {/* Decorative gradient blob */} -
- -
-

- Hi, I'm Alex Chen -

-

- A full-stack developer building modern web experiences with the{' '} - {{variant}} aesthetic. - Welcome to {{projectName}}. +

+
+ + {/* Header Section with staggered fade-in animations */} +
+

+ Welcome to the portfolio of

-
- - View Projects - - - Contact Me - -
-
-
- - {/* About Preview Section */} -
-
-

About Me

-

- I specialize in building performant, accessible web applications - that delight users and solve real problems. +

+ {{projectName}} +

+

+ A modern {{variant}} focused on clean design, performance, and seamless user experiences.

-
-
-

5+

-

Years Experience

-
-
-

50+

-

Projects Completed

-
-
-

30+

-

Happy Clients

-
-
-
- - {/* Featured Projects Section */} -
-
-

Featured Projects

- + - View All Projects - - - + View Projects -
- -
- {featuredProjects.map((project) => ( - - ))} -
- -
- - View All Projects → - -
-
- - {/* Skills / Tech Stack Section */} -
-
-

Tech Stack

-

Technologies I work with daily

-
- -
- {skills.map((skill) => ( -
-
- - {skill.charAt(0)} - -
- {skill} -
- ))} -
-
- - {/* Contact CTA Section */} -
-
-

- Let's Work Together -

-

- Have a project in mind or want to collaborate? I'm always open to - discussing new opportunities and creative ideas. -

- - Get In Touch + About Me
-
-
+
); -} +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/projects/page.tsx b/templates/portfolio/nextjs-monolith/app/projects/page.tsx index 70c5a9d..d29783a 100644 --- a/templates/portfolio/nextjs-monolith/app/projects/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/projects/page.tsx @@ -1,136 +1,68 @@ import Link from 'next/link'; -import Footer from '../../components/Footer'; -const filters = ['All', 'Web App', 'Mobile', 'Design', 'Open Source']; +export const metadata = { + title: 'Projects | {{projectName}}', + description: 'Recent work and projects by {{projectName}}', +}; -const projects = [ +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: 'Project Alpha', + description: 'A high-performance web application built with Next.js and Tailwind CSS. Focuses on seamless user interactions.', + year: '2026' }, { - 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: 'Digital Platform', + description: 'An end-to-end e-commerce solution featuring real-time inventory management and secure payment processing.', + year: '2025' }, { - 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', - }, + title: 'Open Source CLI', + description: 'A command-line interface tool designed to automate scaffolding and improve developer productivity.', + year: '2025' + } ]; -export default function ProjectsPage() { +export default function Projects() { return ( -
-
- {/* Page Header */} -
-

All Projects

-

- A collection of projects I've built — from web apps to open source tools. -

-
- - {/* Filter Buttons */} -
- {filters.map((filter, index) => ( - - ))} +
+
+ + {/* Header */} +
+

+ Selected Work. +

+

A collection of recent projects and experiments.

+
{/* Projects Grid */} -
- {projects.map((project) => ( -
+ {PROJECTS.map((project, idx) => ( +
- {/* Image Placeholder */} -
-
- Project Preview -
-
- - {/* Content */} -
-

+
+

{project.title} -

-

- {project.description} -

- - {/* Tags */} -
- {project.tags.map((tag) => ( - - {tag} - - ))} -
- - {/* Link */} - - View Project - - - - +

+ {project.year} +
+

+ {project.description} +

+
+ + View Case Study → +
))}
-
-
+
); -} +} \ No newline at end of file diff --git a/templates/portfolio/nextjs-monolith/app/skills/page.tsx b/templates/portfolio/nextjs-monolith/app/skills/page.tsx index c8bbd94..d58c0c0 100644 --- a/templates/portfolio/nextjs-monolith/app/skills/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/skills/page.tsx @@ -1,111 +1,59 @@ -export default function SkillsPage() { - const categories = [ - { - title: 'Frontend', - skills: [ - { name: 'React', level: 95 }, - { name: 'Next.js', level: 90 }, - { name: 'TypeScript', level: 92 }, - { name: 'Tailwind CSS', level: 95 }, - { name: 'HTML/CSS', level: 98 }, - { name: 'Vue.js', level: 70 }, - ], - }, - { - title: 'Backend', - skills: [ - { name: 'Node.js', level: 88 }, - { name: 'PostgreSQL', level: 82 }, - { name: 'REST APIs', level: 90 }, - { name: 'GraphQL', level: 75 }, - { name: 'Prisma', level: 85 }, - { name: 'Redis', level: 70 }, - ], - }, - { - title: 'Tools & DevOps', - skills: [ - { name: 'Git', level: 92 }, - { name: 'Docker', level: 78 }, - { name: 'CI/CD', level: 80 }, - { name: 'Vercel', level: 90 }, - { name: 'AWS', level: 72 }, - { name: 'Linux', level: 75 }, - ], - }, - { - title: 'Design & Other', - skills: [ - { name: 'Figma', level: 85 }, - { name: 'UI/UX Design', level: 78 }, - { name: 'Accessibility', level: 82 }, - { name: 'Performance', level: 88 }, - { name: 'Testing', level: 80 }, - { name: 'Agile/Scrum', level: 85 }, - ], - }, - ]; +export const metadata = { + title: 'Skills | {{projectName}}', + description: 'Technical skills and expertise', +}; - const certifications = [ - { name: 'AWS Certified Cloud Practitioner', issuer: 'Amazon Web Services', year: '2023' }, - { name: 'Meta Frontend Developer Certificate', issuer: 'Meta / Coursera', year: '2022' }, - { name: 'Google UX Design Certificate', issuer: 'Google / Coursera', year: '2021' }, - ]; +const SKILL_CATEGORIES = [ + { + title: 'Frontend Development', + skills: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'Framer Motion'], + }, + { + title: 'Backend & Database', + skills: ['Node.js', 'Express', 'PostgreSQL', 'MongoDB', 'Neon', 'Drizzle ORM'], + }, + { + title: 'Tools & Infrastructure', + skills: ['Git', 'Docker', 'Linux / Ubuntu', 'GitHub Actions', 'Vercel'], + }, +]; +export default function Skills() { return ( -
-
-
-

Skills & Expertise

-

- A breakdown of my technical skills, tools, and proficiency levels built over 5+ years of professional development. -

+
+
+ + {/* Header */} +
+

+ Technical Arsenal. +

+

Tools and technologies I use to build digital products.

+
- {/* Skill Categories */} -
- {categories.map((category) => ( -
-

{category.title}

-
+ {/* Skills List */} +
+ {SKILL_CATEGORIES.map((category, idx) => ( +
+

+ {category.title} +

+
{category.skills.map((skill) => ( -
-
- {skill.name} - {skill.level}% -
-
-
-
-
+ + {skill} + ))}
))}
- {/* Certifications */} -
-

Certifications

-
- {certifications.map((cert) => ( -
-
- - - -
-

{cert.name}

-

{cert.issuer}

-

{cert.year}

-
- ))} -
-
-
+
); -} +} \ No newline at end of file From 4fe89d5574c2b0e63f4d2886ea5ba1eb80e5bf2b Mon Sep 17 00:00:00 2001 From: ebedi Date: Wed, 10 Jun 2026 14:21:59 +0200 Subject: [PATCH 2/2] refactor[template]:adde template code of before allow to customize --- .../nextjs-monolith/app/about/page.tsx | 157 ++++++++--- .../nextjs-monolith/app/contact/page.tsx | 243 +++++++++++++----- .../portfolio/nextjs-monolith/app/globals.css | 178 +++++++++---- .../portfolio/nextjs-monolith/app/layout.tsx | 85 +++--- .../portfolio/nextjs-monolith/app/page.tsx | 179 +++++++++++-- .../nextjs-monolith/app/projects/page.tsx | 158 ++++++++---- .../nextjs-monolith/app/skills/page.tsx | 142 ++++++---- templates/portfolio/vite-react/.gitignore | 3 +- 8 files changed, 840 insertions(+), 305 deletions(-) diff --git a/templates/portfolio/nextjs-monolith/app/about/page.tsx b/templates/portfolio/nextjs-monolith/app/about/page.tsx index 4d84d5c..6403daa 100644 --- a/templates/portfolio/nextjs-monolith/app/about/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/about/page.tsx @@ -1,51 +1,132 @@ -import Link from 'next/link'; +import Footer from '../../components/Footer'; -export const metadata = { - title: 'About | {{projectName}}', - description: 'Learn more about {{projectName}}', -}; +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.', + }, +]; -export default function About() { +const skills = [ + 'React', 'Next.js', 'TypeScript', 'Tailwind CSS', + 'Node.js', 'PostgreSQL', 'Git', 'Figma', +]; + +export default function AboutPage() { return ( -
-
- - {/* Header */} -
-

- About Me. -

-
+
+
+ {/* Hero / Intro */} +
+ {/* Text */} +
+

About Me

+
+

+ Hi there! I'm Alex Chen, a full-stack developer based in San Francisco + with over 5 years of experience building web applications. I'm passionate + about creating intuitive, performant digital experiences that make a real + difference in people's lives. +

+

+ 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'm always exploring new technologies. +

+

+ When I'm not coding, you'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. +

+
+
+ + {/* Image Placeholder */} +
+
+
+
+ AC +
+

Profile Photo

+
+
+
- {/* Content */} -
-

- I am a passionate builder and creator focusing on delivering high-quality digital experiences. - With a strong foundation in modern web technologies, I specialize in crafting fast, scalable, - and visually striking applications. -

-

- My approach is rooted in simplicity and performance. I believe that the best design is invisible, - allowing the content and functionality to take center stage. -

+ {/* Experience Timeline */} +
+

Experience

+ +
+ {timeline.map((entry, index) => ( +
+ {/* Dot */} +
+ +
+ + {entry.period} + +

+ {entry.title} +

+

{entry.company}

+

+ {entry.description} +

+
+
+ ))} +
- {/* Skills / Stack */} -
-

Core Stack

-
- {['Next.js', 'React', 'TypeScript', 'Tailwind CSS', 'Node.js', 'PostgreSQL'].map((skill) => ( - +

+ Tech Stack +

+ +
+ {skills.map((skill) => ( +
- {skill} - +
+ + {skill.charAt(0)} + +
+ {skill} +
))}
-
+
+ +
); -} \ No newline at end of file +} diff --git a/templates/portfolio/nextjs-monolith/app/contact/page.tsx b/templates/portfolio/nextjs-monolith/app/contact/page.tsx index b9973bd..c672d4f 100644 --- a/templates/portfolio/nextjs-monolith/app/contact/page.tsx +++ b/templates/portfolio/nextjs-monolith/app/contact/page.tsx @@ -1,69 +1,192 @@ -export const metadata = { - title: 'Contact | {{projectName}}', - description: 'Get in touch with {{projectName}}', -}; +import Footer from '../../components/Footer'; -export default function Contact() { +export default function ContactPage() { return ( -
-
- - {/* Header */} -
-

- Let's Connect. -

-

Have a project in mind or just want to chat?

-
+
+
+
+

Contact

+

+ Have a question or want to work together? Drop me a message. +

- {/* Contact Form */} -
-
-
- - -
-
- - -
-
- - -
- -
-
+
+ {/* Contact Form */} +
+
+ {/* Name */} +
+ + +
+ + {/* Email */} +
+ + +
+ + {/* Subject */} +
+ + +
+ + {/* Message */} +
+ +