A modern, responsive personal portfolio website built with Next.js 14, TypeScript, and Tailwind CSS v4.
- π Modern design with clean typography
- π Dark/light theme toggle
- π± Fully responsive design
- π MDX-powered blog articles
- β‘ Fast performance with Next.js 14
- π¨ Tailwind CSS v4 for styling
- π RSS feed generation
- π SEO optimized
- βΏ Accessibility focused
-
Install dependencies:
npm install
-
Set up environment:
cp .env.example .env.local
Update
NEXT_PUBLIC_SITE_URLin.env.local -
Start development server:
npm run dev
-
Open your browser: Visit http://localhost:3000
- Update
src/app/layout.tsx- Site title and description - Update
src/app/about/page.tsx- Your personal bio - Replace images in
src/images/with your photos
- Edit
src/app/projects/page.tsx- Add your real projects - Add project logos to
src/images/logos/
- Create new MDX files in
src/app/articles/[slug]/page.mdx - Follow the existing format with frontmatter metadata
- Update social links in
src/app/about/page.tsx - Update links in home page components
- Update email addresses throughout the site
- Customize the contact form in
src/app/contact/page.tsx
src/app/
βββ about/ # About page
βββ articles/ # Blog articles (MDX)
βββ contact/ # Contact form
βββ projects/ # Portfolio projects
βββ speaking/ # Speaking engagements
βββ uses/ # Tools and equipment
This site template is a commercial product and is licensed under the Tailwind Plus license.
To learn more about the technologies used in this site template, see the following resources:
- Tailwind CSS - the official Tailwind CSS documentation
- Next.js - the official Next.js documentation
- Headless UI - the official Headless UI documentation
- MDX - the MDX documentation