Jak zbudowałem portfolio z Astro + Three.js

Kiedy zdecydowałem się zbudować własne portfolio, miałem jedno wymaganie — musi być unikalne. Żadnych szablonów, żadnych generycznych layoutów. Coś, co pokazuje moją osobowość.

Dlaczego Astro?

Astro to framework, który idealnie pasował do moich potrzeb:

• Zero JS by default — strona jest szybka jak błyskawica
• Islands Architecture — React tylko tam, gdzie potrzeba interakcji
• Świetny DX — TypeScript, hot reload, component-based

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

<section id="hero">
  <NeuralNetwork client:load />
  <h1>Cześć, jestem StaleForge</h1>
</section>

3D Background z Three.js

Najfajniejszym elementem strony jest interaktywne tło 3D — sieć neuronowa reagująca na ruch myszki. Użyłem @react-three/fiber (R3F) zamiast surowego Three.js — component-based API jest dużo przyjemniejsze.

function NeuralNodes({ count = 60 }) {
  const meshRef = useRef(null);
  
  useFrame((state) => {
    // Animacja w każdej klatce
    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

Wpisz matrix w terminalu na mojej stronie. Nie spoileruję co się stanie, ale powiem tyle — jest Red Pill i Blue Pill. 😎

Wnioski

Budowanie portfolio to nie tylko kodowanie — to projektowanie doświadczenia. Każdy element ma swój cel. Każda animacja jest przemyślana.

Jeśli planujesz swoje portfolio, moja rada:

1. Zacznij od koncepcji — jaki feeling chcesz osiągnąć?
2. Skup się na detalu — micro-animacje robią ogromną różnicę
3. Testuj na mobile — połowa twoich odwiedzających jest na telefonie
4. Dodaj coś unikalnego — easter egg, gra, coś co zapada w pamięć

Portfolio to twoja wizytówka w cyfrowym świecie. Poświęć czas, żeby wyglądała na milion dolarów.