# Personal portfolios that show the work

Board: https://swipefile.design/board/personal-portfolios-that-show-the-work/
References: 14

Use this board as design direction for my project. Review the references below, identify useful layout, typography, color, and interaction patterns, then adapt them to my brief. Cite the original references you use.

Use these references for design principles. Follow the project brief and use original branding, content, and imagery. Captures document a particular date; they do not verify current product behavior.

## 1. Dennis Snellenberg

Source website: https://dennissnellenberg.com/
Swipefile reference: https://swipefile.design/ref/personal-dennis-snellenberg/
Screenshot: https://swipefile.design/_astro/preview.CGC9BuyI.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

A large portrait and moving name establish a memorable freelance design identity.

Useful for: Giving a solo designer a strong first impression with visible Work, About, and Contact routes. The live site continues into selected projects and a direct inquiry section. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Portrait Portfolio. A large portrait and moving name establish a memorable freelance design identity.
- colors: Neutral gray, white, and near-black, with the portrait carrying most tonal variation.
- typography: Oversized name typography balanced by small utility navigation and a short role statement.
- layout: An edge-to-edge portrait hero with side-positioned location and specialty details.
- motion: The live hero uses a moving name treatment; keep it legible and provide a reduced-motion alternative.
- texture: Unboxed photography and a circular location badge.
- dont: Do not require visitors to follow the moving name to locate contact information.

### Design adaptation prompt

~~~text
# Design reference: Dennis Snellenberg
Source: https://dennissnellenberg.com/
Swipefile reference: https://swipefile.design/ref/personal-dennis-snellenberg/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Portrait Portfolio. A large portrait and moving name establish a memorable freelance design identity.
- colors: Neutral gray, white, and near-black, with the portrait carrying most tonal variation.
- typography: Oversized name typography balanced by small utility navigation and a short role statement.
- layout: An edge-to-edge portrait hero with side-positioned location and specialty details.
- motion: The live hero uses a moving name treatment; keep it legible and provide a reduced-motion alternative.
- texture: Unboxed photography and a circular location badge.
- dont: Do not require visitors to follow the moving name to locate contact information.

Useful for: Giving a solo designer a strong first impression with visible Work, About, and Contact routes. The live site continues into selected projects and a direct inquiry section. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 2. Adham Dannaway

Source website: https://www.adhamdannaway.com/
Swipefile reference: https://swipefile.design/ref/personal-adham-dannaway/
Screenshot: https://swipefile.design/_astro/preview.vnGL5bAx.webp
Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Portfolio

A split portrait makes design and development specialties understandable in one glance.

Useful for: Showing two complementary skills, then routing visitors into portfolio work, learning products, or contact. The three selected projects give the opening claim concrete evidence. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Split-Identity Portfolio. A split portrait makes design and development specialties understandable in one glance.
- colors: White, charcoal, and restrained gray; color lives in the portrait and project thumbnails.
- typography: Large bold role labels with small, quiet supporting text.
- layout: Centered portrait between two specialties, followed by a compact three-column work row.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Clean framing and a collage-like painted half portrait.
- dont: Do not let the visual joke replace a specific role description or make projects hard to find.

### Design adaptation prompt

~~~text
# Design reference: Adham Dannaway
Source: https://www.adhamdannaway.com/
Swipefile reference: https://swipefile.design/ref/personal-adham-dannaway/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Split-Identity Portfolio. A split portrait makes design and development specialties understandable in one glance.
- colors: White, charcoal, and restrained gray; color lives in the portrait and project thumbnails.
- typography: Large bold role labels with small, quiet supporting text.
- layout: Centered portrait between two specialties, followed by a compact three-column work row.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Clean framing and a collage-like painted half portrait.
- dont: Do not let the visual joke replace a specific role description or make projects hard to find.

Useful for: Showing two complementary skills, then routing visitors into portfolio work, learning products, or contact. The three selected projects give the opening claim concrete evidence. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 3. Jessica Hische

Source website: https://jessicahische.is/
Swipefile reference: https://swipefile.design/ref/personal-jessica-hische/
Screenshot: https://swipefile.design/_astro/preview.nDvviWaN.webp
Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Portfolio

