{"id":34656701,"url":"https://github.com/shasbinas/my-portfolio-nextjs","last_synced_at":"2025-12-24T18:09:35.544Z","repository":{"id":325766730,"uuid":"1102305307","full_name":"shasbinas/my-portfolio-nextjs","owner":"shasbinas","description":"A sleek Next.js portfolio featuring animated UI, dynamic developer stats, and a custom cursor highlight effect.","archived":false,"fork":false,"pushed_at":"2025-12-12T10:56:36.000Z","size":634,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-13T23:55:48.742Z","etag":null,"topics":["cursor","nextjs","nodejs","portfolio-website","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://personal-website-psi-eight-78.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shasbinas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-23T07:50:48.000Z","updated_at":"2025-12-12T10:56:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shasbinas/my-portfolio-nextjs","commit_stats":null,"previous_names":["shasbinas/my-portfolio-nextjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shasbinas/my-portfolio-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shasbinas%2Fmy-portfolio-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shasbinas%2Fmy-portfolio-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shasbinas%2Fmy-portfolio-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shasbinas%2Fmy-portfolio-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shasbinas","download_url":"https://codeload.github.com/shasbinas/my-portfolio-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shasbinas%2Fmy-portfolio-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28005981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cursor","nextjs","nodejs","portfolio-website","typescript","vercel"],"created_at":"2025-12-24T18:05:47.764Z","updated_at":"2025-12-24T18:09:35.534Z","avatar_url":"https://github.com/shasbinas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Modern Portfolio Website\n\n\u003cdiv align=\"center\"\u003e\n\n![Next.js](https://img.shields.io/badge/Next.js-15.5.6-black?style=for-the-badge\u0026logo=next.js\u0026logoColor=white)\n![React](https://img.shields.io/badge/React-19.1.0-61DAFB?style=for-the-badge\u0026logo=react\u0026logoColor=black)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.0-38B2AC?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)\n![Framer Motion](https://img.shields.io/badge/Framer_Motion-12.23.25-0055FF?style=for-the-badge\u0026logo=framer\u0026logoColor=white)\n\n[![GitHub stars](https://img.shields.io/github/stars/shasbinas/my-portfolio-nextjs?style=for-the-badge\u0026logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/stargazers)\n[![GitHub forks](https://img.shields.io/github/forks/shasbinas/my-portfolio-nextjs?style=for-the-badge\u0026logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/network/members)\n[![GitHub issues](https://img.shields.io/github/issues/shasbinas/my-portfolio-nextjs?style=for-the-badge\u0026logo=github)](https://github.com/shasbinas/my-portfolio-nextjs/issues)\n[![License](https://img.shields.io/badge/License-ISC-blue?style=for-the-badge)](LICENSE)\n\n**A modern, responsive, and feature-rich portfolio website built with Next.js 15, React 19, and TypeScript**\n\n[Report Bug](https://github.com/shasbinas/my-portfolio-nextjs/issues) • [Request Feature](https://github.com/shasbinas/my-portfolio-nextjs/issues)\n\n\u003c/div\u003e\n\n---\n\n## 📋 Table of Contents\n\n- [About The Project](#-about-the-project)\n- [Features](#-features)\n- [Tech Stack](#-tech-stack)\n- [Getting Started](#-getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Configuration](#configuration)\n- [Project Structure](#-project-structure)\n- [Why This Portfolio?](#-why-this-portfolio)\n- [Screenshots](#-screenshots)\n- [Contributing](#-contributing)\n- [License](#-license)\n- [Contact](#-contact)\n\n---\n\n## 🎯 About The Project\n\nThis 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.\n\nThe portfolio includes sections for:\n\n- **Personal Information** - Profile with animated GIF support\n- **Skills** - Categorized technical skills with visual icons\n- **Projects** - Showcase your best work with live demos and GitHub links\n- **Experience** - Professional work history and internships\n- **Education** - Academic background and certifications\n- **GitHub Activity** - Dynamic GitHub contribution calendar\n- **LeetCode Stats** - Competitive programming achievements\n- **Achievements** - Certifications and accomplishments\n- **Contact** - Multiple ways to get in touch\n\n---\n\n## ✨ Features\n\n### 🎨 **Modern UI/UX**\n\n- **Responsive Design** - Perfect on all devices (mobile, tablet, desktop)\n- **Dark Mode Support** - Seamless theme switching with system preference detection\n- **Smooth Animations** - Framer Motion powered transitions and micro-interactions\n- **Fluid Cursor Effect** - Interactive WebGL-based cursor animation\n- **Glass Morphism** - Modern glass-panel design elements\n- **Grid Pattern Background** - Subtle animated background patterns\n\n### 🧭 **Navigation \u0026 Interaction**\n\n- **Sticky Navbar** - Fixed navigation with active section highlighting\n- **Smooth Scrolling** - Seamless section-to-section navigation\n- **Letter Hover Animation** - Unique letter-by-letter hover effects on nav items\n- **Mobile Hamburger Menu** - Clean slide-in menu for mobile devices\n- **Scroll to Top** - Quick navigation button\n\n### 📊 **Dynamic Content**\n\n- **GitHub Integration** - Real-time GitHub contribution calendar\n- **LeetCode Integration** - Display your LeetCode statistics\n- **Project Showcase** - Featured projects with tech stack badges\n- **Skills Visualization** - Categorized skills with icons\n- **Experience Timeline** - Professional experience with detailed descriptions\n\n### 🚀 **Performance \u0026 SEO**\n\n- **Next.js 15** - Latest Next.js with App Router\n- **TypeScript** - Full type safety\n- **Optimized Images** - Next.js Image optimization\n- **SEO Optimized** - Meta tags, Open Graph, and structured data\n- **Vercel Analytics** - Built-in analytics integration\n- **Fast Loading** - Optimized bundle size and code splitting\n\n### 🎯 **Developer Experience**\n\n- **Easy Configuration** - Single data file for all content\n- **TypeScript Support** - Full type definitions\n- **ESLint \u0026 Prettier** - Code quality and formatting with auto-format on save\n- **Format Scripts** - `npm run format` to format all files, `npm run format:check` to verify\n- **VS Code Integration** - Pre-configured settings for format on save\n- **Component-Based** - Reusable and maintainable components\n\n---\n\n## 🛠 Tech Stack\n\n### **Frontend Framework \u0026 Language**\n\n![Next.js](https://img.shields.io/badge/Next.js-15.5.6-black?logo=next.js)\n![React](https://img.shields.io/badge/React-19.1.0-61DAFB?logo=react)\n![TypeScript](https://img.shields.io/badge/TypeScript-5.0-3178C6?logo=typescript\u0026logoColor=white)\n\n### **Styling \u0026 UI**\n\n![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-4.0-38B2AC?logo=tailwind-css)\n![Framer Motion](https://img.shields.io/badge/Framer_Motion-12.23.25-0055FF?logo=framer)\n![Lucide React](https://img.shields.io/badge/Lucide_React-0.536-FF6B6B?logo=lucide)\n\n### **Icons \u0026 Graphics**\n\n![React Icons](https://img.shields.io/badge/React_Icons-5.5.0-F7DF1E?logo=react)\n![Skill Icons](https://img.shields.io/badge/Skill_Icons-API-FF6B6B)\n\n### **Integrations**\n\n![Vercel Analytics](https://img.shields.io/badge/Vercel_Analytics-1.5.0-000000?logo=vercel)\n![GitHub Calendar](https://img.shields.io/badge/GitHub_Calendar-4.5.9-181717?logo=github)\n\n### **Development Tools**\n\n![ESLint](https://img.shields.io/badge/ESLint-9.0-4B32C3?logo=eslint)\n![Prettier](https://img.shields.io/badge/Prettier-3.6.2-F7B93E?logo=prettier\u0026logoColor=black)\n![ESLint Prettier](https://img.shields.io/badge/ESLint_Prettier-10.1.8-4B32C3?logo=eslint)\n![Turbopack](https://img.shields.io/badge/Turbopack-Enabled-000000?logo=turborepo)\n\n### **Deployment**\n\n![Vercel](https://img.shields.io/badge/Vercel-Deployed-000000?logo=vercel)\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\nBefore you begin, ensure you have the following installed:\n\n- **Node.js** 18.17 or later\n- **npm** or **yarn** or **pnpm**\n- **Git**\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/shasbinas/my-portfolio-nextjs.git\n   cd my-portfolio-nextjs\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   # or\n   pnpm install\n   ```\n\n3. **Run the development server**\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   # or\n   pnpm dev\n   ```\n\n4. **Open your browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n### Configuration\n\n1. **Update Personal Information**\n   Edit `src/components/constants/data.ts` and update:\n   - `ABOUT_ME` - Your name, title, location, email, description\n   - `USER_NAMES` - GitHub and LeetCode usernames\n   - `SOCIAL_LINKS` - All your social media links\n   - `SKILLS` - Your technical skills\n   - `PROJECTS` - Your featured projects\n   - `EXPERIENCE` - Your work experience\n   - `EDUCATION` - Your educational background\n\n2. **Add Profile Images**\n   - Place your profile image at `public/profile-image.jpg`\n   - Place your profile GIF at `public/profile-gif.gif`\n\n3. **Update Metadata**\n   Edit `src/app/layout.tsx` to update:\n   - Page title and description\n   - Open Graph images\n   - Twitter card information\n\n4. **Configure Contact Form** (Optional)\n   - Update `FORM_ENDPOINT` in `data.ts` with your Formspree endpoint\n   - Or integrate your preferred form service\n\n5. **Format Code** (Optional but recommended)\n\n   ```bash\n   npm run format        # Format all files\n   npm run format:check  # Check formatting without making changes\n   ```\n\n6. **Build for Production**\n   ```bash\n   npm run build\n   npm start\n   ```\n\n---\n\n## 📁 Project Structure\n\n```\nmy-portfolio-nextjs/\n├── public/\n│   ├── profile-image.jpg      # Profile image\n│   ├── profile-gif.gif        # Profile animated GIF\n│   └── favicon.ico            # Site favicon\n├── src/\n│   ├── app/\n│   │   ├── layout.tsx          # Root layout with metadata\n│   │   ├── page.tsx            # Home page\n│   │   ├── globals.css         # Global styles\n│   │   └── providers.tsx       # Theme provider\n│   ├── components/\n│   │   ├── constants/\n│   │   │   └── data.ts         # All portfolio data\n│   │   ├── sections/\n│   │   │   ├── navbar.tsx       # Navigation bar\n│   │   │   ├── header.tsx      # Hero section\n│   │   │   ├── about-me.tsx    # About section\n│   │   │   ├── skills.tsx      # Skills section\n│   │   │   ├── projects.tsx     # Projects section\n│   │   │   ├── experience.tsx  # Experience section\n│   │   │   ├── education.tsx   # Education section\n│   │   │   ├── github.tsx      # GitHub section\n│   │   │   ├── leetcode.tsx    # LeetCode section\n│   │   │   ├── achievements.tsx # Achievements section\n│   │   │   ├── contact.tsx     # Contact section\n│   │   │   └── footer.tsx      # Footer\n│   │   └── ui/\n│   │       ├── theme-toggle.tsx    # Dark mode toggle\n│   │       ├── scroll-to-top.tsx   # Scroll button\n│   │       ├── grid-pattern.tsx    # Background pattern\n│   │       ├── FluidCursor.tsx     # Fluid cursor effect\n│   │       └── github-star-button.tsx # GitHub star button\n│   └── hooks/\n│       └── use-FluidCursor.ts      # Fluid cursor hook\n├── next.config.ts              # Next.js configuration\n├── tailwind.config.js          # Tailwind CSS configuration\n├── tsconfig.json               # TypeScript configuration\n├── .prettierrc                 # Prettier configuration\n├── .prettierignore             # Prettier ignore patterns\n├── eslint.config.mjs            # ESLint configuration\n└── package.json                # Dependencies\n```\n\n---\n\n## 💡 Why This Portfolio?\n\n### 🎯 **Professional \u0026 Modern**\n\n- Built with the latest Next.js 15 and React 19\n- TypeScript for type safety and better developer experience\n- Modern design patterns and best practices\n\n### ⚡ **Performance Optimized**\n\n- Server-side rendering for fast initial load\n- Image optimization with Next.js Image component\n- Code splitting and lazy loading\n- Minimal bundle size\n\n### 🎨 **Unique Design Elements**\n\n- Custom fluid cursor animation using WebGL\n- Letter-by-letter hover animations\n- Glass morphism effects\n- Smooth page transitions\n\n### 📱 **Fully Responsive**\n\n- Mobile-first design approach\n- Works perfectly on all screen sizes\n- Touch-friendly interactions\n\n### 🔧 **Easy to Customize**\n\n- Single data file for all content\n- Component-based architecture\n- Well-organized code structure\n- Comprehensive documentation\n\n### 🚀 **Production Ready**\n\n- SEO optimized\n- Analytics integration\n- Error handling\n- Accessibility features\n\n### 🌟 **Showcases Your Skills**\n\n- GitHub contribution calendar\n- LeetCode statistics\n- Project showcase with live demos\n- Skills visualization\n- Professional experience timeline\n\n---\n\n## 📸 Screenshots\n\n\u003e **Note:** Add screenshots of your portfolio here\n\n\u003c!--\n![Home Page](./screenshots/home.png)\n![Projects Section](./screenshots/projects.png)\n![Dark Mode](./screenshots/dark-mode.png)\n--\u003e\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! If you have suggestions for improvements or find any bugs, please feel free to:\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n---\n\n## 📄 License\n\nThis project is licensed under the ISC License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n## 📧 Contact\n\n**Shasbin AS** - Backend Developer\n\n- 📧 Email: [shasbin.official@gmail.com](mailto:shasbin.official@gmail.com)\n- 💼 LinkedIn: [shasbinasdev](https://linkedin.com/in/shasbinasdev)\n- 🐙 GitHub: [@shasbinas](https://github.com/shasbinas)\n- 💻 LeetCode: [@shasbinas](https://leetcode.com/shasbinas)\n- 📱 Phone: +91 9746998909\n- 📄 Resume: [View Resume](https://drive.google.com/file/d/1lf2eQpjK10k9CFMpI7HCLGmskxRb3hdT/view?usp=sharing)\n\n**Project Link:** [https://github.com/shasbinas/my-portfolio-nextjs](https://github.com/shasbinas/my-portfolio-nextjs)\n\n---\n\n## 🙏 Acknowledgments\n\n- [Next.js](https://nextjs.org/) - The React Framework\n- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework\n- [Framer Motion](https://www.framer.com/motion/) - Animation library\n- [Lucide Icons](https://lucide.dev/) - Beautiful icon library\n- [React Icons](https://react-icons.github.io/react-icons/) - Icon library\n- [Skill Icons](https://skillicons.dev/) - Skill icons API\n- [Prettier](https://prettier.io/) - Code formatter\n- [ESLint](https://eslint.org/) - Code linter\n- [Vercel](https://vercel.com/) - Deployment platform\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ If you like this project, give it a star on [GitHub](https://github.com/shasbinas/my-portfolio-nextjs)! ⭐**\n\nMade with ❤️ by [Shasbin AS](https://github.com/shasbinas)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshasbinas%2Fmy-portfolio-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshasbinas%2Fmy-portfolio-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshasbinas%2Fmy-portfolio-nextjs/lists"}