Portfolio Redesign with 3D Visuals

The Challenge

As a full-stack developer with over 15 years of experience, I needed a portfolio that would not only showcase my work but also demonstrate my ability to work with cutting-edge web technologies. The previous Laravel-based site served its purpose well, but it was time for something more dynamic.

Technical Approach

Framework Selection

I chose Astro as the foundation for several reasons:

• Zero JavaScript by default - Only ships JS where needed
• Partial hydration - React components only load when visible
• Built-in SEO - Server-rendered pages with full meta control
• MDX support - Content management without a CMS

3D Graphics Implementation

The hero section features a custom Three.js scene built with React Three Fiber:

function CodeParticles() {
  const mesh = useRef<THREE.InstancedMesh>(null);
  const count = 150;

  useFrame(({ clock }) => {
    if (!mesh.current) return;
    particles.forEach((particle, i) => {
      // Animate each particle with unique motion
      const t = clock.elapsedTime + particle.offset;
      dummy.position.set(
        particle.x + Math.sin(t * particle.speed) * 0.5,
        particle.y + Math.cos(t * particle.speed) * 0.3,
        particle.z
      );
      dummy.updateMatrix();
      mesh.current!.setMatrixAt(i, dummy.matrix);
    });
    mesh.current.instanceMatrix.needsUpdate = true;
  });
}

Interactive Terminal

The terminal component simulates a real command-line interface with:

• Command history (arrow keys)
• Tab completion
• Multiple themed commands
• ASCII art Easter eggs

Results

The new portfolio achieves excellent performance scores while delivering a memorable user experience. The combination of server-side rendering and client-side hydration ensures fast initial loads without sacrificing interactivity.

Key Learnings

1. Three.js bundle size requires careful optimization - lazy loading is essential
2. Astro’s island architecture is perfect for mixing static and interactive content
3. Accessibility must be built in from the start, especially with 3D content