A restrained portfolio frame lets intricate lettering and finished work supply the personality.

Useful for: Showing artistic range while keeping Work with Me and Shop visible. Project context links visual appeal to a recognizable commission or product. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Lettering Portfolio. A restrained portfolio frame lets intricate lettering and finished work supply the personality.
- colors: White with subtle pink and green accents; artwork provides the richer palette.
- typography: Quiet navigation and readable body type contrast with highly expressive lettering in the work.
- layout: Brief introduction, recent work by category, a featured project, and selected logos.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Printed work, letterforms, and physical book imagery.
- dont: Do not imitate the artist’s lettering or use elaborate display type for every interface label.

### Design adaptation prompt

~~~text
# Design reference: Jessica Hische
Source: https://jessicahische.is/
Swipefile reference: https://swipefile.design/ref/personal-jessica-hische/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Lettering Portfolio. A restrained portfolio frame lets intricate lettering and finished work supply the personality.
- colors: White with subtle pink and green accents; artwork provides the richer palette.
- typography: Quiet navigation and readable body type contrast with highly expressive lettering in the work.
- layout: Brief introduction, recent work by category, a featured project, and selected logos.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Printed work, letterforms, and physical book imagery.
- dont: Do not imitate the artist’s lettering or use elaborate display type for every interface label.

Useful for: Showing artistic range while keeping Work with Me and Shop visible. Project context links visual appeal to a recognizable commission or product. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 4. Tobias van Schneider

Source website: https://vanschneider.com/
Swipefile reference: https://swipefile.design/ref/personal-tobias-van-schneider/
Screenshot: https://swipefile.design/_astro/preview.BSmz_Px1.webp
Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Portfolio

A dark editorial identity combines a manifesto, personal story, and substantial creative work.

Useful for: Connecting a distinctive point of view to projects, products, and essays. Useful for established creatives whose work spans several ventures. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Creative Director Brand. A dark editorial identity combines a manifesto, personal story, and substantial creative work.
- colors: Black, white, muted gray, and a concentrated red identity accent.
- typography: Large clean uppercase statements with tiny editorial labels and expressive signature details.
- layout: Grouped top navigation, a centered opening statement, then biography and large visual work sections.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Fine linework, monochrome photography, and small ornamental marks.
- dont: Avoid spreading attention across ventures before explaining the person and their point of view.

### Design adaptation prompt

~~~text
# Design reference: Tobias van Schneider
Source: https://vanschneider.com/
Swipefile reference: https://swipefile.design/ref/personal-tobias-van-schneider/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Creative Director Brand. A dark editorial identity combines a manifesto, personal story, and substantial creative work.
- colors: Black, white, muted gray, and a concentrated red identity accent.
- typography: Large clean uppercase statements with tiny editorial labels and expressive signature details.
- layout: Grouped top navigation, a centered opening statement, then biography and large visual work sections.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Fine linework, monochrome photography, and small ornamental marks.
- dont: Avoid spreading attention across ventures before explaining the person and their point of view.

Useful for: Connecting a distinctive point of view to projects, products, and essays. Useful for established creatives whose work spans several ventures. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 5. Brittany Chiang

Source website: https://brittanychiang.com/
Swipefile reference: https://swipefile.design/ref/personal-brittany-chiang/
Screenshot: https://swipefile.design/_astro/preview.BbPqkt7n.webp
Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Portfolio

A dark, readable portfolio keeps identity in one column and detailed evidence in the other.

Useful for: Helping a hiring manager scan experience, project outcomes, and the full résumé without a long introductory funnel. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Engineer Portfolio. A dark, readable portfolio keeps identity in one column and detailed evidence in the other.
- colors: Deep navy with pale text, muted blue-gray secondary copy, and turquoise tags.
- typography: Clear sans-serif hierarchy with compact dates and strong project headings.
- layout: Persistent identity and section navigation at left; biography, experience, and projects form a long right column.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Subtle light, thin separations, and small project thumbnails.
- dont: Avoid burying experience behind full-screen transitions or substituting skill meters for evidence.

### Design adaptation prompt

