🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧🚧 This site is under construction — thanks for your patience! 🚧

taradunmore.com rebuild

Cover Image for taradunmore.com rebuild

The problem

My previous site was a single static page, handwritten HTML and CSS, no framework, no blog. It worked, but it couldn't grow with me: no easy way to add new sections, no CMS to update content without touching markup, and nothing that demonstrated the kind of front-end work I actually do day-to-day (component architecture, state management, working with a CMS).

Approach

Next.js with the App Router, Tailwind for styling, and Contentful as a headless CMS. This was my first time working with Contentful specifically, and my first headless CMS, though not my first CMS integration. Resume entries, about copy, and work items all live in Contentful, so I can update content without touching code or redeploying.

Design

The redesign started from mockups comparing the old static site directly against a new direction: bold color, rounded display type, and hard-edged bordered cards instead of soft shadows and rounded minimalism. I wanted something that looked intentional rather than templated, closer to a distinct visual identity than a generic portfolio layout.

Color is a bright pink and warm yellow used sparingly against a neutral background, paired with solid-bordered cards and offset shadows for a tactile, hand-drawn feel instead of soft corporate polish. Headlines use a chunky, rounded display face for personality, while body copy stays in a clean, neutral sans so the reading experience stays quiet and legible.

I also moved away from defaulting every section into the same card treatment. Work items are cards because each one is a genuinely discrete, clickable object. Skills aren't, so instead of forcing them into another card grid, they're laid out as a stack ordered the way I actually think about my own process: design, then build, then systems, then ship. The layout choice encodes something true about the content instead of repeating a pattern for consistency's sake.

For the component system itself, I built reusable button and card variants (primary/secondary, sizes, etc.) so styling logic stayed centralized rather than duplicated across components or hand-written as conditional class strings in every instance.

Key technical decisions

Server and Client Component boundaries.

The App Router splits components into two categories with different rules: Server Components can fetch data directly but can't hold interactive state, Client Components can use hooks like useState but can't be async. I hit this boundary more than once, most clearly when trying to pass an image loader function from a Server Component into a Client Component, which React blocks outright. The fix was isolating the loader inside its own Client Component so the function never had to cross that line as a prop.

GraphQL query design.

Contentful scores query complexity by worst-case collection size, not what's actually in your space. An unbounded query scored over 100,000 against an 11,000 limit with only three items in the collection. Every collection query now carries an explicit limit as a rule, not an afterthought.

Outcome

A fully CMS-backed personal site where I can update my resume, work history, and about copy without opening a code editor, and a component structure clean enough that adding a new content type (like a resume category or a new work item) is a small, contained change rather than a rewrite.

What's next

Content and structure are solid, this list is what's left to call it done.

  • Build the full /work grid page (the "see more work" link currently has nowhere real to go)

  • Finalize Button/Link styles

  • Finalize Headline styles

  • Write Case Studies for other projects in work

  • Create /about page with more in depth me info

  • Add Live Site / Code links to the work item detail pages (deferred from the homepage cards)

  • Add resume PDF to /public

  • Clean up leftover commented-out code

  • Test Contentful preview/draft mode end-to-end (draft, disable-draft, revalidate routes)

  • Full mobile pass: nav, hero, work grid, resume toggle, blog cards

  • Add page metadata (titles, descriptions, OG image) for social sharing

  • Accessibility pass: focus states, alt text audit, heading hierarchy check

  • Deploy with production environment variables

  • Connect custom domain

ReactNext.jsTypeScriptContentfulGraphQLTailwind