A modern, responsive portfolio website built with Next.js 14, TypeScript, and TailwindCSS. This portfolio showcases my projects, skills, and professional journey through an elegant and interactive interface.
- Modern UI/UX: Elegant bento grid layout with smooth transitions and animations
- Responsive Design: Fully responsive across all device sizes
- Dynamic Content:
- Interactive typewriter effect
- Real-time GitHub statistics
- Project showcase with live demos
- Education timeline
- Downloadable CV
- Tech Stack Display: Visual representation of skills and technologies
- Social Links: Easy access to professional profiles and contact information
- Framework: Next.js 14
- Language: TypeScript
- Styling: TailwindCSS
- Icons: Phosphor Icons, Tabler Icons
- Animations: CSS Transitions
- Integrations: GitHub API
- Deployment: Vercel
-
Clone the repository:
git clone https://github.com/yourusername/portfolio.git cd portfolio
-
Install dependencies:
npm install
-
Create a
.env.local
file in the root directory and add your GitHub token:GITHUB_TOKEN=your_github_token
-
Start the development server:
npm run dev
-
Open http://localhost:3000 in your browser
portfolio/
├── app/ # Next.js app directory
├── components/
│ ├── bentogrid/ # Main layout components
│ ├── icons/ # Custom icons and SVGs
│ └── ui/ # Reusable UI components
├── lib/ # Utility functions
└── public/ # Static assets
- Personal Information: Update your details in
app/page.tsx
- Projects: Modify the projects array in
app/projects/page.tsx
- CV: Replace
public/cv.pdf
with your own CV - Social Links: Update links in
components/bentogrid/grid/cards/links.tsx
- GitHub Stats: Configure GitHub integration in
lib/github.ts
This portfolio is optimized for deployment on Vercel:
- Push your code to GitHub
- Import your repository on Vercel
- Add your environment variables
- Deploy!
eb02157bd73407f7c1b7582660f27444c3d0f48e
Built with 💻 by Ritam Maity