~~~text
# Design reference: Brittany Chiang
Source: https://brittanychiang.com/
Swipefile reference: https://swipefile.design/ref/personal-brittany-chiang/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Engineer Portfolio. A dark, readable portfolio keeps identity in one column and detailed evidence in the other.
- colors: Deep navy with pale text, muted blue-gray secondary copy, and turquoise tags.
- typography: Clear sans-serif hierarchy with compact dates and strong project headings.
- layout: Persistent identity and section navigation at left; biography, experience, and projects form a long right column.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Subtle light, thin separations, and small project thumbnails.
- dont: Avoid burying experience behind full-screen transitions or substituting skill meters for evidence.

Useful for: Helping a hiring manager scan experience, project outcomes, and the full résumé without a long introductory funnel. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 6. Rauno Freiberg

Source website: https://rauno.me/
Swipefile reference: https://swipefile.design/ref/personal-rauno-freiberg/
Screenshot: https://swipefile.design/_astro/preview.CULMVwiM.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

An oversized typographic card and saturated yellow circle announce an interaction designer’s craft.

Useful for: Inviting visitors into interactive work, writing, and contact. Best for a designer whose execution itself is part of the hiring evidence. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Interactive Designer Portfolio. An oversized typographic card and saturated yellow circle announce an interaction designer’s craft.
- colors: Light gray and white with black type and a strong yellow accent.
- typography: Large left-aligned sans-serif identity text with tiny supporting navigation.
- layout: A horizontal, card-like opening composition that leads toward work and supporting destinations.
- motion: The live composition extends horizontally; preserve clear navigation and support reduced motion.
- texture: Simple geometric shapes and generous empty space.
- dont: Provide a clear route to projects and email even when the visual navigation is experimental.

### Design adaptation prompt

~~~text
# Design reference: Rauno Freiberg
Source: https://rauno.me/
Swipefile reference: https://swipefile.design/ref/personal-rauno-freiberg/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Interactive Designer Portfolio. An oversized typographic card and saturated yellow circle announce an interaction designer’s craft.
- colors: Light gray and white with black type and a strong yellow accent.
- typography: Large left-aligned sans-serif identity text with tiny supporting navigation.
- layout: A horizontal, card-like opening composition that leads toward work and supporting destinations.
- motion: The live composition extends horizontally; preserve clear navigation and support reduced motion.
- texture: Simple geometric shapes and generous empty space.
- dont: Provide a clear route to projects and email even when the visual navigation is experimental.

Useful for: Inviting visitors into interactive work, writing, and contact. Best for a designer whose execution itself is part of the hiring evidence. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 7. Paco Coursey

Source website: https://paco.me/
Swipefile reference: https://swipefile.design/ref/personal-paco-coursey/
Screenshot: https://swipefile.design/_astro/preview.B0puekYk.webp
Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Portfolio

A compact personal index connects a clear craft statement to useful tools and direct contact.

Useful for: A concise professional calling card that routes interested collaborators to shipped software, technical writing, and email. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Minimal Maker Website. A compact personal index connects a clear craft statement to useful tools and direct contact.
- colors: White, soft gray, and charcoal.
- typography: Small understated sans-serif type with consistent line lengths.
- layout: Introductory paragraphs above three short columns for building, projects, and writing; a personal now section follows.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Almost entirely typographic.
- dont: Do not mistake minimalism for omission: keep project descriptions and a direct contact route.

### Design adaptation prompt

~~~text
# Design reference: Paco Coursey
Source: https://paco.me/
Swipefile reference: https://swipefile.design/ref/personal-paco-coursey/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Minimal Maker Website. A compact personal index connects a clear craft statement to useful tools and direct contact.
- colors: White, soft gray, and charcoal.
- typography: Small understated sans-serif type with consistent line lengths.
- layout: Introductory paragraphs above three short columns for building, projects, and writing; a personal now section follows.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: Almost entirely typographic.
- dont: Do not mistake minimalism for omission: keep project descriptions and a direct contact route.

Useful for: A concise professional calling card that routes interested collaborators to shipped software, technical writing, and email. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 8. Brian Lovin

Source website: https://brianlovin.com/
Swipefile reference: https://swipefile.design/ref/personal-brian-lovin/
Screenshot: https://swipefile.design/_astro/preview.Cgv7YWHD.webp
Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Portfolio

