Portfolio-Next.js

A modern developer portfolio with animations using Next.js

📋 Table of Contents

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

🤖 Introduction

Portfolio-Next.js is a dynamic developer portfolio built with Next.js to manage the user interface, Three.js for rendering 3D elements, Framer Motion for animations, and styled with Tailwind CSS. This portfolio showcases skills and projects in a visually captivating manner, creating a lasting impression on visitors.

⚙️ Tech Stack

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

🔋 Features

• Hero Section: Engaging introduction with a spotlight effect and dynamic background.

• Bento Grid: Modern layout using advanced CSS techniques to present personal information.

• Interactive 3D Elements: GitHub-style globe and card hover effects using Three.js for depth and engagement.

• Dynamic Testimonials: Animated testimonials section for enhanced user interaction.

• Professional Experience: Prominent display of work history for credibility.

• Canvas Effects: Innovative HTML5 canvas effects in the "approaches" section.

• Responsive Design: Seamless adaptation to all devices for optimal user experience.

• Code Architecture: Emphasis on code reusability and maintainability.

🚀 Quick Start

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

Prerequisites

Make sure you have the following installed:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/nipuna-lakruwan/Portfolio-Next.js.git
cd Portfolio-Next.js

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.