Jonas Mosesson Illustrator Portfolio Layout

Overview

This portfolio for illustrator Jonas Mosesson is a masterclass in personality-driven web design, using a vibrant, character-led aesthetic to showcase creative work. It is a strong clone reference for its seamless integration of custom animation and a dynamic, multi-sized masonry grid that feels both playful and professionally structured.

Design System

• Color Palette & Visual Hierarchy: The site uses a soft pastel background (#fed6e4, #fae7d5) that shifts into a high-contrast terminal green section. Each portfolio item in the grid carries a unique, hard-coded background color (e.g., #63eaaf, #f84042, #1d2071) providing immediate visual separation between projects.
• Typography: The system relies on a clean, geometric sans-serif (classed as .text). Visual hierarchy is achieved through scale and center-alignment in the intro, while the 'About' section uses a split-column layout with bolded titles on the left and standard body text on the right.
• Page Structure: The layout follows a linear vertical flow: a high-impact intro header with an animated logo, followed by a dense 'Work' grid, and concluding with a minimalist, structured 'About' section.
• Reusable Components:
  • Dynamic Grid Cards: The .work-grid uses class modifiers like .work-grid-full and .work-grid-half to create a rhythmic, non-uniform masonry layout.
  • Hover Overlays: Each project card uses a .work-grid-info overlay that centers text and links over a background color during interaction.
  • Sectioned Bio: The .about-section is a clean, reusable two-column pattern for lists (Clients) or text blocks.
• Interaction & Motion: The site features a custom cursor (#cursors) that follows the mouse. The animated logo (#logo-anim) and the "Plz Scroll Down" prompt combined with the scroll-boi character provide a low-friction, high-engagement entry point.
• Implementation Clues: The HTML reveals a clean ID-based sectioning (#intro, #work, #about) and uses clearfix for layout management. Portfolio items are wrapped in .center-content and .center-content-inner wrappers to maintain precise alignment within responsive containers.

Use Cases

• Who should clone this: Illustrators, animators, and character designers who want their website to feel like a living extension of their portfolio rather than a static gallery.
• Effective Remixes: This pattern works well for boutique agencies or creative studios where brand personality and individual project "vibes" are more important than a uniform look across all thumbnails.
• Remix Directions: Swap the hand-drawn logo for a 3D animated asset or a high-quality SVG; replace the illustration-heavy grid with high-fashion photography or architectural renders using the same colorful background-fill technique.
• Clone Scope: A full-page clone is highly effective for a one-page personal site. Alternatively, one could clone specifically the .work-grid logic for a responsive, multi-sized project gallery that breaks the standard uniform-grid boredom.