Skip to content

huement/iRock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

iRock logo

Derek Scott // Rock Star Developer Extraordinaire

Astro Vite React Bootstrap TypeScript

🚀 The "Why" (Because static HTML is for mortals)

Welcome to the repo. You are looking at the source code for my portfolio.

Previously, this site was a single, massive HTML file. It worked, sure. It looked good, obviously. But "good enough" is for developers who don't dream in fractals.

I decided to rebuild the entire thing using Astro and React. Why?

  1. Performance: Because I wanted a Lighthouse score that makes Google jealous. Astro strips away the JavaScript I don't need and only hydrates the parts that actually move.
  2. Architecture: I wanted to flex. This isn't just a website; it's a component-based system. The Starfield? That's a React hook. The Timeline? Dynamic data injection. The Fractals? Pure math, calculated in real-time.
  3. Speed: Vite makes the dev experience faster than my drone flight controllers.

✨ The Visuals

Let's address the elephant in the room: This thing is beautiful.

We aren't doing "flat design" here. We are doing "Canvas-driven, WebGL-rendering, particle-simulating" design.

  • The Background: That's not a video. That's Three.js calculating vector positions in 3D space.
  • The Fractals: p5.js logic that mutates based on user interaction.
  • The Layout: Custom masonry grids that break the boring "row/column" paradigm.

It is responsive, it is accessible, and it is arguably the best looking thing you'll open in Chrome today.

🛠 Tech Stack

  • Astro: For the Static Site Generation (SSG). It spits out raw HTML so the browser doesn't have to think hard.
  • React.js: Handles the stateful UI components.
  • Three.js: Because 2D websites are 2015.
  • Bootstrap 5: Because I have better things to do than write a flexbox grid from scratch.
  • SCSS: Variable-driven styling for that consistent "Glassmorphism" aesthetic.

💻 Running the Beast

Want to see how the magic is made? Or wanna make yourself your own 'RockStar' Resume?

  1. Clone the repo.
  2. Install the dependencies (we use npm because we are civilized).
    npm install
  3. Ignite the engines.
    npm run dev

📄 Check My Paper Trail

Here is an online version of my resume. It has my contact information, and more details about my work history. If you're a fan of PDFs this is the resume for you.

📥 Download My Resume (PDF)

About

Resume Builder and Portfolio Website

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published