Spotlight Portfolio

📋 Table of Contents

• ✨ Introduction
• ⚙️ Tech Stack
• 📝 Features
• 🚀 Quick Start

✨ Introduction

[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.

⚙️ Tech Stack

• Next.js 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 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 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 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.

🚀 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
• npm (Node Package Manager)

Cloning the Repository

git clone {git remote URL}

Installation

Let's install the project dependencies, from your terminal, run:

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:

SENTRY_AUTH_TOKEN=

Replace the placeholder values with your actual respective account credentials:

• Sentry

Running the Project

Installation will take a minute or two, but once that's done, you should be able to run the following command:

npm run dev
# or
yarn dev

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