https://github.com/peyush-nuwal/portfolio

A modern, interactive frontend portfolio built using Next.js, TypeScript, GSAP, Framer Motion, and TailwindCSS. Designed to showcase my skills, featured projects, and personal branding as a frontend developer.
https://github.com/peyush-nuwal/portfolio

animation creative-coding creative-development framer-motion frontend gsap interactive-ui micro-interactions minimal modern-ui nextjs personal-website portfolio-website reactjs responsive-design scrolltrigger smooth-scroll tailwindcss typescript

Last synced: 9 months ago
JSON representation

A modern, interactive frontend portfolio built using Next.js, TypeScript, GSAP, Framer Motion, and TailwindCSS. Designed to showcase my skills, featured projects, and personal branding as a frontend developer.

• Host: GitHub
• URL: https://github.com/peyush-nuwal/portfolio
• Owner: peyush-nuwal
• Created: 2025-04-08T13:40:33.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2025-07-29T17:03:45.000Z (10 months ago)
• Last Synced: 2025-07-29T19:38:15.039Z (10 months ago)
• Topics: animation, creative-coding, creative-development, framer-motion, frontend, gsap, interactive-ui, micro-interactions, minimal, modern-ui, nextjs, personal-website, portfolio-website, reactjs, responsive-design, scrolltrigger, smooth-scroll, tailwindcss, typescript
• Language: HTML
• Homepage: https://portfolio-nuwal-peyush.vercel.app
• Size: 56.4 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# Peyush Nuwal - Portfolio Website

🌐 [Live Site](https://peyush-nuwal-portfolio.vercel.app/)

A modern, interactive frontend portfolio built using Next.js, TypeScript, GSAP, Framer Motion, and TailwindCSS. Designed to showcase my skills, featured projects, and personal branding as a frontend developer.

---

## 🚀 Features

- ✨ Animated hero section with GSAP-driven staggered text and direction-based stretch effects

- 🖱️ Interactive project previews with smooth GSAP and Framer Motion transitions

- 🎖️ Custom award hover effect with direction-based scroll using GSAP

- ⚡ TailwindCSS v4-powered responsive layout with utility-first styling

- 🎬 Custom animated loader to set visual tone and brand identity

- 📱 Mobile-first, fluid design with accessibility and performance in mind

- 🧱 Scalable and clean codebase with Next.js 15 and TypeScript

## 🧰 Tech Stack

![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)

![TailwindCSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwind-css&logoColor=white)

![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)

![Framer Motion](https://img.shields.io/badge/Framer_Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)

![GSAP](https://img.shields.io/badge/GSAP-88CE02?style=for-the-badge&logo=greensock&logoColor=white)

## 🎥 Demo

[Watch on YouTube](https://www.youtube.com/watch?v=your-video-id)

Or view the live site:  

🌐 [peyush-nuwal-portfolio.vercel.app](https://peyush-nuwal-portfolio.vercel.app/)

## Screenshots

![App Screenshot](/public/screenshot/s1.png)

![App Screenshot](/public/screenshot/s2.png)

![App Screenshot](/public/screenshot/s3.png)

![App Screenshot](/public/screenshot/s4.png)

![App Screenshot](/public/screenshot/s5.png)

![App Screenshot](/public/screenshot/s6.png)

![App Screenshot](/public/screenshot/s7.png)

![App Screenshot](/public/screenshot/s8.png)

## 🛠 Installation & Setup

To run this portfolio locally, follow these steps:

1. **Clone the repository**

```bash

git clone https://github.com/peyush-nuwal/portfolio.git

cd portfolio

```

2. **Install dependencies**

```bash

npm install

```

3. **Start the development Server**

```bash

npm run dev

```

4. **Open your browser and navigate to:**

```bash

http://localhost:3000

```

## 📬 Contact

- LinkedIn: [linkedin.com/in/peyush-nuwal](https://linkedin.com/in/peyush-nuwal)

- Email: piyushnawal19@gmail.com