Next.js Portfolio Site Documentation
1. Introduction This portfolio site is a personal platform to highlight your skills, projects, and achievements. It's built with Next.js 15, following modern web development best practices and using the App Router for smoother navigation and better server-side features. Features Dynamic Routing with the App Router: Enables efficient navigation and content organization. Server and Client Components: Optimizes performance by balancing server-side and client-side rendering. Tailwind CSS Styling: Ensures a consistent, responsive design with minimal effort. SEO Optimization: Uses the Metadata API to improve search engine visibility. Deployment Ready: Seamlessly deployable to platforms like Vercel for fast and reliable hosting. 2. Technologies Used - Framework: Next.js 15. - Styling: TailwindCSS. - State Management: React Context API (if applicable) and react hooks. - Version Control: Git & GitHub - Deployment: Vercel - Animation: Framer Motion (optional) 3. Project Structure This project is built on the standard Next.js 15 framework using an App Router-based layout. How to Set Up To get started, you can just install the latest version of Next.js by typing 'npm install' in your terminal in VS Code. Then clone the repository from the link provided. Open the cloned folder in VS Code and understand the files in the project structure described below: NextJs App router Project Structure ├── app/ │ ├── layout.tsx # Shared layout for all pages │ ├── page.tsx # Homepage │ ├── about/ # About section │ │ └── page.tsx │ ├── projects/ # Projects section │ │ └── page.tsx │ ├── contact/ # Contact form page │ │ └── page.tsx │ ├── global.css # Global CSS imports │ └── metadata.ts # SEO metadata ├── components/ # Shared UI components │ ├── Navbar.tsx │ ├── Footer.tsx │ ├── ProjectCard.tsx │ ├── Button.tsx │ └── … ├── public/ # Public assets like images and icons ├── styles/ # Additional stylesheets ├── utils/ # Utility functions ├── .gitignore # Ignored files for Git ├── package.json # Dependencies and scripts ├── next.config.js # Next.js configuration └── tsconfig.json # TypeScript configuration Edit the contents. Run your project by typing 'npm run dev' in your terminal. Type in this link in your browser 'http://localhost:3000/' and press Enter to view your project. 4. Setting Up The GitHub Repository Open your GitHub account and create a repository. Clone the repository and transfer the contents of the repo that was cloned earlier into it. To push your code to the repo, you can use file upload or the method below: 5. Deployment To launch your site, use Vercel. Here's a simple step-by-step process: Create an Account: Sign up on Vercel and connect your repository. Import and Deploy: Select your project and deploy your web application. Set Up Environment Variables: Configure any required environment variables for your app. Final Deployment: Complete the setup and watch your application go live! Make sure to add a ReadMe file to your repo.
1. Introduction
This portfolio site is a personal platform to highlight your skills, projects, and achievements. It's built with Next.js 15, following modern web development best practices and using the App Router for smoother navigation and better server-side features.
Features
Dynamic Routing with the App Router: Enables efficient navigation and content organization.
Server and Client Components: Optimizes performance by balancing server-side and client-side rendering.
Tailwind CSS Styling: Ensures a consistent, responsive design with minimal effort.
SEO Optimization: Uses the Metadata API to improve search engine visibility.
Deployment Ready: Seamlessly deployable to platforms like Vercel for fast and reliable hosting.
2. Technologies Used
- Framework: Next.js 15.
- Styling: TailwindCSS.
- State Management: React Context API (if applicable) and react hooks.
- Version Control: Git & GitHub
- Deployment: Vercel
- Animation: Framer Motion (optional)
3. Project Structure
This project is built on the standard Next.js 15 framework using an App Router-based layout.
How to Set Up
To get started, you can just install the latest version of Next.js by typing 'npm install' in your terminal in VS Code.
Then clone the repository from the link provided.
Open the cloned folder in VS Code and understand the files in the project structure described below:
NextJs App router Project Structure
├── app/
│ ├── layout.tsx # Shared layout for all pages
│ ├── page.tsx # Homepage
│ ├── about/ # About section
│ │ └── page.tsx
│ ├── projects/ # Projects section
│ │ └── page.tsx
│ ├── contact/ # Contact form page
│ │ └── page.tsx
│ ├── global.css # Global CSS imports
│ └── metadata.ts # SEO metadata
├── components/ # Shared UI components
│ ├── Navbar.tsx
│ ├── Footer.tsx
│ ├── ProjectCard.tsx
│ ├── Button.tsx
│ └── …
├── public/ # Public assets like images and icons
├── styles/ # Additional stylesheets
├── utils/ # Utility functions
├── .gitignore # Ignored files for Git
├── package.json # Dependencies and scripts
├── next.config.js # Next.js configuration
└── tsconfig.json # TypeScript configuration
Edit the contents.
Run your project by typing 'npm run dev' in your terminal.
Type in this link in your browser 'http://localhost:3000/' and press Enter to view your project.
4. Setting Up The GitHub Repository
Open your GitHub account and create a repository.
Clone the repository and transfer the contents of the repo that was cloned earlier into it.
To push your code to the repo, you can use file upload or the method below:
5. Deployment
To launch your site, use Vercel. Here's a simple step-by-step process:
Create an Account: Sign up on Vercel and connect your repository.
Import and Deploy: Select your project and deploy your web application.
Set Up Environment Variables: Configure any required environment variables for your app.
Final Deployment: Complete the setup and watch your application go live!
Make sure to add a ReadMe file to your repo.