An unusually compact home page presents a designer through writing and useful side projects.

Useful for: Routing readers straight to current thinking and shipped projects. Useful for an established maker who wants a professional home without maintaining a sales page. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Personal Project Index. An unusually compact home page presents a designer through writing and useful side projects.
- colors: White with black text and soft gray descriptions.
- typography: Small sans-serif text with a modest identity heading.
- layout: Narrow central column with introduction, social links, recent writing, and a dense project index.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A small avatar provides the only prominent personal image.
- dont: Do not remove descriptions that explain why someone should open each project.

### Design adaptation prompt

~~~text
# Design reference: Brian Lovin
Source: https://brianlovin.com/
Swipefile reference: https://swipefile.design/ref/personal-brian-lovin/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Personal Project Index. An unusually compact home page presents a designer through writing and useful side projects.
- colors: White with black text and soft gray descriptions.
- typography: Small sans-serif text with a modest identity heading.
- layout: Narrow central column with introduction, social links, recent writing, and a dense project index.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A small avatar provides the only prominent personal image.
- dont: Do not remove descriptions that explain why someone should open each project.

Useful for: Routing readers straight to current thinking and shipped projects. Useful for an established maker who wants a professional home without maintaining a sales page. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 9. Seán Halpin

Source website: https://www.seanhalpin.software/
Swipefile reference: https://swipefile.design/ref/personal-sean-halpin/
Screenshot: https://swipefile.design/_astro/preview.VBz3vSy2.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

A playful canvas places a personal introduction among examples of software design.

Useful for: Making the work itself explorable while keeping a short introduction, Say Hi action, and CV route accessible. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Canvas Portfolio. A playful canvas places a personal introduction among examples of software design.
- colors: Bright blue, pink, yellow, dark panels, and light software surfaces.
- typography: Friendly sans-serif text inside a compact introductory panel.
- layout: An explorable field of project panels replaces a conventional long landing page.
- motion: The page invites visitors to move around its canvas; include accessible alternatives to spatial exploration.
- texture: Rounded software windows and colorful interactive objects.
- dont: Do not rely on dragging alone; keep contact and résumé links easy to reach.

### Design adaptation prompt

~~~text
# Design reference: Seán Halpin
Source: https://www.seanhalpin.software/
Swipefile reference: https://swipefile.design/ref/personal-sean-halpin/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Canvas Portfolio. A playful canvas places a personal introduction among examples of software design.
- colors: Bright blue, pink, yellow, dark panels, and light software surfaces.
- typography: Friendly sans-serif text inside a compact introductory panel.
- layout: An explorable field of project panels replaces a conventional long landing page.
- motion: The page invites visitors to move around its canvas; include accessible alternatives to spatial exploration.
- texture: Rounded software windows and colorful interactive objects.
- dont: Do not rely on dragging alone; keep contact and résumé links easy to reach.

Useful for: Making the work itself explorable while keeping a short introduction, Say Hi action, and CV route accessible. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 10. Olivier Larose

Source website: https://www.olivierlarose.com/
Swipefile reference: https://swipefile.design/ref/personal-olivier-larose/
Screenshot: https://swipefile.design/_astro/preview.BFz0EBy5.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

A dramatic typographic composition expresses a front-end developer’s personality without requiring a photographic hero.

Useful for: Making a specialty memorable while keeping Blog, Contact, and LinkedIn immediately visible. The live page continues into an indexed list of client projects. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Expressive Developer Portfolio. A dramatic typographic composition expresses a front-end developer’s personality without requiring a photographic hero.
- colors: Near-black and warm white.
- typography: A deliberate mixture of editorial serif, looping script, and pixel-style symbols.
- layout: Centered multi-line identity composition beneath minimal corner navigation.
- motion: The live hero animates; a viewport capture preserves its settled state rather than a blank scroll transition.
- texture: Typography and small symbolic ornaments provide the entire visual texture.
- dont: Keep experimental type out of essential navigation and ensure the hero has a stable readable state.

### Design adaptation prompt

