https://github.com/basedhound/spotlight_portfolio_next
Portfolio concept built on Next.js, using : Three.js for rendering 3D elements, Framer motion + Aceternity UI for beautiful animations, and styled with Tailwind.
https://github.com/basedhound/spotlight_portfolio_next
bento-grid nextjs nextjs14 r3f react react18 sentry tailwind three-fiber threejs typescript
Last synced: 5 days ago
JSON representation
Portfolio concept built on Next.js, using : Three.js for rendering 3D elements, Framer motion + Aceternity UI for beautiful animations, and styled with Tailwind.
- Host: GitHub
- URL: https://github.com/basedhound/spotlight_portfolio_next
- Owner: basedhound
- Created: 2024-06-19T16:16:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-06T15:42:21.000Z (about 1 year ago)
- Last Synced: 2025-01-02T23:17:34.806Z (10 months ago)
- Topics: bento-grid, nextjs, nextjs14, r3f, react, react18, sentry, tailwind, three-fiber, threejs, typescript
- Language: TypeScript
- Homepage: https://spotlight-fv.netlify.app
- Size: 49.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Spotlight Portfolio
##
📋 Table of Contents
- ✨ [Introduction](#introduction)
- ⚙️ [Tech Stack](#tech-stack)
- 📝 [Features](#features)
- 🚀 [Quick Start](#quick-start)
**[EN]** 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.
**[FR]** Conçu avec Next.js pour l'interface utilisateur, Three.js pour le rendu 3D, Framer Motion pour des animations élégantes, et stylisé avec TailwindCSS, ce portfolio illustre les compétences du développeur de manière moderne et marquante.
- [**Next.js**](https://nextjs.org/docs) is a React framework known for its server-side rendering (SSR) and static site generation (SSG) capabilities, enhancing performance and SEO for web applications. It offers features like automatic code splitting, API routes for server-side logic, and a plugin system for extensibility.
- [**Three.js**](https://threejs.org/docs/) is a JavaScript library that enables the creation and display of 3D computer graphics in web browsers using WebGL. It provides extensive capabilities for rendering 3D scenes, including support for geometries, materials, lighting, and animations.
- [**Framer Motion**](https://www.framer.com/motion/) is a React animation library designed for creating smooth, interactive animations and transitions. It simplifies complex animations with a straightforward API, supports gesture-based interactions, and offers physics-based animations for realistic motion effects.
- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.
##
📝 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.
👉 **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.
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you 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 {git remote URL}
```
**Installation**
Let's install the project dependencies, from your terminal, run:
```bash
npm install
# or
yarn install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
SENTRY_AUTH_TOKEN=
```
Replace the placeholder values with your actual respective account credentials:
- [Sentry](https://sentry.io/features/dashboards)
**Running the Project**
Installation will take a minute or two, but once that's done, you should be able to run the following command:
```bash
npm run dev
# or
yarn dev
```
Open [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.