1. where it all starts

I always start with a rough idea in Figma figma, its a really easy tool to use even if its your first time, i reccomend watching some YouTube youtube videos to get the basics of it down.

2. the preparation

Once you have a rough idea of how your site wants to be built. Start with choosing your branding, so:

color pallete
logo
fonts

im a big fan of font combos like a modern font + some sort of a italic font (eg. like on aeri.rest)

reccomended tool: (fontjoy)[https://fontjoy.com/]

3. component/icon libraries

If you are too lazy (like me) to build your own components heres some of component libraries that i reccomend:

ready components:
Aceternity Ui
Shadcn
Reactbits
Magic Ui

bases:
Chakra UI
Radix Ui

icons:
Iconify (PLEASE USE ICONIFY ITS GENIUNENLY THE BEST ICON LIBARRY EVER)
Lucide Icons
Phosphor Icons
Heroicons
Tabler Icons

my favourite — iconify example:

import { Icon } from "@iconify/react";

export function TechPill() {
  return (
    <span className="inline-flex items-center gap-1.5">
      <Icon icon="logos:nextjs-icon" className="h-4 w-4" />
      Next.js
    </span>
  );
}

browse any icon on iconify.design, copy the name (eg. logos:figma, mdi:github) and pass it to the icon prop.

4. motion

when you want the site to actually feel alive, i reach for framer motion. scroll reveals, hover states, layout animations — its what i use on this site and its pretty easy to pick up if you already know react.

my favourite — framer motion example:

"use client";

import { motion } from "framer-motion";

export function FadeUpCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ y: -4 }}
      transition={{ duration: 0.4 }}
    >
      hover me
    </motion.div>
  );
}

swap any div for motion.div, add initial + animate, and youre done. use whileHover / whileTap for interactions.

5. deployment

once the site is built you gotta put it somewhere. heres what i reccomend:

Railway railway — frontend + backend. super easy if you need an api, database, or full-stack app in one place. connect your github repo and it just works.

Vercel vercel — frontend. this is what i use for this site. made for next.js, deploys in seconds, free tier is more than enough for a portfolio.

if youre just shipping a static site or next.js frontend, go vercel. if you need a backend running too, railway is the move.

6. build :)

i really hope this blog helped you at least to understand the base of building a standard but clean website, i tried to fit as much useful tools / components as i could for yall.

took me a good while to write this blog so i hope someone actually reads it :3 cofee dud