~~~text
# Design reference: Olivier Larose
Source: https://www.olivierlarose.com/
Swipefile reference: https://swipefile.design/ref/personal-olivier-larose/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Expressive Developer Portfolio. A dramatic typographic composition expresses a front-end developer’s personality without requiring a photographic hero.
- colors: Near-black and warm white.
- typography: A deliberate mixture of editorial serif, looping script, and pixel-style symbols.
- layout: Centered multi-line identity composition beneath minimal corner navigation.
- motion: The live hero animates; a viewport capture preserves its settled state rather than a blank scroll transition.
- texture: Typography and small symbolic ornaments provide the entire visual texture.
- dont: Keep experimental type out of essential navigation and ensure the hero has a stable readable state.

Useful for: Making a specialty memorable while keeping Blog, Contact, and LinkedIn immediately visible. The live page continues into an indexed list of client projects. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 11. Robin Noguier

Source website: https://robin-noguier.com/
Swipefile reference: https://swipefile.design/ref/personal-robin-noguier/
Screenshot: https://swipefile.design/_astro/preview.ssRuNPtB.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

A full-screen project showcase gives one selected piece of work the entire stage.

Useful for: Encouraging deeper case-study exploration before the visitor reaches the personal About route. Useful when a small set of substantial projects tells the strongest story. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Interactive Case-Study Portfolio. A full-screen project showcase gives one selected piece of work the entire stage.
- colors: Muted blue, off-white, and colors supplied by project artwork.
- typography: Large editorial project title with small uppercase navigation and action labels.
- layout: Project copy on one side and tilted visual panels on the other, inside a viewport composition.
- motion: The live portfolio is an interactive presentation; provide a readable static state and direct case-study access.
- texture: Layered project images create visual depth.
- dont: Do not make the case-study link ambiguous or let navigation disappear into the artwork.

### Design adaptation prompt

~~~text
# Design reference: Robin Noguier
Source: https://robin-noguier.com/
Swipefile reference: https://swipefile.design/ref/personal-robin-noguier/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Interactive Case-Study Portfolio. A full-screen project showcase gives one selected piece of work the entire stage.
- colors: Muted blue, off-white, and colors supplied by project artwork.
- typography: Large editorial project title with small uppercase navigation and action labels.
- layout: Project copy on one side and tilted visual panels on the other, inside a viewport composition.
- motion: The live portfolio is an interactive presentation; provide a readable static state and direct case-study access.
- texture: Layered project images create visual depth.
- dont: Do not make the case-study link ambiguous or let navigation disappear into the artwork.

Useful for: Encouraging deeper case-study exploration before the visitor reaches the personal About route. Useful when a small set of substantial projects tells the strongest story. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 12. Dann Petty

Source website: https://www.dannpetty.com/
Swipefile reference: https://swipefile.design/ref/personal-dann-petty/
Screenshot: https://swipefile.design/_astro/preview.CBoVz4dE.webp
Captured: 2026-09-05 | Scope: excerpt | Type: inspiration | Style: Personal Portfolio

Huge name typography sits above a dense gallery that lets the work do the selling.

Useful for: Presenting substantial visual range with a short positioning line and direct email route. Good for freelancers with strong finished work to show. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Designer Work Gallery. Huge name typography sits above a dense gallery that lets the work do the selling.
- colors: Black and white with a fluorescent yellow-green strip and colorful project previews.
- typography: Extremely large sans-serif name with a short, smaller positioning statement.
- layout: Oversized identity at top, then a multi-column grid of website projects.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A diagonal announcement strip and a small portrait interrupt the otherwise orderly grid.
- dont: Do not fill the grid with low-resolution mockups or omit the path to contact.

### Design adaptation prompt

~~~text
# Design reference: Dann Petty
Source: https://www.dannpetty.com/
Swipefile reference: https://swipefile.design/ref/personal-dann-petty/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: a page excerpt. Do not infer unseen sections or interactions.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Designer Work Gallery. Huge name typography sits above a dense gallery that lets the work do the selling.
- colors: Black and white with a fluorescent yellow-green strip and colorful project previews.
- typography: Extremely large sans-serif name with a short, smaller positioning statement.
- layout: Oversized identity at top, then a multi-column grid of website projects.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A diagonal announcement strip and a small portrait interrupt the otherwise orderly grid.
- dont: Do not fill the grid with low-resolution mockups or omit the path to contact.

