From Mechanical Engineer to Full-Stack: Building a 98 Lighthouse Portfolio with React + Three.js

YOGA VIGNESH S — Sat, 06 Dec 2025 13:20:47 +0000

The Journey

6 months ago, I was designing mechanical systems. Today, I'm shipping React apps with 98/100 Lighthouse scores.

🔗 Live: https://yogavignesh.me
💻 GitHub: https://github.com/yogavignesh-engineer/yogavignesh.me

The Challenge

Build a portfolio that:

Shows my mechanical engineering background
Demonstrates modern web dev skills
Maintains 60fps with 3D + animations
Loads fast (sub-2s FCP)

Tech Stack & Why

[Your tech stack section]

Performance Lessons

[Your optimization techniques]

Code Deep Dive

[Show interesting React patterns]

Metrics

98/100 Lighthouse
327KB gzipped
60fps animations
Mobile-optimized

What I Learned

[Your learnings]

Would love your feedback! 🚀

Physics in the Browser: How I Built a Beam Stress Visualizer with React & Three.js

YOGA VIGNESH S — Thu, 04 Dec 2025 14:06:30 +0000

"You're a mechanical engineer? Why are you coding*?"*

I get asked this in every interview. The assumption is always that engineering and web development are opposites. One deals with steel and forces; the other deals with DOM nodes and pixels.

I disagree. To me, a React component is just a machine with inputs (props) and outputs (UI).

So when I built my portfolio (yogavignesh.me), I didn't want a static "About Me" page. I wanted to prove that the web can handle real engineering physics.

I built a Beam Deflection Visualizer that calculates stress and bending moments in real-time at 60FPS. Here is the engineering behind the code.

The Material Data First, I mapped real-world material properties to JavaScript objects.

`// src/components/BeamVisualizer.jsx

const materials = {
steel: {
name: 'Structural Steel',
E: 200, // Young's Modulus in GPa
density: 7850
},
aluminum: {
name: 'Aluminum 6061',
E: 69,
density: 2700
},
wood: {
name: 'Oak Timber',
E: 11,
density: 750
}
};`

The Calculation Loop

I used useCallback to memoize the physics calculation. This prevents React from recalculating the physics on every single frame unless the force or material changes.

// Calculating deflection based on Hooke's Law approximation const calculateDeflection = useCallback(() => { const E = materials[material].E; // Simplified deflection logic for visual representation // Force / Modulus = Raw Deflection Factor const rawDeflection = (force / E); return rawDeflection; }, [force, material, materials]);

Visualizing Stress with SVG Paths

Here is where the "Front End" meets "Mechanical."

Instead of using a heavy 3D model for the beam bending, I used a dynamic SVG Path. By manipulating the Bézier curve control points based on the calculated deflection, I can simulate bending smoothly.

`// 3. VISUALIZATION LOGIC
const deflectionVal = useMemo(() => calculateDeflection(), [calculateDeflection]);

// Clamp the visual bending so it doesn't break the UI
const maxPixels = 100;
const curveDepth = useMemo(() => Math.min(deflectionVal * 0.8, maxPixels), [deflectionVal]);

// The Magic: A Quadratic Bézier Curve (Q) that updates dynamically
const beamPath = useMemo(() =>
M 40 150 Q 250 ${150 + curveDepth} 460 150,
[curveDepth]);`

By binding curveDepth to the Y-axis of the control point, the beam "bends" organically as the user drags the force slider.

Handling 60FPS Interactions

Since this is an interactive portfolio, performance is key. I didn't want the animations to lag on mobile devices.

Memoization: Every calculation is wrapped in useMemo or useCallback.
GPU Acceleration: I used Framer Motion for the UI elements, which handles transform changes on the GPU thread rather than the main thread
Intersection Observer: The grid background animation pauses automatically when the user scrolls away from the component (saving battery life).

// Pausing animations when off-screen const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { gridBg.classList.remove('paused'); } else { gridBg.classList.add('paused'); } }, { threshold: 0.01 } );

The Result

The final result is a "Digital Twin" of a mechanical stress test. It’s not just a fancy animation; it’s accurate to the material properties. Steel resists bending 3x more than Aluminum, just like in real life.

You can play with the live simulator here: yogavignesh.me

I’m currently looking for roles that bridge the gap between Hardware/Engineering and Full Stack Development. If you're building digital twins or IoT dashboards, let's talk.

Tech Stack: React, Three.js, Framer Motion, Tailwind.

react #webdev #engineering #threejs #javascript

DEV Community: YOGA VIGNESH S