Portfolio Website - Next.js

A modern, responsive portfolio website built with Next.js, TypeScript, Tailwind CSS, and CSS Modules.

Project Structure

checkpoint-react-portfolio/
├── app/
│   ├── components/           # Reusable components
│   │   ├── Navigation.tsx     # Navigation bar with links
│   │   ├── Footer.tsx         # Footer with social links
│   │   └── ProjectCard.tsx    # Project card component
│   ├── styles/                # CSS Modules for styling
│   │   ├── Navigation.module.css
│   │   ├── Footer.module.css
│   │   ├── ProjectCard.module.css
│   │   ├── Home.module.css
│   │   ├── About.module.css
│   │   ├── Projects.module.css
│   │   └── Contact.module.css
│   ├── about/
│   │   └── page.tsx           # About page
│   ├── projects/
│   │   └── page.tsx           # Projects showcase page
│   ├── contact/
│   │   └── page.tsx           # Contact form page
│   ├── layout.tsx             # Root layout
│   ├── page.tsx               # Home page
│   └── globals.css            # Global styles
├── public/
│   └── images/                # Image assets
│       ├── profile-placeholder.jpg
│       ├── about-placeholder.jpg
│       ├── project-1-placeholder.jpg
│       ├── project-2-placeholder.jpg
│       ├── project-3-placeholder.jpg
│       └── project-4-placeholder.jpg
├── package.json
├── tsconfig.json
├── next.config.ts
└── tailwind.config.ts

Features

• Next.js 14+: Modern React framework with App Router
• TypeScript: Type-safe code with full TypeScript support
• Tailwind CSS: Utility-first CSS framework for rapid UI development
• Responsive Design: Mobile-first approach with responsive breakpoints
• CSS Modules: Scoped styling to prevent CSS conflicts
• Image Optimization: Next.js Image component for optimal performance
• File-Based Routing: Multiple pages using Next.js routing system
  • Home (/)
  • About (/about)
  • Projects (/projects)
  • Contact (/contact)

Pages

Home (/)

• Hero section with welcome message and call-to-action buttons
• Skills and technologies showcase
• Links to projects and contact page

About (/about)

• Personal introduction and journey
• Skills and experience details
• Profile image and biography

Projects (/projects)

• Grid layout showcasing your projects
• Project cards with images, descriptions, and technologies
• Links to project repositories or live demos

Contact (/contact)

• Contact form with validation
• Contact information (email, phone, location)
• Social media links
• Form submission handling

Components

Navigation

• Sticky navigation bar with links to all pages
• Logo/brand name
• Responsive mobile menu support

Footer

• Copyright information
• Social media links
• Dark background styling

ProjectCard

• Reusable component for displaying projects
• Image with hover effect
• Technologies badges
• External project links

Styling Approach

The project uses a combination of:

• CSS Modules: For component-specific styling (scoped)
• Tailwind CSS: For utility classes (available globally)
• Custom CSS: For page and component styling

All CSS is organized in the app/styles/ directory with a naming convention matching the component/page names.

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn installed

Installation

1. Install dependencies (already done):

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Customization Guide

1. Update Personal Information

Home Page - Edit app/page.tsx:

• Change the title and subtitle
• Update skills section with your actual skills

About Page - Edit app/about/page.tsx:

• Replace the biography text
• Update your journey and achievements

Contact Page - Edit app/contact/page.tsx:

• Update email address
• Add your phone number
• Change location
• Update social media links

2. Replace Placeholder Images

Replace images in public/images/:

• profile-placeholder.jpg - Your profile picture
• about-placeholder.jpg - About page image
• project-*.jpg - Project images

Images should be in a common format (JPG, PNG, WebP).

3. Update Projects

Edit the projects array in app/projects/page.tsx:

const projects = [
	{
		id: 1,
		title: "Your Project Title",
		description: "Project description",
		image: "/images/your-image.jpg",
		technologies: ["Tech1", "Tech2"],
		link: "https://github.com/your-repo",
	},
	// Add more projects...
];

4. Customize Colors

Edit tailwind.config.ts for theme colors, or modify CSS files:

• Primary color: #0070f3 (blue)
• Dark text: #1a1a1a
• Light text: #666
• Backgrounds: #f5f5f5, white

5. Update Navigation Links

Edit app/components/Navigation.tsx to add or modify navigation links.

Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Go to vercel.com
3. Import your repository
4. Click "Deploy"

Deploy to Other Platforms

The project can be deployed to any platform supporting Next.js:

• Netlify
• AWS Amplify
• DigitalOcean
• Heroku

Build for production:

npm run build
npm run start

Build & Development Commands

# Development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run ESLint
npm run lint

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Features

• Image optimization with Next.js Image component
• CSS-in-JS with Tailwind CSS for smaller bundle size
• Server-side rendering for SEO optimization
• Responsive design for all device sizes
• Optimized font loading

SEO Optimization

The site includes:

• Semantic HTML structure
• Meta tags (customizable in layout.tsx)
• Image alt text
• Responsive design (mobile-friendly)
• Fast load times

Future Enhancements

Consider adding:

• Dark mode toggle
• Blog section with dynamic content
• Email integration for contact form
• Project filtering by technology
• Animations and transitions
• Analytics integration
• Search functionality

License

This project is open source and available under the MIT License.

Support

For questions or support, reach out through the contact form on the website or check the Next.js documentation.

---

Happy coding! 🚀