From Mechanical to Code: Why I Built My Portfolio Website from Scratch

An engineer’s case for building from first principles

I’m Carmina, a mechanical engineer by training and a builder at heart. My projects have taken me from lab benches and CNC mills to cleanrooms and CFD simulations. When it came time to showcase my work, I wanted a portfolio that felt engineered, not just assembled. So I built this website from scratch.

No templates. No WordPress. Just clean code, deliberate choices, and a desire to learn something new—the same way I learned SolidWorks or MATLAB: by doing.

Why Build It Myself?

As engineers, we often talk about trade-offs like speed versus control or complexity versus elegance. I could have launched something quickly using a website builder, but that would have hidden the very skills I wanted to highlight: systems thinking, technical problem solving, and design from first principles.

"There’s something powerful about building your own tools—even digital ones."

By coding the site with HTML, CSS, and JavaScript, I was able to:

• Optimize page load time to under 1.5s on mobile
• Implement modular structure for scalability
• Debug and test across browsers with intention
• Match layout precisely to my content needs

Design with Intention

Color choices weren’t just aesthetic; they were guided by visual ergonomics. I selected soft blues and muted golds for high-contrast readability without eye fatigue. Every margin and font weight was adjusted to reduce cognitive load and create a smooth, readable flow.

The layout reflects how I think: organized hierarchy, simplicity, and responsiveness. Typography is carefully weighted. Animations are minimal and purposeful. It’s all about clarity and control, similar to tuning a damping ratio in a real system.

What I Gained Technically

I approached this the same way I would a physical prototype: design, build, test, and iterate. In doing so, I:

• Wrote over 1,200 lines of custom CSS
• Built an interactive JS project gallery without frameworks
• Practiced version control using Git and GitHub
• Ran Lighthouse audits to validate performance and accessibility

I also learned to debug like an engineer—reading console errors like failure logs and isolating issues like using a multimeter. I now understand the front-end stack not just visually, but structurally and functionally.

Why It Was the Right Call

This site does more than showcase projects. It demonstrates how I solve problems and learn quickly. The skills I practiced such as modular thinking, performance optimization, and user experience design apply directly to engineering design, systems integration, and technical documentation.

I didn’t just publish a website. I delivered a solution with traceable design decisions, intentional architecture, and measurable outcomes. That, to me, is the essence of good engineering.

What’s Next?

This site will continue to evolve. I plan to add a technical writing blog, expand the image gallery with a dynamic JS masonry layout, and eventually refactor to React or Vue to scale functionality further.

If you're an engineer thinking of building your own site, I encourage you to go for it. Not because it’s easy, but because it challenges you to think like a designer, a developer, and a systems engineer all at once.