A Modern Next.js Portfolio

portfolio.1.mp4

Mobile version

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 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, this portfolio demonstrates the developer's skills in a unique manner that creates a lasting impact.

⚙️ Tech Stack

• Next.js
• Three.js
• Framer Motion
• Tailwind CSS

🔋 Features

👉 Hero: Captivating introduction featuring a spotlight effect and dynamic background.

👉 Bento Grid: Modern layout presenting personal information using cutting-edge CSS design techniques.

👉 3D Elements: Interactive 3D design elements, such as a GitHub-style globe and card hover effects, adding depth and engagement.

👉 Testimonials: Dynamic testimonials area with scrolling or animated content for enhanced engagement.

👉 Work Experience: Prominent display of professional background for emphasis and credibility.

👉 Canvas Effect: Innovative use of HTML5 canvas to create visually striking effects in the "approaches" section.

👉 Responsiveness: Seamless adaptability across all devices, ensuring optimal viewing experience for every user.

and many more, including code architecture and reusability

🤸 Quick Start

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

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• yarn | npm

Installation

Install the project dependencies using yarn | npm:

yarn install | npm install

Running the Project

yarn dev | npm run dev

Open http://localhost:3000 in your browser to view the project.