How I Built My Portfolio with Astro + Three.js

When I decided to build my own portfolio, I had one requirement — it must be unique. No templates, no generic layouts. Something that shows my personality.

Why Astro?

Astro is a framework that perfectly fit my needs:

• Zero JS by default — the site is lightning fast
• Islands Architecture — React only where interaction is needed
• Great DX — TypeScript, hot reload, component-based

---
// Astro component = HTML + JS logic
import NeuralNetwork from './NeuralNetwork.tsx';
---

<section id="hero">
  <NeuralNetwork client:load />
  <h1>Hi, I'm StaleForge</h1>
</section>

3D Background with Three.js

The coolest element of the site is the interactive 3D background — a neural network reacting to mouse movement. I used @react-three/fiber (R3F) instead of raw Three.js — the component-based API is much nicer.

function NeuralNodes({ count = 60 }) {
  const meshRef = useRef(null);
  
  useFrame((state) => {
    // Animation in every frame
    nodes.forEach((node, i) => {
      node.position.y = node.baseY + 
        Math.sin(state.clock.elapsedTime * 0.3 + i * 0.5) * 0.5;
    });
  });
  
  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[1, 8, 8]} />
      <meshBasicMaterial transparent opacity={0.8} />
    </instancedMesh>
  );
}

Easter Egg — The Matrix

Type matrix in the terminal on my site. I won’t spoil what happens, but I’ll say this — there is a Red Pill and a Blue Pill. 😎

Conclusions

Building a portfolio is not just coding — it’s designing an experience. Every element has a purpose. Every animation is thought out.

If you are planning your portfolio, my advice:

1. Start with a concept — what feeling do you want to achieve?
2. Focus on details — micro-animations make a huge difference
3. Test on mobile — half of your visitors are on their phones
4. Add something unique — an easter egg, a game, something memorable

A portfolio is your business card in the digital world. Take the time to make it look like a million bucks.