Hyunbin Kim
Back to selected work

WEB DESIGN & CMS / TEMPLATE COLLECTION

Portfolio Templates

Six CMS-powered portfolio templates, with distinct visual styles and an interactive way to explore each design.

Explore templatesGitHub
My contribution
Template design & development
CMS integration
Collection
Six portfolio designs
Editorial, minimal & expressive styles
Preview experience
Desktop & mobile views
Interactive color themes
Portfolio Templates’ collection introduction with six designs and editorial, minimal, and expressive style filters
The redesigned collection introduces six portfolio designs with filters for browsing by visual style.

01 / THE CONTEXT

Different styles.
Content at the center.

A portfolio’s layout shapes how its work is presented. This project explores that relationship through six designs, spanning editorial, minimal, and expressive styles.

The collection pairs those visual directions with Contentful-managed content and an interactive browsing experience. Visitors can compare templates, inspect different screen sizes, and try color themes.

02 / MY CONTRIBUTION

Designing the collection.
Building the experience.

I designed and built the six portfolio templates and connected CMS content to statically generated Next.js pages.

  • Template design & developmentCreated six portfolio designs with distinct layouts and interactive color themes.
  • Collection browsingRedesigned the collection with an editorial introduction and design-style filters.
  • Responsive previewsAdded desktop and mobile preview modes for exploring how each design adapts.
  • CMS content & metadataIntegrated Contentful-managed content and metadata into statically generated Next.js pages.

03 / THE EXPERIENCE

Find a style.
Explore the details.

The collection gives visitors a way to move from a broad visual direction to a closer look at an individual template.

01

Browse by style

Explore all six designs or filter by editorial, minimal, and expressive styles.

02

Switch the viewport

Compare desktop and mobile previews to see each layout at different sizes.

03

Try a color theme

Explore interactive themes to see how color changes the design’s character.

04 / TECHNOLOGY

A CMS behind
each portfolio.

  • Application & renderingNext.js · React · Static page generation
  • Content platformContentful-managed portfolio content and metadata
  • InterfaceSass · Responsive layouts · Interactive color themes
  • Collection experienceDesign-style filters · Desktop and mobile live previews

05 / EXPLORE THE PROJECT

Six perspectives
on a portfolio.

The live collection brings the designs together in one place. Browse the style filters, open a template, and switch between desktop and mobile previews to explore the layouts and themes.

The source repository provides a closer look at the template implementation and how Contentful content connects to the pages.

Explore templates Explore more work