Developers have a bad habit of building Swiss Army knives when all they need is a sharp blade. We reach for heavy frontend frameworks before the first line of HTML is written. We bolt on animation libraries, state management tools, and build pipelines powerful enough to run a small company. Then we wonder why our portfolio sites take three seconds to paint, why the navigation breaks on mobile, and why hiring managers bounce before they ever see the projects we spent months building.
I took a different route with my latest portfolio. I stepped away from the ecosystem of endless dependencies and built the entire site with semantic HTML and clean CSS. No JavaScript frameworks. No build steps. No third-party animation engines. Just the platform itself, layout handled by CSS Grid and Flexbox, and a design philosophy that treats speed and clarity as features rather than afterthoughts.
The result is light, fast, and professional. Here is exactly how I approached it.
Start with the Foundation
Most over-engineering begins at the foundation. A portfolio does not need to be a single-page application. It needs to display your work, tell people how to contact you, and get out of the way. I used semantic HTML because the browser already knows how to render a nav, an article, and a footer. When you use the right element for the right job, you get accessibility, search engine visibility, and responsive behavior essentially for free. You also write less code. A div with five ARIA attributes is just a verbose imitation of a button. I avoided that entirely.
For layout, CSS Grid and Flexbox are more than sufficient. Grid handles the macro structure: the overall page sections, the project gallery, the alignment of major blocks. Flexbox manages the micro interactions: navigation links inside that capsule, centering text within cards, pushing a footer to the bottom of the viewport. Together they replace every reason you might have had to import a twelve-column grid framework in 2018. The code stays readable. The CSS file stays small.
Color, Type, and Restraint
I wanted the portfolio to feel calm the moment it loaded. The background uses a light base with subtle radial gradients. Nothing aggressive. The gradient sits at low opacity, creating a soft depth that keeps the page from feeling flat without shouting for attention. It loads instantly because it is pure CSS. There are no hero images to compress, no WebP fallbacks to manage, no JavaScript lazy-loading libraries to configure.
Typography carries the personality. I paired Outfit with Ovo. Outfit, a geometric sans-serif, handles all the UI text: navigation labels, button text, body copy, meta details. It is crisp on screens and stays legible at small sizes. Ovo, a medium-contrast serif, serves the headers and major headlines. The pairing gives the page a quiet editorial feeling. It looks designed, not themed. Most importantly, both fonts load from a single call to a font service or self-hosted files. There is no layout shift, no flash of unstyled text, no script swapping weights after the initial render.
The Floating Capsule Menu
Navigation is where portfolios often collapse under their own weight. Full-screen overlay menus, staggered animation scripts, and hamburger icons that require forty lines of JavaScript to toggle a class. I wanted none of it.
I built a floating glassmorphic capsule menu. It is a single horizontal container, rounded at the edges, positioned fixed near the top of the viewport. The glassmorphism comes from a semi-transparent background color and a backdrop-filter: blur() property. It floats above the content without obscuring it, provides immediate access to every section, and collapses gracefully on smaller viewports without a complete redesign. The effect looks modern because the browser handles the compositing, not a canvas library.