Personal Brand Website · Portfolio & Service Platform

Pixels by Raelyn | Personal Brand Website

A complete redesign of my web design portfolio and service platform, created to better communicate my work, process, services, and growing capabilities.

Start a similar project

Project type: Personal brand project
Year: 2026
Status: Launched, with ongoing updates
Category: Personal Brand Website · Portfolio & Service Platform
Platform & tools: TanStack Start · React · Tailwind CSS v4 · TypeScript · Vite

pixelsbyraelyn · pixels-by-raelyn

Image

Overview

About the project

Pixels by Raelyn is my personal brand and professional website. I redesigned it to serve as a clear, organized home for my work, process, services, and growing capabilities.

What they needed

I needed a portfolio that could communicate a range of skills without feeling scattered. It had to feel established and creative to potential clients, while also showing my design thinking and technical growth to hiring managers.

My role

I served as the brand strategist, UI designer, front-end developer, copywriter, and project manager.

·01Brand direction and visual design
·02Responsive website design
·03UX and content structure
·04Service presentation
·05Contact form and domain integration

The challenge

What needed solving

The challenge was to pull multiple disciplines under one brand without overwhelming visitors. The site needed to showcase real client work, explain my process, present services clearly, and make it easy to start a conversation.

The solution

What was designed

I redesigned the site as a focused service-based portfolio. I structured the content around Home, Services, Work, About, and Contact, gave each featured project its own case study, and built a cohesive visual system rooted in the Pixels by Raelyn logo.

·01Brand direction and visual design
·02Responsive website design
·03UX and content structure
·04Service presentation
·05Contact form and domain integration

Services provided

How I contributed

I designed, built, wrote, and shipped this site myself as a self-directed personal brand project.

Brand direction and visual design
Responsive website design
UX and content structure
Service presentation
Contact form and domain integration
Front-end development
Copywriting
SEO metadata

Project scope

What was included

·01Brand direction and visual design
·02Responsive website design
·03UX and content structure
·04Service presentation
·05Contact form and domain integration
·06Home page
·07Services page
·08Work index
·09Individual case study pages
·10About page
·11Contact page with inquiry form
·12Custom 404 page
·13Responsive navigation and footer
·14SEO metadata and sitemap

Process

Design and development process

I followed the same process I use with clients, adapted for a personal brand where I acted as both designer and stakeholder.

·01
Discovery
I clarified who this site is for, what it needs to prove, and how to balance client-facing and employer-facing goals.
·02
Strategy
I mapped the sitemap, page hierarchy, and case study template around the pillars I wanted to lead with.
·03
Design
I built the visual system from the Pixels by Raelyn logo, sage and camel palette, and editorial type pairing.
·04
Build
I developed the site in TanStack Start with React, Tailwind, and TypeScript, focused on responsive layouts and fast performance.
·05
Launch and iterate
I connected the domain, tested the contact form, and continue to refine copy and add new case studies.

Gallery

Selected screens

A closer look at the website I designed for Pixels by Raelyn | Personal Brand Website.

Key features

Deliverables and highlights

·01

Brand direction and visual design

The entire visual system is anchored to the Pixels by Raelyn logo, a sage and camel palette, and an editorial serif paired with a modern sans-serif.

·02

Responsive website design

The site is designed phone-first and scaled up to desktop, so it stays readable and easy to navigate on every device.

·03

UX and content structure

Home, Services, Work, About, and Contact are organized so visitors can quickly understand what I do and how to start a project.

·04

Service presentation

Website design, front-end development, strategy, and content are broken out with clear scopes and starting points.

·05

Contact form and domain integration

The Contact page includes a structured inquiry form, and the site is connected to a custom domain with verified email delivery.

·06

Individual case studies

Each featured client project gets its own dedicated case study page instead of a single gallery.

Outcome

The final result.

The site now functions as a self-directed portfolio and service platform that shows how I approach design, content, and development from start to finish.

Skills demonstrated

What this project shows I can do

Brand direction
Visual design
UI design
Front-end development
Responsive design
UX and content structure
Service presentation
Copywriting
Information architecture
SEO fundamentals
Domain integration
Project management

Next project

The Perfect Part® Comb

I supported the digital launch of The Perfect Part® comb through waitlist development, ecommerce setup, launch emails, social media content, and customer-facing website strategy. The campaign grew the waitlist beyond 500 subscribers, generated more than 40 early pre-orders, and helped product content reach over 12,900 views.