Dev Components

Restrained: Steply's night-console neutrals carry the page, blurple is the one committed accent. Status colors appear only as soft fills with readable text. Switch the theme in the top bar to see the light values.

Inter stays Steply's working face. Unbounded is reserved for short display lines: the name, section titles, the contact line. JetBrains Mono appears only where the content is code, a date range, a ref or a flag key.

• Display--text-display
  Unbounded 700 Whenes Oliveira
• Section--text-display-sm
  Unbounded 600 Career log
• Title--text-lg
  Inter 600 Customer portal modernization
• Body--text-md
  Inter 400 / 1.6 Implemented and maintained feature-flag-based migration flows, allowing new implementations to be validated before completely switching users to the new backend.
• UI--text-sm
  Inter 500 Software Consultant at SUPERO
• Data--font-mono
  JetBrains Mono 400 2023-09 → 2026-08 · portal.users.modern-backend

Tight inside a group, generous between groups. Sections open with --space-16 above and --space-6 under the heading rule.

• --space-14
• --space-28
• --space-312
• --space-416
• --space-624
• --space-832
• --space-1248
• --space-1664

• --radius-sm
• --radius-md
• --radius-lg
• --radius-xl
• --radius-pill

One primary action per view. Links styled as buttons keep <a>; icon-only buttons always carry aria-label.

Badges state a status. Refs name git pointers in the career log. Tech chips list a stack; they never get color per technology.

Steply's alert, redrawn with a tinted field and a hairline border instead of a heavy side stripe.

Confirms a silent action, like copying an email. Any element with data-copy or data-copy-from copies and raises one bottom-right.

One static page per language, linked to each other. The current language carries aria-current="true"; each link names its language with hreflang, lang and an aria-label in that language. Following a link keeps a deep link such as #job-totvs. Scripts read their interface strings from i18n.js by <html lang>.

The first viewport of the portfolio. Name in Unbounded, role as on the résumé, current position with a live dot, one summary sentence, then the contact actions. Use <h1 class="profile-name"> on the real page.

Experience as version history. The gray lane is the career line; the blurple lane is the SUPERO consulting branch, with each client placement as a commit on it. data-branch="tip" starts a lane at its node, "start" ends it and draws the curve back to the career line, data-root ends the career line. Details use native <details>, so they work without JavaScript.

A case study the reader operates. Flip the flag and the request path moves from the legacy services to the modern ones, the way the TOTVS portal validated new implementations before switching users. Add data-flag-case; both states' switch label and status line live in the markup (data-flag-state="off|on"), so each language page carries its own copy; the script only toggles them.

A case study as a definition list: Context, Challenge, Approach and, only when the résumé states one, Outcome. Cards sit in .case-grid; an odd last card spans the row and splits its fields into two columns.

Shipped work gets the featured card spanning the row; study repositories sit below it. Language dots use GitHub's linguist colors through --lang.

Core skills exactly as grouped on the résumé. No bars, no percentages: the career log is where depth is proven.

For showing a pattern in the owner's own words. Highlighting is hand-marked with six token classes, so there is no highlighter to load. Mark anything reconstructed as Illustrative.

import { applyDecorators, Type } from '@nestjs/common';
import { ApiBearerAuth, ApiOkResponse, ApiOperation, ApiTags } from '@nestjs/swagger';

// One annotation instead of four stacked Swagger decorators per endpoint.
export function ApiDocs(tag: string, summary: string, response: Type<unknown>) {
  return applyDecorators(
    ApiTags(tag),
    ApiBearerAuth(),
    ApiOperation({ summary }),
    ApiOkResponse({ type: response }),
  );
}

// users.controller.ts
@Get(':id')
@ApiDocs('users', 'Find user by id', UserResponseDto)
findOne(@Param('id') id: string) {
  return this.users.findOne(id);
}

A plain entry: title, dates or status on the right, detail below. Stated as the résumé states it.

The page's close: the one place the accent fills a whole block. All four routes live here: email (written out and copyable, since mailto does nothing without a mail client), LinkedIn, GitHub and the résumé.