portfolio

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 📸 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.

⚙️ 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
• Node.js
• npm (Node Package Manager)

Cloning the Repository

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

Installation

Install the project dependencies using npm:

npm install

Running the Project

npm run dev

Open 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: