portfolio

This repository contains the source code for a modern developer portfolio website, created as the companion project for a step-by-step tutorial on the JavaScript Mastery YouTube channel. The portfolio is designed to showcase a developer's skills and experience in a visually striking way, and the full walkthrough video is linked from the README for anyone who wants to build it from scratch.

The site is built with four main technologies: Next.js handles the page structure and routing, Three.js renders interactive 3D graphics, Framer Motion adds animated transitions and effects, and Tailwind CSS handles the visual styling. Together these produce a portfolio that goes beyond a standard static webpage.

The design includes a hero section with a spotlight lighting effect and animated background, a bento grid layout for presenting personal information in a magazine-style tile arrangement, 3D elements including an interactive globe styled like GitHub's contribution map, a testimonials section with animated scrolling content, and a work experience section. An HTML5 canvas is also used to create visual effects in an "approaches" section. The entire site adapts to different screen sizes.

Setting it up locally requires Node.js and npm. After cloning the repository, you install the dependencies with a single command and start a development server, then open the site in a browser at localhost:3000.

The README includes the full source for the site's data file as a copy-paste snippet, so anyone following the tutorial can drop it in without typing it manually. A Discord community of over 34,000 members is available for questions and troubleshooting.