As developers, we all know the standard portfolio formula: dark mode, neon accents, a floating 3D object, and a terminal typing animation. They look great, but after looking at hundreds of them, they start to blur together.
When I transitioned from marketing into software engineering a few years ago, I learned one universal truth: you need a good hook to stand out.
I wanted my developer portfolio to be instantly memorable while still showcasing my frontend skills. So, I decided to build a digital broadsheet—a vintage newspaper-style portfolio, complete with a functional "Evening Edition" (Day/Night mode) toggle.
Here is a breakdown of how I designed and built it using React and plain CSS.
- The Layout Strategy: CSS Grid is Your Typesetter A newspaper is defined by its columns, rigid borders, and varied headline sizes. To achieve this, CSS Grid is absolutely non-negotiable. Flexbox is great for alignment, but Grid is necessary for that rigid, blocky masonry look of a 1920s newspaper.
Here is a simplified version of the main layout structure:
CSS
.newspaper-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
border-top: 4px solid var(--ink-color);
border-bottom: 4px solid var(--ink-color);
padding: 10px 0;
}
.front-page-headline {
grid-column: span 12;
text-align: center;
border-bottom: 2px solid var(--ink-color);
margin-bottom: 20px;
}
.article-main {
grid-column: span 8;
column-count: 2; /* Creates the classic multi-column reading flow */
column-gap: 20px;
}
.sidebar-ad { /* Perfect for the 'Skills' section */
grid-column: span 4;
border-left: 1px solid var(--ink-color);
padding-left: 20px;
}
By utilizing column-count inside the main article grid span, the text naturally flows from one column to the next, just like print.
- The "Evening Edition" (Dark Mode) A vintage newspaper is usually off-white (sepia) with dark gray ink. But I still wanted a dark mode for late-night readers. I branded this the "Evening Edition."
I used CSS Variables bound to a data-theme attribute on the root HTML element, controlled by a simple React state hook.
The CSS Variables:
CSS
:root {
--paper-color: #f4f1ea; /* Sepia white /
--ink-color: #2b2b2b; / Faded black ink */
}
[data-theme='evening'] {
--paper-color: #1a1a1a;
--ink-color: #e0dcd3;
}
The React Hook:
JavaScript
import { useState, useEffect } from 'react';
const ThemeToggle = () => {
const [isEvening, setIsEvening] = useState(false);
useEffect(() => {
document.documentElement.setAttribute(
'data-theme',
isEvening ? 'evening' : 'morning'
);
}, [isEvening]);
return (
className="theme-toggle-btn"
onClick={() => setIsEvening(!isEvening)}
>
Read the {isEvening ? 'Morning' : 'Evening'} Edition
);
};
- Typography and Texture The design falls apart without the right fonts.
Headlines: I used Playfair Display (Google Fonts) tightly kerned for that dramatic, bold broadsheet look.
Body Copy: I went with Lora or Merriweather to mimic the classic serif readability of print media.
To make it feel tactile, I applied a very subtle CSS SVG noise filter across the background to give it a "recycled paper" grain.
CSS
.noise-overlay {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none;
background: url('/noise.svg');
opacity: 0.4;
z-index: 999;
}
The Final Result
Building this was a massive shift from standard enterprise UI components. It forced me to think deeply about typography, semantic HTML, and CSS Grid. Currently, I have it deployed smoothly via GitHub Pages.
Has anyone else built a portfolio that breaks away from the standard layout? Drop your links below—I would love to read through your code and see your designs!
