Renielyn Lenon Portfolio

Overview

Renielyn Lenon's portfolio embodies a 'Minimalist Professional' aesthetic—a design philosophy that prioritizes clarity, technical credibility, and human approachability through restrained typography and generous whitespace. The brand serves full-stack developers and technical professionals who value substance over decoration, presenting a clean light-first interface (rgb(255, 255, 255) background with oklch(0.21 0.034 264.665) text) that transitions seamlessly to dark mode (rgb(18, 18, 18) background with rgb(255, 255, 255) text). The UI evokes a sense of organized expertise: every element has a purpose, every interaction is predictable, and the visual hierarchy guides users toward project work and professional credentials without distraction.

The brand voice is direct, confident, and grounded. Vocabulary favors technical precision ('full-stack web developer,' 'Laravel & WordPress,' 'backend systems') over marketing flourish. Tone is approachable but professional—never casual, never breathless. Example sentence in brand voice: 'I build scalable backend systems and client-facing applications using Laravel, WordPress, and React, with a focus on SEO and performance.'

Colors

The color system is built on a neutral-first foundation with strategic accent colors that signal interactivity and technical affiliation. Primary (#121212) is the dominant text and button color, providing maximum contrast (21:1 ratio) on white surfaces and establishing a serious, professional tone. Secondary (#0a66c2, LinkedIn blue) is reserved for hyperlinks and secondary CTAs, creating visual distinction from primary actions while maintaining professional credibility. Tertiary (#ea4335, Google red) is used sparingly for error states, alerts, and accent highlights—never on primary CTAs. The surface stack progresses from pure white (#ffffff) through subtle grays (#f5f5f5, #f0f0f0, #e9ecef) to create depth without relying on shadows; this 'flat-with-layers' approach keeps the interface clea

Typography

The type system uses a single typeface family—the system stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)—to ensure consistency across platforms and eliminate font-loading delays. Display (60px, 700 weight, -0.04em tracking) is reserved for hero sections and major page titles; headline-lg (40px, 600 weight, -0.02em) for section headings; headline-md (28px, 600 weight, -0.01em) for subsections; title-lg (20px, 600 weight) for card titles and component labels. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and featured content, while body-md (16px, 400 weight, 24px line-height) serves as the default for all body copy. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text, ba

Layout

The layout uses a fixed max-width container (768px / 48rem) centered on the viewport, creating a focused reading experience that prevents line lengths from exceeding 75 characters. The grid is 12 columns with a 24px gutter, though most components span full-width within the container for simplicity. Vertical rhythm is established through the spacing scale: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element gaps use sm spacing (12px). The header is sticky (position: sticky, top: 0, z-index: 40) with a semi-transparent backdrop blur (backdrop-filter: blur(20px), background: rgba(255, 255, 255, 0.7)) to maintain visual hierarchy while keeping navigation accessible. Hero section uses pt-16 sm:pt-16 (64px on mobile, 64px on desktop) for brea

Elevation & Depth

Depth is conveyed through a minimal shadow system that avoids heavy drop-shadows in favor of subtle, spread shadows that suggest layering without drama. Level 1 (base content): no shadow, flat on the surface. Level 2 (cards, input fields): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px vertical offset and 8px blur radius that creates gentle separation from the background. Level 3 (modals, popovers, hover states): box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18), a larger shadow with 18px offset and 40px blur that signals elevation and focus. Borders are used as the primary dep

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied consistently to create approachability and reduce visual harshness, but never so aggressively that they obscure the component's purpose. Buttons use lg radius (1rem, 16px) for a friendly, clickable appearance that invites interaction. Cards and containers use xl radius (1.5rem, 24px) to create a more generous, breathing quality that emphasizes content. Input fields use DEFAULT radius (0.5rem, 8px) to maintain a compact, utilitarian feel that signals 'form element' without softness. Badges and pills use full radius (9999p

Components

Action Elements Buttons follow a two-tier system: primary (background: #121212, color: #ffffff, padding: 12px 24px, height: 48px, rounded: 1rem) for main CTAs like 'View Resume,' and secondary (background: transparent, border: 1px solid #d0d0d0, color: #121212, padding: 12px 24px, height: 48px, rounded: 1rem) for alternative actions. Primary buttons transition to #1f1f1f on hover (transition: background-color 200ms ease-in-out) and #0a0a0a on active, providing clear feedback. Secondary buttons transition to background: #e9ecef on hover with border-color: #121212, maintaining visual distinction. All buttons use label-md typography (14px, 600 weight) and are vertically centered with flexbox. Links use color: #0a66c2 (secondary) with no underline by default; on hover, they transition to #

Do's and Don'ts

**Do**

• Do use the primary color (#121212) for all main CTAs and primary text to maintain visual hierarchy and professional credibility.
• Do apply generous whitespace (lg spacing, 40px) between major sections to prevent cognitive overload and emphasize content importance.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto) to ensure fast loading and platform consistency—never substitute with web fonts unless absolutely necessary.
• Do transition all interactive elements (buttons, links, cards) with 200ms ease-in-out timing to provide smooth, predictable feedback.
• Do maintain a max-width container (768px) to keep line lengths readable and prevent the layout from feeling scattered on ultra-wide screens.
• Do use the secondary color (#0a66c2) exclusively for links and secondary CTAs to create visual distinction without competing with primary actions.

**Don't**

• Don't use heavy shadows (box-shadow > 0 18px 40px) on primary content—reserve them for elevated states like modals or hover effects.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply negative letter-spacing to body text; reserve it for headings (display, headline-lg, headline-md) where visual tightness enhances sophistication.
• Don't use the tertiary color (#ea4335) on primary CTAs or positive actions—reserve it for errors, alerts, and destructive actions only.
• Don't exceed the container max-width (768px) on desktop; let content breathe rather than stretching to fill the viewport.
• Don't animate transitions faster than 200ms or slower than 400ms; this range feels responsive without appearing sluggish or jarring.