https://github.com/22ayaan/portfolio

A modern portfolio built with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations, and styled with TailwindCSS.
https://github.com/22ayaan/portfolio

framer-motion nextjs tailwindcss three-js

Last synced: 3 months ago
JSON representation

A modern portfolio built with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations, and styled with TailwindCSS.

• Host: GitHub
• URL: https://github.com/22ayaan/portfolio
• Owner: 22ayaan
• License: gpl-3.0
• Created: 2024-07-21T20:17:40.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-18T20:59:44.000Z (4 months ago)
• Last Synced: 2024-09-29T05:21:30.865Z (3 months ago)
• Topics: framer-motion, nextjs, tailwindcss, three-js
• Language: TypeScript
• Homepage: https://ayaansiddiqui.vercel.app/
• Size: 29.5 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  


    

      

    

  


  


    

    

    

    

  


  
A Modern Next.js Portfolio




## 📋 Table of Contents

1. 🤖 [Introduction](#introduction)

2. ⚙️ [Tech Stack](#tech-stack)

3. 🔋 [Features](#features)

4. 🤸 [Quick Start](#quick-start)

5. 📸 [Snippets](#snippets)

---

## 🤖 Introduction

Built with Next.js for handling the user interface, Three.js for rendering 3D elements, Framer motion for beautiful animations, and styled with TailwindCSS.

**Check out the live portfolio [here](https://ayaansiddiqui.vercel.app).**

## ⚙️ Tech Stack

- Next.js

- Three.js

- Framer Motion

- Tailwind CSS

## 🔋 Features

🚀 **Hero**: An engaging introduction with a spotlight effect and dynamic background.

🚀 **Bento Grid**: A sleek, modern layout showcasing personal information with advanced CSS design techniques.

🚀 **3D Elements**: Interactive 3D design features, such as a GitHub-style globe and card hover effects, adding depth and visual interest.

🚀 **Testimonials**: A dynamic professional experience section with scrolling or animated content for enhanced user engagement.

🚀 **Canvas Effect**: Creative use of HTML5 canvas to produce visually striking effects in the "approaches" section.

🚀 **Responsiveness**: Flawless adaptability across all devices, ensuring an optimal viewing experience for every user.

And much more, including efficient code architecture and reusability.

## 💨 Quick Start

Follow these steps to set up the project locally on your machine.

**Prerequisites**

You need to have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) (Node Package Manager)

**Cloning the Repository**

```bash

git clone https://github.com/22ayaan/portfolio.git

cd portfolio

```

**Installation**

Install the project dependencies using npm:

```bash

npm install

```

**Running the Project**

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.

## 📸 Snippets

**About Section:**



**Projects Section:**



**Work Experience:**

https://github.com/user-attachments/assets/8f3ba3a1-6d7b-47a0-aa81-424349fb7bf5

**Approach Sections:**

https://github.com/user-attachments/assets/7dbff8ef-d3ac-49ce-96fd-a233e05caaf5

**Contact Section:**