https://github.com/nipuna-lakruwan/portfolio-next.js
https://github.com/nipuna-lakruwan/portfolio-next.js
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nipuna-lakruwan/portfolio-next.js
- Owner: Nipuna-Lakruwan
- License: apache-2.0
- Created: 2024-07-08T09:49:51.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-30T08:35:28.000Z (7 months ago)
- Last Synced: 2025-01-02T00:15:46.383Z (4 months ago)
- Language: TypeScript
- Homepage: https://portfolio-next-js-flax.vercel.app/
- Size: 23.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Portfolio-Next.js
A modern developer portfolio with animations using Next.js
## 📋 Table of Contents
1. 🤖 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 🔋 [Features](#features)
4. 🚀 [Quick Start](#quick-start)
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.
- 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.
Follow these steps to set up the project locally on your machine:
### Prerequisites
Make sure you have the following installed:
- [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/nipuna-lakruwan/Portfolio-Next.js.git
cd Portfolio-Next.js
```
**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.