What I Wanted to Achieve
I wanted a simple blog portfolio so people can:
- see my projects quickly
- read my thoughts on coding and design
- get in touch easily
A single place to show my work, share ideas, and stay connected.
Design Phase: Color, Layout, and Feel
Before I wrote any code, I sketched out:
-
Layout
- full-width hero header
- card grid for posts and projects
- nav bar linking Home, Blog, Portfolio, About, Contact
-
Color
- primary: deep blue for buttons and links
- background: off-white for easy reading
-
Typography
- headings in a bold sans-serif
- body text in an easy-reading serif
Using a simple palette and clear fonts makes the site look clean and friendly.
Development Process
-
Framework
I picked Next.js for fast page loads and smooth setup. -
Content
- blog posts and the About page are in Markdown
- home page shows the latest posts automatically
- separate pages for Blog (with search and tags), Portfolio, and Contact
-
Styling
I wrote SCSS files to match the colors and fonts and shared them across the header, footer, and cards. -
Extras
- contact form that sends emails
- basic search by keyword
- tag filters to sort posts
The Outcome
- a fast site that works on phones, tablets, and desktops
- one place for my writing, projects, and contact info
- easy to update by adding a new Markdown file
I’m happy with how it turned out. It feels professional and approachable, and it does exactly what I planned.