- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Fonts: Geist Sans & Geist Mono
- Development: ESLint for code quality
- Clone the repository:
git clone <repository-url>
cd my-portfolio- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 to view the website.
src/
├── app/
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
└── components/
├── Navbar.tsx # Navigation component
├── HeroSection.tsx # Hero/intro section
├── AboutSection.tsx # About me section
├── ProjectsSection.tsx # Projects showcase
├── ContactSection.tsx # Contact form
└── Footer.tsx # Footer component
The portfolio uses a consistent color scheme:
- Primary:
#06b6d4(cyan-500) - Background:
#111827(gray-900) - Secondary Background:
#1f2937(gray-800) - Text:
#ffffff(white) and#9ca3af(gray-400)
To customize the content:
- Update personal information in
HeroSection.tsx - Modify projects in
ProjectsSection.tsx - Update skills and services in
AboutSection.tsx - Change contact information in
ContactSection.tsx
The portfolio is fully responsive with breakpoints:
- Mobile: Default (< 768px)
- Tablet:
md:(≥ 768px) - Desktop:
lg:(≥ 1024px
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.