Use when building modern developer portfolios - full-stack portfolio template with dark mode, animations, and professional sections
This skill provides a modern, feature-rich developer portfolio template built with Next.js, featuring dark mode, smooth animations, and comprehensive sections for showcasing skills and projects.
Use this skill when:
| Feature | Description |
|---|---|
| Dark/Light Mode | Theme toggle with persistence |
| Smooth Animations | Framer Motion transitions |
| Responsive Design | Mobile, tablet, desktop optimized |
| Modern UI | Clean, professional aesthetic |
| Interactive Elements | Hover effects, transitions |
| Layer | Technology |
|---|---|
| Framework | Next.js 14+ |
| Language | TypeScript |
| Styling | Tailwind CSS |
| Animations | Framer Motion |
| Icons | React Icons |
| Deployment | Vercel |
developer-portfolio/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/
│ ├── Hero.tsx # Hero section
│ ├── Experience.tsx # Work timeline
│ ├── Skills.tsx # Skills grid
│ ├── Projects.tsx # Project showcase
│ ├── Blog.tsx # Blog integration
│ └── Contact.tsx # Contact form
├── data/
│ └── portfolio.ts # Personal data
├── public/ # Static assets
└── tailwind.config.ts # Tailwind configuration
# Clone the repository
cd developer-portfolio-said
# Install dependencies
npm install
# Run development server
npm run dev
Edit data/portfolio.ts with your information:
export const portfolio = {
name: "Your Name",
role: "Full Stack Developer",
description: "Passionate about building amazing software...",
avatar: "/profile.png",
experience: [
{
company: "Company Name",
position: "Software Engineer",
duration: "2023 - Present",
description: "Built scalable applications..."
}
],
skills: [
{ name: "React", icon: <FaReact /> },
{ name: "TypeScript", icon: <SiTypescript /> },
{ name: "Node.js", icon: <SiNodedotjs /> }
],
projects: [
{
title: "Project Name",
description: "Project description",
techStack: ["React", "Next.js", "Tailwind"],
github: "https://github.com/...",
live: "https://..."
}
],
social: {
github: "https://github.com/yourusername",
linkedin: "https://linkedin.com/in/yourusername",
twitter: "https://twitter.com/yourusername"
}
};
// tailwind.config.ts
export default {
theme: {
extend: {
colors: {
primary: {
light: '#your-color',
dark: '#your-dark-color'
}
}
}
}
}
# Build for production
npm run build
# Deploy to Vercel
vercel
When helping build portfolios:
developer-folio - Alternative React portfolioportfolio-tejas1996p - Vanilla JS portfoliogsap-animations-website - Advanced animationsC:\Users\user\.qwen\skills\developer-portfolio-said