Useful for: Presenting substantial visual range with a short positioning line and direct email route. Good for freelancers with strong finished work to show. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 13. Rogie King

Source website: https://rog.ie/
Swipefile reference: https://swipefile.design/ref/personal-rogie-king/
Screenshot: https://swipefile.design/_astro/preview.ar_aoDxM.webp
Captured: 2026-09-05 | Scope: page | Type: inspiration | Style: Personal Portfolio

A small personal page mixes shipped design tools with films and music to make the maker memorable.

Useful for: Humanizing a technical portfolio while providing direct paths into real projects and social profiles. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Personality-Led Maker Page. A small personal page mixes shipped design tools with films and music to make the maker memorable.
- colors: Warm cream, dark gray text, and color from media covers.
- typography: Small readable text with subtle section headings and a conversational opening.
- layout: One narrow column: introduction, dated projects, films, then a music module.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A character sketch, film covers, and a record-player-like visual add personality.
- dont: Keep personal interests secondary to the professional introduction and useful project links.

### Design adaptation prompt

~~~text
# Design reference: Rogie King
Source: https://rog.ie/
Swipefile reference: https://swipefile.design/ref/personal-rogie-king/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.


## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Personality-Led Maker Page. A small personal page mixes shipped design tools with films and music to make the maker memorable.
- colors: Warm cream, dark gray text, and color from media covers.
- typography: Small readable text with subtle section headings and a conversational opening.
- layout: One narrow column: introduction, dated projects, films, then a music module.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: A character sketch, film covers, and a record-player-like visual add personality.
- dont: Keep personal interests secondary to the professional introduction and useful project links.

Useful for: Humanizing a technical portfolio while providing direct paths into real projects and social profiles. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

## 14. Pawel Nolbert

Source website: https://nolbert.com/
Swipefile reference: https://swipefile.design/ref/personal-pawel-nolbert/
Screenshot: https://swipefile.design/_astro/preview.B25gFTvK.webp
Captured: 2026-09-05 | Scope: viewport | Type: inspiration | Style: Personal Portfolio

An almost invisible interface frames a vivid piece of visual art at exhibition scale.

Useful for: Letting commissioned artwork establish taste immediately, with studio and direct contact information around the frame. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.
- mood: Art Director Portfolio. An almost invisible interface frames a vivid piece of visual art at exhibition scale.
- colors: White and black interface elements surrounding saturated artwork.
- typography: Tiny functional typography gives almost all visual weight to the work.
- layout: A wide central artwork sits between a minimal identity bar and a contact footer.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: The artwork supplies fluid color, depth, and material detail.
- dont: Avoid adding decorative interface elements that compete with the portfolio itself.

### Design adaptation prompt

~~~text
# Design reference: Pawel Nolbert
Source: https://nolbert.com/
Swipefile reference: https://swipefile.design/ref/personal-pawel-nolbert/
Captured: 2026-09-05. This is a dated reference, not a claim about the current live product.
Capture scope: one viewport. Do not infer unseen page sections or a complete user flow.

## Objective
Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets.

## Reference notes
- mood: Art Director Portfolio. An almost invisible interface frames a vivid piece of visual art at exhibition scale.
- colors: White and black interface elements surrounding saturated artwork.
- typography: Tiny functional typography gives almost all visual weight to the work.
- layout: A wide central artwork sits between a minimal identity bar and a contact footer.
- motion: Keep navigation and reading immediate; motion should support the work rather than delay access.
- texture: The artwork supplies fluid color, depth, and material detail.
- dont: Avoid adding decorative interface elements that compete with the portfolio itself.

Useful for: Letting commissioned artwork establish taste immediately, with studio and direct contact information around the frame. Selection is based on observable design and conversion paths; conversion rates have not been independently verified.

## Acceptance criteria
- Existing project conventions, design tokens, working functionality, and unrelated changes are preserved.
- Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product.
- Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap.
- Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled.
- Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported.
- Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service.

## Quality bar
Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.
~~~

1 references are no longer public and are omitted.

View board: https://swipefile.design/board/personal-portfolios-that-show-the-work/
Swipefile: https://swipefile.design/