Homepage

Kent C. Dodds kentcdodds.com

Design type: Personal brand homepage
Page tags: hero 3d illustration dark personal cards grid video chat bubbles courses footer split layout
Site tags: dark personal developer
Vocabulary: split herofloating 3d illustration collagestacked pill ctasscroll-down cuevideo thumbnail with play overlaytwo-tone headingsoversized stacked text linksraised content panelcourse cards on grid-pattern backdropvertical rotated labelchat bubble overlaysportrait photo splitcircle arrow linkmulti-column footer
Prompt: Show prompt
Build a dark personal homepage for [Your name], an educator/maker, with a friendly, polished look carried by 3D illustrations. Global shell (reuse on every page): near-black charcoal background #1f2028, raised panels #2a2d36, hairline dividers #2f323b. Text #ffffff for headings, #9aa0aa for muted copy. A neutral grotesk sans throughout (Matter, Inter or similar), medium weight, tight tracking on headings. Header: wordmark [Your name] + round search icon button on the left, centred row of small nav links (active link gets a short underline), round theme-toggle and avatar buttons on the right. Content sits in a ~1000px column with generous vertical rhythm (120–160px between sections). Signature link style: bold label followed by a 40px outlined circle holding an arrow, the circle fills on hover. Footer: four columns (name + tagline + social icons + signature, Contact/General link lists, Sitemap list, newsletter form with two tall filled inputs and a "Sign me up →" circle-arrow button), then a small copyright line. Sections, top to bottom: - Hero: left column has a ~32px white [Mission statement] with two stacked pill buttons beneath (filled white "[Primary CTA]", outlined "[Secondary CTA]"), and a circle down-arrow "Learn more about [Your name]" cue at the bottom. On the right, a playful collage of glossy 3D objects (gear, mascot, small leaves) scattered across the space. - Intro: a 16:9 video thumbnail with a play button and caption on the left. On the right, a white intro headline, a muted paragraph and a circle-arrow link. - Raised panel (#2a2d36, ~1100px wide): a two-tone question headline with a muted answer beside it, then a divider. Below that, a large stacked list of oversized muted words ([blog] → [courses] [podcasts]) where the active word is white with an arrow. Next to it, a small 3D icon, a title, a short stat sentence with bold numbers, and a circle-arrow link. - "[Recommendations]": a two-tone heading with a "See all →" circle link on the right, then 3 portrait image cards with date/read-time meta and titles. - Products: a two-tone heading, one wide feature card, then a 2×2 grid of cards. Each card shows a 3D logo on a faint square-grid backdrop, a tiny rotated mono label running vertically down the right edge, the product name and one-line description, and a small "Visit ↗" pill. - Community: a logo, two-tone headline and circle-arrow link on the left, and a photo on the right overlapped by rounded chat-bubble pills (light blue on top, light green below). - About teaser: a tall portrait photo on the left. On the right, a 3D object, a two-tone headline, a short bio and a circle-arrow link. Motion: illustrations float gently, and sections fade up on scroll. Responsive: every split stacks and the 2×2 grid becomes 1 column.
Added: 26 Oct 2026

Esc gallery · ← → pages

Full-page screenshot of Homepage on Kent C. Dodds