https://github.com/shasbinas/my-portfolio-nextjs
A sleek Next.js portfolio featuring animated UI, dynamic developer stats, and a custom cursor highlight effect.
https://github.com/shasbinas/my-portfolio-nextjs
cursor nextjs nodejs portfolio-website typescript vercel
Last synced: 6 months ago
JSON representation
A sleek Next.js portfolio featuring animated UI, dynamic developer stats, and a custom cursor highlight effect.
- Host: GitHub
- URL: https://github.com/shasbinas/my-portfolio-nextjs
- Owner: shasbinas
- License: mit
- Created: 2025-11-23T07:50:48.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-12T10:56:36.000Z (6 months ago)
- Last Synced: 2025-12-13T23:55:48.742Z (6 months ago)
- Topics: cursor, nextjs, nodejs, portfolio-website, typescript, vercel
- Language: TypeScript
- Homepage: https://personal-website-psi-eight-78.vercel.app
- Size: 619 KB
- Stars: 22
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Modern Portfolio Website
[](https://github.com/shasbinas/my-portfolio-nextjs/stargazers)
[](https://github.com/shasbinas/my-portfolio-nextjs/network/members)
[](https://github.com/shasbinas/my-portfolio-nextjs/issues)
[](LICENSE)
**A modern, responsive, and feature-rich portfolio website built with Next.js 15, React 19, and TypeScript**
[Report Bug](https://github.com/shasbinas/my-portfolio-nextjs/issues) • [Request Feature](https://github.com/shasbinas/my-portfolio-nextjs/issues)
---
## 📋 Table of Contents
- [About The Project](#-about-the-project)
- [Features](#-features)
- [Tech Stack](#-tech-stack)
- [Getting Started](#-getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Configuration](#configuration)
- [Project Structure](#-project-structure)
- [Why This Portfolio?](#-why-this-portfolio)
- [Screenshots](#-screenshots)
- [Contributing](#-contributing)
- [License](#-license)
- [Contact](#-contact)
---
## 🎯 About The Project
This is a modern, fully responsive portfolio website designed to showcase your skills, projects, and professional experience. Built with cutting-edge technologies, it features smooth animations, dark mode support, and an intuitive user interface that stands out from traditional portfolio templates.
The portfolio includes sections for:
- **Personal Information** - Profile with animated GIF support
- **Skills** - Categorized technical skills with visual icons
- **Projects** - Showcase your best work with live demos and GitHub links
- **Experience** - Professional work history and internships
- **Education** - Academic background and certifications
- **GitHub Activity** - Dynamic GitHub contribution calendar
- **LeetCode Stats** - Competitive programming achievements
- **Achievements** - Certifications and accomplishments
- **Contact** - Multiple ways to get in touch
---
## ✨ Features
### 🎨 **Modern UI/UX**
- **Responsive Design** - Perfect on all devices (mobile, tablet, desktop)
- **Dark Mode Support** - Seamless theme switching with system preference detection
- **Smooth Animations** - Framer Motion powered transitions and micro-interactions
- **Fluid Cursor Effect** - Interactive WebGL-based cursor animation
- **Glass Morphism** - Modern glass-panel design elements
- **Grid Pattern Background** - Subtle animated background patterns
### 🧭 **Navigation & Interaction**
- **Sticky Navbar** - Fixed navigation with active section highlighting
- **Smooth Scrolling** - Seamless section-to-section navigation
- **Letter Hover Animation** - Unique letter-by-letter hover effects on nav items
- **Mobile Hamburger Menu** - Clean slide-in menu for mobile devices
- **Scroll to Top** - Quick navigation button
### 📊 **Dynamic Content**
- **GitHub Integration** - Real-time GitHub contribution calendar
- **LeetCode Integration** - Display your LeetCode statistics
- **Project Showcase** - Featured projects with tech stack badges
- **Skills Visualization** - Categorized skills with icons
- **Experience Timeline** - Professional experience with detailed descriptions
### 🚀 **Performance & SEO**
- **Next.js 15** - Latest Next.js with App Router
- **TypeScript** - Full type safety
- **Optimized Images** - Next.js Image optimization
- **SEO Optimized** - Meta tags, Open Graph, and structured data
- **Vercel Analytics** - Built-in analytics integration
- **Fast Loading** - Optimized bundle size and code splitting
### 🎯 **Developer Experience**
- **Easy Configuration** - Single data file for all content
- **TypeScript Support** - Full type definitions
- **ESLint & Prettier** - Code quality and formatting with auto-format on save
- **Format Scripts** - `npm run format` to format all files, `npm run format:check` to verify
- **VS Code Integration** - Pre-configured settings for format on save
- **Component-Based** - Reusable and maintainable components
---
## 🛠 Tech Stack
### **Frontend Framework & Language**
### **Styling & UI**
### **Icons & Graphics**
### **Integrations**
### **Development Tools**
### **Deployment**
---
## 🚀 Getting Started
### Prerequisites
Before you begin, ensure you have the following installed:
- **Node.js** 18.17 or later
- **npm** or **yarn** or **pnpm**
- **Git**
### Installation
1. **Clone the repository**
```bash
git clone https://github.com/shasbinas/my-portfolio-nextjs.git
cd my-portfolio-nextjs
```
2. **Install dependencies**
```bash
npm install
# or
yarn install
# or
pnpm install
```
3. **Run the development server**
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
4. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000)
### Configuration
1. **Update Personal Information**
Edit `src/components/constants/data.ts` and update:
- `ABOUT_ME` - Your name, title, location, email, description
- `USER_NAMES` - GitHub and LeetCode usernames
- `SOCIAL_LINKS` - All your social media links
- `SKILLS` - Your technical skills
- `PROJECTS` - Your featured projects
- `EXPERIENCE` - Your work experience
- `EDUCATION` - Your educational background
2. **Add Profile Images**
- Place your profile image at `public/profile-image.jpg`
- Place your profile GIF at `public/profile-gif.gif`
3. **Update Metadata**
Edit `src/app/layout.tsx` to update:
- Page title and description
- Open Graph images
- Twitter card information
4. **Configure Contact Form** (Optional)
- Update `FORM_ENDPOINT` in `data.ts` with your Formspree endpoint
- Or integrate your preferred form service
5. **Format Code** (Optional but recommended)
```bash
npm run format # Format all files
npm run format:check # Check formatting without making changes
```
6. **Build for Production**
```bash
npm run build
npm start
```
---
## 📁 Project Structure
```
my-portfolio-nextjs/
├── public/
│ ├── profile-image.jpg # Profile image
│ ├── profile-gif.gif # Profile animated GIF
│ └── favicon.ico # Site favicon
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with metadata
│ │ ├── page.tsx # Home page
│ │ ├── globals.css # Global styles
│ │ └── providers.tsx # Theme provider
│ ├── components/
│ │ ├── constants/
│ │ │ └── data.ts # All portfolio data
│ │ ├── sections/
│ │ │ ├── navbar.tsx # Navigation bar
│ │ │ ├── header.tsx # Hero section
│ │ │ ├── about-me.tsx # About section
│ │ │ ├── skills.tsx # Skills section
│ │ │ ├── projects.tsx # Projects section
│ │ │ ├── experience.tsx # Experience section
│ │ │ ├── education.tsx # Education section
│ │ │ ├── github.tsx # GitHub section
│ │ │ ├── leetcode.tsx # LeetCode section
│ │ │ ├── achievements.tsx # Achievements section
│ │ │ ├── contact.tsx # Contact section
│ │ │ └── footer.tsx # Footer
│ │ └── ui/
│ │ ├── theme-toggle.tsx # Dark mode toggle
│ │ ├── scroll-to-top.tsx # Scroll button
│ │ ├── grid-pattern.tsx # Background pattern
│ │ ├── FluidCursor.tsx # Fluid cursor effect
│ │ └── github-star-button.tsx # GitHub star button
│ └── hooks/
│ └── use-FluidCursor.ts # Fluid cursor hook
├── next.config.ts # Next.js configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── .prettierrc # Prettier configuration
├── .prettierignore # Prettier ignore patterns
├── eslint.config.mjs # ESLint configuration
└── package.json # Dependencies
```
---
## 💡 Why This Portfolio?
### 🎯 **Professional & Modern**
- Built with the latest Next.js 15 and React 19
- TypeScript for type safety and better developer experience
- Modern design patterns and best practices
### ⚡ **Performance Optimized**
- Server-side rendering for fast initial load
- Image optimization with Next.js Image component
- Code splitting and lazy loading
- Minimal bundle size
### 🎨 **Unique Design Elements**
- Custom fluid cursor animation using WebGL
- Letter-by-letter hover animations
- Glass morphism effects
- Smooth page transitions
### 📱 **Fully Responsive**
- Mobile-first design approach
- Works perfectly on all screen sizes
- Touch-friendly interactions
### 🔧 **Easy to Customize**
- Single data file for all content
- Component-based architecture
- Well-organized code structure
- Comprehensive documentation
### 🚀 **Production Ready**
- SEO optimized
- Analytics integration
- Error handling
- Accessibility features
### 🌟 **Showcases Your Skills**
- GitHub contribution calendar
- LeetCode statistics
- Project showcase with live demos
- Skills visualization
- Professional experience timeline
---
## 📸 Screenshots
> **Note:** Add screenshots of your portfolio here
---
## 🤝 Contributing
Contributions are welcome! If you have suggestions for improvements or find any bugs, please feel free to:
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
## 📄 License
This project is licensed under the ISC License. See the [LICENSE](LICENSE) file for details.
---
## 📧 Contact
**Shasbin AS** - Backend Developer
- 📧 Email: [shasbin.official@gmail.com](mailto:shasbin.official@gmail.com)
- 💼 LinkedIn: [shasbinasdev](https://linkedin.com/in/shasbinasdev)
- 🐙 GitHub: [@shasbinas](https://github.com/shasbinas)
- 💻 LeetCode: [@shasbinas](https://leetcode.com/shasbinas)
- 📱 Phone: +91 9746998909
- 📄 Resume: [View Resume](https://drive.google.com/file/d/1lf2eQpjK10k9CFMpI7HCLGmskxRb3hdT/view?usp=sharing)
**Project Link:** [https://github.com/shasbinas/my-portfolio-nextjs](https://github.com/shasbinas/my-portfolio-nextjs)
---
## 🙏 Acknowledgments
- [Next.js](https://nextjs.org/) - The React Framework
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Framer Motion](https://www.framer.com/motion/) - Animation library
- [Lucide Icons](https://lucide.dev/) - Beautiful icon library
- [React Icons](https://react-icons.github.io/react-icons/) - Icon library
- [Skill Icons](https://skillicons.dev/) - Skill icons API
- [Prettier](https://prettier.io/) - Code formatter
- [ESLint](https://eslint.org/) - Code linter
- [Vercel](https://vercel.com/) - Deployment platform
---
**⭐ If you like this project, give it a star on [GitHub](https://github.com/shasbinas/my-portfolio-nextjs)! ⭐**
Made with ❤️ by [Shasbin AS](https://github.com/shasbinas)