Personal Website Template

4 Layout Directions

Each layout shares the same warm cream + coral palette , but takes a structurally different approach. Click any card to view the full layout.

Direction 01

Bento Grid

Asymmetric card mosaic with masonry gallery, pill-tag skills, quote cards, and blog tiles. 10 sections including photo slots and bottom marquee ticker.

Card gridGallerySkillsBlog
Direction 02

Editorial Split

Fixed dark sidebar + scrollable main with gallery pairs, grouped skills, split testimonials, and two-column blog feed. 8 content sections.

SidebarGalleryTestimonialsWriting
Direction 03

Modular Dashboard

Structured panels with thumbnail gallery strip, skill progress bars, metric-rated testimonials, and spec-sheet tools table. 10 panels total.

Data panelsProgress barsTools tableGallery
Direction 04

Narrative Scroll

Editorial scroll with full-bleed gallery, flowing-prose skills, pull-quote testimonials, and long-form blog excerpts. 11 sections with serif typography.

EditorialFull-bleed galleryPull quotesBlog