Rafael | Frontend work with product judgment

Product-Focused Frontend Developer

I build fast, accessible interfaces with Next.js, React, and TypeScript. Goldestern is my portfolio brand: the work I publish, the decisions behind it, and the standards I bring to product UI.

View workContact
Next.js App RouterReactTypeScriptClear project stories

Work shown

2 project write-ups

Primary stack

Next.js App Router / React / TypeScript

How I build

Performance, accessibility, and restrained motion stay part of the work.

  • Performance-first
  • Accessible by default
  • SEO-ready
  • Design systems
  • Reliable delivery

Selected work

Project write-ups structured around outcome, constraints, and implementation decisions.

2 project write-ups

  1. 01

    Portfolio Website

    Designed and built my first professional portfolio as a real product: a fast, accessible Next.js site that presents my work, process, and contact paths clearly.

    Solo frontend developer | Product strategy, information architecture, frontend implementation, content structure, SEO, accessibility, deployment | First self-directed portfolio project

  2. 02

    PontoApp

    Built a SwiftUI time clock app for iPhone and Apple Watch, with contextual punch actions, local history, daily summaries, and cross-device sync.

    Solo SwiftUI app developer | Native app architecture, iPhone UI, Watch UI, shared state model, local persistence, device sync, project documentation | Initial native app build, May 2026

Focus

Product UI with technical care.

Read

Context, decisions, and results stay easy to follow.

Posture

Systems thinking stays visible in the UI itself.

Featured work

Selected project stories showing what I built, why decisions changed, and how the implementation holds together.

Each write-up keeps outcome, role, scope, and implementation choices close to the surface, then opens into deeper technical detail for readers who want it.

Browse the work

Hover, focus, or tap a case study to preview the details before opening the full write-up.

02 live

Spotlight

Portfolio Website

Designed and built my first professional portfolio as a real product: a fast, accessible Next.js site that presents my work, process, and contact paths clearly.

Open case study

What shipped

Published a production-ready portfolio with structured case studies, SEO assets, GitHub and LinkedIn contact paths, and a deployment flow connected to Hostinger.

The write-up keeps context, trade-offs, implementation detail, and results together so the work can stand on its own.

PortfolioFrontendProduct thinking

Role

Solo frontend developer

Scope

Product strategy, information architecture, frontend implementation, content structure, SEO, accessibility, deployment

Timeline

First self-directed portfolio project

Read

5 min read

Implementation surface

Stack references stay attached to project decisions, so the work shows development range without collapsing into a keyword wall.

Next.js App RouterReactTypeScriptTailwind CSSMDXHostinger
Read the full story

Start here for a quick read, then open the full case studies for context, constraints, decisions, implementation details, and results.

View all work

Current focus

This is Rafael's frontend work, shaped around clear product UI and decisions that can be inspected.

Goldestern is my portfolio brand and the home for the projects I am publishing now. The site keeps selected work, trade-offs, and contact paths easy to find without turning the experience into a showpiece.

Project stories

02

Selected work is published and easy to evaluate.

Each entry keeps outcome, role, scope, and technical decisions visible before the long read starts.

Outcome-ledRole + scopeTechnical decisions

Stack in use

12

The stack is attached to real implementation work.

The work connects web architecture, content structure, native app state, and interface details to real project decisions.

Next.js App RouterReactTypeScript

Focus areas

06

My current frontend focus is visible across the work.

Product UI, accessibility, interface systems, native app flow, and maintainable implementation all show up in the project set.

PortfolioFrontendProduct thinking

Case-study depth

08

Each write-up keeps the same practical reading path.

The structure helps new projects scale without losing context, decisions, implementation detail, or results.

ContextDecisionsResults

Capabilities

Web quality, system thinking, and interface craft are visible parts of the deliverable.

How I turn frontend requirements into clear, durable product interfaces.

Capability 01

Performance posture

Performance-first builds

I build pages with fast rendering, stable layout, and low-friction navigation on real devices.

Stable layout, fast rendering, and low-friction page transitions on real devices.

Capability 02

Accessibility system

Accessible interface systems

Keyboard navigation, readable contrast, focus-visible states, and reduced-motion support are treated as baseline requirements.

Focus visibility, readable contrast, keyboard reachability, and reduced motion are part of the baseline.

Capability 03

Design system

Design system implementation

Typography, spacing, surfaces, and interaction states are tokenized so the UI stays consistent as new work is added.

Tokens, reusable patterns, and consistent surfaces make the interface feel authored instead of improvised.

Capability 04

Search visibility

SEO and metadata discipline

Metadata, sitemap, robots, and page structure are handled as part of the foundation instead of post-launch cleanup.

Metadata, crawl posture, and page structure are handled like product requirements rather than cleanup.

Capability 05

Motion restraint

Motion as UX

Motion is used sparingly to reinforce hierarchy and affordance, then disappears cleanly when reduced motion is preferred.

Motion reinforces hierarchy and affordance, then gets out of the way when reduced motion is preferred.

How I work

Constraints first, measurable quality second, visual polish in service of clarity.

This is the operating posture I bring to Goldestern and to the product interfaces I build next.

  1. 01

    Principle 01

    Start with constraints

    I prefer explicit trade-offs, delivery scope, and architecture boundaries before visual polish starts.

    Scope, constraints, and trade-offs are explicit before the UI gets more decorative.

  2. 02

    Principle 02

    Build systems, not one-off screens

    Reusable patterns, stable content models, and tokenized decisions keep iteration fast without making the UI feel generic.

    Reusable patterns make iteration faster without making the interface feel generic.

  3. 03

    Principle 03

    Make quality measurable

    Performance posture, accessibility checks, and content clarity are visible parts of the deliverable.

    Quality gates stay visible through accessibility, performance, and clarity checks.

  4. 04

    Principle 04

    Keep the interface calm

    Premium does not mean noisy. Strong hierarchy, clean spacing, and precise motion do more than decorative excess.

    Visual polish is controlled so the interface stays calm, readable, and professional.

Contact

For roles, collaborations, and frontend opportunities, start here.

For roles, collaborations, and frontend opportunities, email is the most direct path. LinkedIn and GitHub are available for verification and context.

rafael@goldestern.com