What is portfolio?

adrianhajdin/portfolio — explained in plain English

Analysis updated 2026-05-18

★ 3,652TypeScriptAudience · vibe coderComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Portfolio))
    What it does
      Personal portfolio site
      3D interactive elements
      Animated transitions
      Tutorial companion code
    Tech stack
      Next.js
      Three.js
      Framer Motion
      Tailwind CSS
    Use cases
      Build a personal site
      Learn Next.js and Three.js
      Copy paste starter data
    Audience
      Vibe coders
      Frontend learners
      Developers

mindmap root((Portfolio)) What it does Personal portfolio site 3D interactive elements Animated transitions Tutorial companion code Tech stack Next.js Three.js Framer Motion Tailwind CSS Use cases Build a personal site Learn Next.js and Three.js Copy paste starter data Audience Vibe coders Frontend learners Developers

What do people build with it?

USE CASE 1

Clone and customize a ready-made personal portfolio website.

USE CASE 2

Follow the linked YouTube tutorial to learn Next.js and Three.js step by step.

USE CASE 3

Copy the provided data snippets to fill in your own projects and testimonials.

USE CASE 4

Study how to combine 3D graphics with animated page transitions.

What is it built with?

Next.jsThree.jsFramer MotionTailwind CSSTypeScript

How does it compare?

	adrianhajdin/portfolio	archestra-ai/archestra	pair-code/lit
Stars	3,652	3,653	3,653
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	hard	moderate
Complexity	2/5	4/5	3/5
Audience	vibe coder	ops devops	researcher

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires Node.js and npm, clone, npm install, then npm run dev.

Not stated in the README.

So what is it?

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.

Copy-paste prompts

Prompt 1

Help me clone this portfolio, install dependencies, and run it locally on port 3000.

Prompt 2

Show me how to replace the sample projects and testimonials with my own content.

Prompt 3

Explain how the bento grid layout is built with Tailwind CSS in this project.

Prompt 4

Help me add a new 3D element to the hero section using Three.js.

Frequently asked questions