winpeed.Technologies behind winpeed.com and why I chose them
Here's the technology behind my portfolio site — winpeed.com. Get insight into what tools and technologies I used, and why I used them.
I'll keep it as simple as possible. No buzzwords for the sake of it. Just what each tool does and the reason it made sense for my site.
I rebuilt this portfolio recently (sidebar layout, dark mode, TypeScript, etc.).
If you want that full story first, read I redesigned winpeed.com in one day. This post focuses on the stack.
How my site is organised
Everything I used falls into three groups:
- Building the site — pages, layout, styling, animations
- Managing content on the site — blog posts, images, contact form
- Putting it online — hosting, speed, and SEO
Here's each tool, layer by layer.
Layer 1 — Building the site
React
What it is: A JavaScript library for building user interfaces in pieces called components.
Why I use it: I built the UI in reusable parts. Some of the components include a header, a project card and a blog list instead of just one giant HTML file.
Most frontend roles expect React, and my portfolio is good practice for it.
Next.js
What it is: A framework built on top of React. It adds routing, performance features, and a clear project structure.
Think of it as: React with the extra pieces you need for a real website — routing, performance, structure.
Why I use it:
- Each page (About, Blog, Projects) is easy to organise
- Images load faster with built-in optimisation
- Blog posts can be pre-built for speed
- I can add small backend features (like refreshing the blog after I publish) without a separate server
You can actually build a portfolio with plain React.
I just added Next.js because it handles production details for me. I was already on it from an older version of my site, so I stayed.
TypeScript
What it is: It's basically JavaScript with types. Instead of just name, you can say name must be a string.
Why I use it: It catches mistakes early. Wrong data type? My editor flags it before I even deploy.
It had been a while I worked on my portfolio so it came in handy since I was the only one working on the repo.
I switched when refactoring started to feel risky especially during the redesign.
styled-components
What it is: A way to write CSS inside your React components.
Why I use it: The styles for my hero section live right next to the hero code. I find that easier to manage than jumping between separate CSS files — especially on a small project.
I didn't use popular frameworks like Tailwind CSS here because styled-components is what I already know well. So, you are free to use what you'll actually stick with in the long run.
Framer Motion
What it is: A library for animations like slide-ins, fades, small movements.
Why I use it: My mobile menu slides in smoothly. That's about the level of animation I wanted. Nothing extra. Nothing flashy. Just polish.
You can always do without animations on your first portfolio if they seem to slow you down.
A clean static site always beats a half-finished animated one.
Google Fonts (via next/font)
What it is: Custom fonts for the site. Today, I use Inter for body text and Merriweather for headings.
Why I use it: Default browser fonts are fine, but typography changes how intentional a site feels. Next.js next/font lets me load fonts in a performance-friendly way without extra setup headaches.
Layer 2 — Managing content on the site
Contentful (my blog CMS)
What it is: Contentful is a headless CMS — basically an admin panel where I write blog posts, but the website itself is still built with Next.js.
I just wanted to run away from the responsibility of building an admin page for posting new content. I needed something quick and sharp.
Think of it as: WordPress for writing, without WordPress controlling how the site looks.
Why I use it:
- I write posts in a simple editor
- My blog pulls them in automatically
- I don't have to edit code every time I publish
My first portfolio was WordPress. It worked. This headless CMS approach gives me more control over the design while keeping writing easy.
Hyvor Talk (blog comments)
What it is: A comment widget I embed on blog posts. I pay €50/year for this widget.
Why I use it: I wanted readers to respond, but I didn't want to build a comment system from scratch.
HeroTofu (contact form)
What it is: A free form service. When someone fills out my contact page, HeroTofu sends me the message.
Why I use it: No backend code. No email server setup. For a portfolio contact page, that's enough.
As you already see in my implementation, You don't need to build everything custom. Use simple tools for contact forms, comments, or even newsletters until you actually need more control.
A JSON file for projects
What it is: My projects page reads from a local projects.json file not a CMS.
Why: I don't update projects every week. A simple file is easier than over-engineering it.
Layer 3 — Putting it online
Netlify (hosting)
What it is: Where my site lives on the internet. I push code to GitHub, and Netlify builds and serves it at winpeed.com.
Why I use it: I was already on Netlify. It works well with Next.js, and I didn't want a platform change on top of a redesign.
Some other Alternatives Vercel, Cloudflare Pages
Just Pick one and learn it properly.
SEO basics
What it is: Making sure Google (and LinkedIn, Twitter) understand what each page is about.
What I added:
- Proper page titles and descriptions
- Share images when someone links my site
- A sitemap (a list of all my pages for search engines)
- Basic security headers
SEO sounds big for most developers but for me It was easy to flow with because of my background as a digital marketer.
You can start with good page titles, a meta description on each page, and a sitemap.
That's mostly what a portfolio needs. Google's SEO starter guide is a solid place to learn the basics.
Google Analytics
What it is: This is one of google's tools that tracks how many people visit the site and which pages they view.
Why I use it: Light curiosity, not obsession. It helps me know if anyone is actually reading the blog.
Extra details that improved the site
Not visible on day one, but worth mentioning:
- Loading skeletons — placeholders while a page loads, instead of a blank flash
- Linting and formatting — keeps the codebase clean
- Pre-commit checks — catches issues before I push to GitHub
These help me maintain the site long-term.
What I didn't use
| I skipped | Why |
|---|---|
| Tailwind | I already work comfortably with styled-components |
| A custom backend | HeroTofu + Contentful cover what I need |
| WordPress (this time) | I wanted more design control |
| Fancy UI kits | I wanted my own look |
Building your first portfolio?
You don't need my exact stack. A sensible path:
- HTML, CSS, JavaScript — learn the basics
- React — components and state
- Next.js — when you need a proper multi-page site
- One host — Netlify or Vercel
- Keep the blog simple — even markdown files work at first
Add TypeScript, a CMS, and animations when you actually need them.
Why these choices worked for me
I needed tools I could ship with alone, explain in an interview, and return to months later without getting lost.
That's the main idea behind this stack — not hype, just what worked for winpeed.com.
Explore the live site, check the projects I built with these tools, or reach out if you have questions.
Official docs
Share this post