dillion-portfolio
Minimalist developer portfolio with blog, work timeline, and project showcase using Next.js 14.
When & Why to Use This Skill
This Claude skill provides a high-performance, minimalist developer portfolio template built with Next.js 14 and React 18. It streamlines the creation of a professional online presence by offering a pre-configured environment featuring an MDX-based blog, an interactive work experience timeline, and a project showcase. Optimized for SEO and modern web standards, it leverages Tailwind CSS and shadcn/ui for sleek aesthetics and Framer Motion for smooth animations, ensuring a production-ready site that can be rapidly deployed to Vercel or Netlify.
Use Cases
- Personal Branding: Quickly launch a professional portfolio to showcase technical skills and attract recruiters or clients.
- Technical Blogging: Establish a personal blog using MDX to share coding tutorials and insights with built-in syntax highlighting support.
- Project Portfolio: Create a visually organized gallery to document and display GitHub projects and open-source contributions.
- Career Documentation: Maintain an interactive and chronological timeline of work history and educational milestones.
- Rapid Prototyping: Use as a modern boilerplate for Next.js 14 projects requiring a clean UI and content management capabilities.
| name | dillion-portfolio |
|---|---|
| description | Minimalist developer portfolio with blog, work timeline, and project showcase using Next.js 14. |
Dillion Portfolio
A minimalist developer portfolio with blog, work experience timeline, and project showcase.
Tech Stack
- Framework: Next.js 14
- React: React 18
- Animation: Framer Motion
- Styling: Tailwind CSS, shadcn/ui
- Content: MDX for blog
- Package Manager: pnpm
- Dev Port: 3000
Setup
1. Clone the Template
git clone --depth 1 https://github.com/Eng0AI/portfolio-template.git .
If the directory is not empty:
git clone --depth 1 https://github.com/Eng0AI/portfolio-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template
2. Remove Git History (Optional)
rm -rf .git
git init
3. Install Dependencies
pnpm install
Build
pnpm build
Deploy
Vercel (Recommended)
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKEN
Netlify
netlify deploy --prod --dir=.next
Customization
Edit content in the src/data/ directory:
resume.tsx- Personal info, work experience, education, projects
Portfolio content is stored in content/ directory as MDX files.
Development
pnpm dev
Opens at http://localhost:3000