This Website — Case Study · Maycie Rosado

Self-Initiated · Personal Branding · 2026

Building
My Own
Digital Home

This portfolio site is itself a project, one that required every skill I use professionally. From brand identity and content strategy to UX architecture and technical execution, this is the most personal work in my portfolio.

Brand Identity & Visual Design
UX Architecture & Page Planning
Content Strategy & Copywriting
HTML & CSS — 8 Pages Built
Mobile Responsiveness & QA
WordPress & Elementor Deployment
AI-Human Collaborative Process

A Portfolio That Actually Demonstrates What I Do

Project Type
Self-Initiated · Personal Branding
Timeline
Built in focused sessions over several days
Platform
WordPress.org · Hostinger · Elementor
Collaboration
Maycie Rosado + Claude (Anthropic AI)
Pages Delivered
8 — Homepage, About, Portfolio, 3 Case Studies, Contact, 404

Most portfolio sites for digital strategists are built by developers, templated, or outsourced entirely. I wanted mine to be different. Every page needed to reflect a clear strategic decision, every section needed to earn its place, and the entire site needed to work beautifully on desktop and mobile.

TI built it in collaboration with Claude, Anthropic's AI assistant. Not to hand off the work, but to have a technically capable partner to execute the vision I directed. Every design decision, content choice, and structural call came from me. The code was the medium, not the message.

A Visual Identity Built on Intention

Every visual choice was deliberate, from the color palette to the typography to the way content breathes on the page. I didn't want a generic portfolio. I wanted something that felt like me.

Color Palette

Warm Olive & Cream

Rooted in warm, earthy tones: deep olives, soft creams, and a muted gold accent. Elevated and editorial without feeling cold or corporate. It mirrors the hospitality industry I work in.

Typography

Cormorant Garamond + Jost

Display headings use Cormorant Garamond, a high-contrast serif that brings elegance and personality. Body copy uses Jost, a clean geometric sans-serif at light weight. Sophisticated and easy to read.

Layout System

Grid-First, White Space as Design

CSS Grid throughout, with a consistent 2px gap between sections creating a subtle tile effect. Generous padding and restrained borders let content breathe.

Signature Detail

The Arch Photo Frame

The arched portrait frame achieved through CSS border-radius became a signature visual element across the homepage and about page. It turns a functional portfolio into something that feels personal.

Eight Pages. One Coherent Story.

The site architecture was planned the same way I plan client websites: starting with the user journey, mapping conversion goals, and making sure every page earns its place.

01
User Journey First

Designed for a hiring manager or potential client landing on the homepage, structured to move them from curiosity to credibility to contact.

02
Content Before Code

Every page was content-planned before a single line of HTML was written. Design served the content, not the other way around.

03
Portfolio Structure

Three categories mirroring exactly how I talk about my work, each with its own case study page: scope, approach, projects, results.

04
Copywriting Voice

Professional but not stiff, confident but not arrogant. Every word written or closely directed by me, consistent across all 8 pages.

05
SEO Foundations

Page titles, meta descriptions, heading hierarchy, and URL structure planned from the start. It wouldn't make sense to build an SEO strategist's portfolio without it.

06
Mobile as a Priority

Built into every page from the start, with three breakpoints ensuring the site works across every screen size.

From Concept to Live Site

Hand-written HTML and CSS throughout. No frameworks, no libraries, no shortcuts. Each page deployed into WordPress via Elementor's HTML widget.

HTML & CSS8 fully custom pages with a consistent design system and shared CSS variables.
Mobile ResponsivenessThree breakpoints per page with targeted fixes for every section and layout.
WordPress & ElementorDeployed on WordPress.org with Hostinger hosting, using a single full-width HTML widget per page.
Performance & QAEach page tested on desktop and mobile, with Elementor-specific CSS overrides to resolve rendering conflicts.
AnimationsScroll-triggered fade-ins on all content blocks using the IntersectionObserver API. No JavaScript libraries needed.
8
Pages Built & Deployed
3
Breakpoints Per Page
0
Frameworks or Libraries
1
Consistent Design System

Directing AI — A New Kind of Creative Partnership

This site was built in collaboration with Claude, Anthropic's AI assistant. Collaboration doesn't mean delegation. Every decision came from me. Here's how the process worked.

01
Vision & Direction

I defined everything first: brand identity, color palette, typography, tone of voice, page structure, and content. Claude didn't make creative decisions. I did.

02
Iterative Review

Every page was reviewed on desktop and mobile before being approved and deployed. When something wasn't right, I identified it and directed the fix.

03
Problem Solving

Technical issues required real debugging. I diagnosed the problems and we worked through solutions together, building my understanding of the technical layer as we went.

04
Content Ownership

Every word on this site is mine. The AI helped structure and refine, but the ideas, experiences, and voice are entirely my own.

05
What This Demonstrates

Knowing how to work with AI tools is itself a professional skill. This project demonstrates my ability to brief, direct, review, and iterate with AI to deliver a high-quality outcome, the same way I would with any creative or technical collaborator.

A Portfolio That Practices What It Preaches

A fully custom, hand-coded portfolio site live at maycierosado.com.
8 pages with consistent design system, responsive across all screen sizes
Unique visual identity that stands apart from template-based portfolios
Case study pages demonstrating real strategic thinking and project ownership
A live demonstration of UX planning, content strategy, and technical execution working together
A practical example of effective AI collaboration as a professional skill

"I didn't want a portfolio that just described what I do. I wanted one that showed it, in every layout decision, every line of copy, and every page that actually works on your phone."

— Maycie Rosado

Skills Demonstrated

Brand Identity UX Architecture Content Strategy Copywriting HTML & CSS Mobile Responsiveness WordPress Elementor AI Collaboration QA & Deployment Project Direction