←Notas
20 de janeiro de 2026·2 min

Como construí este portfólio

I wanted a portfolio that reflected my approach as a developer: simple, efficient, and with attention to detail.

The inspiration

I started looking for references of minimalist portfolios. I wanted something that escaped the "dev template" standard — no neon gradients or exaggerated animations.

The feudal Japanese aesthetic came naturally. Elements like the Ensō (zen circle), torii gates, and wave patterns (seigaiha) bring that sense of precision and intention that matches backend development.

Tech stack

Next.js 14 (App Router)
Tailwind CSS
Framer Motion
JetBrains Mono

Why Next.js? SSG for performance, App Router for organization, and it's what I use daily — a portfolio is also a stack demonstration.

Why Tailwind? Productivity. Writing utility CSS directly in JSX speeds up the development of unique interfaces significantly.

Why Framer Motion? Declarative API that works well with React. Animations like whileInView and AnimatePresence are trivial to implement.

The animated title

The "handwritten" effect of the kanjis 原田 (Harada) was the detail I enjoyed making the most:

<motion.path
  d={strokePath}
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
  transition={{ duration: 0.4, delay: i * 0.15 }}
/>

Each kanji stroke is an SVG path with animated pathLength. The stroke order follows real Japanese calligraphy.

i18n without a library

I could have used next-intl or react-i18next, but for a static site with two languages, a simple Context solves it:

const LanguageContext = createContext<{
  locale: 'pt' | 'en'
  t: Translations
  setLocale: (locale: Locale) => void
}>()

Translations live in a typed object. TypeScript ensures I don't forget any string.

Dark/Light mode

Implemented with CSS class on <html> and CSS variables:

:root {
  --background: #fafafa;
  --foreground: #0a0a0a;
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
}

Simple, no content flash, persists in localStorage.

The Notes section

Instead of a formal blog that requires a regular publishing commitment, I opted for "Notes" — short posts, no pressure.

Pure Markdown with gray-matter for frontmatter and react-markdown for rendering. No CMS, no database, just .md files versioned in Git.

What I learned

  1. Less is more — every visual element needs to justify its existence
  2. Details matter — the kanji animation takes 2 seconds, but sets the tone for the site
  3. Don't over-engineer — Context API > i18n library for 2 languages