Does it provide code snippets for layout?

Yes, it includes architectural patterns and code structures for project cards, hero sections, and navigation styles like single-page scroll or hybrid layouts.

What is the recommended structure for a project case study?

The skill suggests a 9-point structure including the challenge, your specific role, process highlights, key decisions, and measurable results or impact.

How does this skill help me get hired?

It focuses on the '30-second test,' ensuring recruiters see your identity, best work, technical impact, and contact information immediately upon landing on your site.

Can I use this for non-developer portfolios?

Yes, while it has specific sections for developers, it includes patterns for designers and creative professionals to showcase visual work and interactive experiences.

What are common portfolio anti-patterns it identifies?

It warns against using generic templates that lack personality, focusing on 'style over substance' with flashy animations but weak content, and treating a website like a static resume.

Interactive Portfolio Builder

Name: Interactive Portfolio Builder
Author: claudiodearaujo

byclaudiodearaujo

0•

Design Tools

Builds high-conversion personal portfolios and project showcases that turn visitors into professional opportunities.

The Interactive Portfolio skill transforms Claude into an expert Portfolio Experience Designer, helping developers and designers create memorable digital identities that stand out to hiring managers. It provides structured guidance on portfolio architecture, interactive case study design, and personal branding, ensuring that your site passes the critical '30-second test' used by recruiters. Whether you are building a single-page creative site or a deep technical developer showcase, this skill offers specific patterns for presenting technical impact, choosing the right project cards, and avoiding common pitfalls like template-fatigue or style-over-substance.

Key Features

01Optimized portfolio architecture and navigation patterns

02Developer-specific technical depth and code quality guidelines

03Conversion-focused CTA and contact section design

04Best practices for mobile-first responsive portfolio design

050 GitHub stars

06High-impact project showcase and case study frameworks

Use Cases

01Optimizing existing personal sites to increase recruiter engagement and conversion

02Building a job-winning developer portfolio with deep technical case studies

03Creating a creative design portfolio that balances aesthetics with usability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front interactive-portfolio

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Optimized portfolio architecture and navigation patterns

02Developer-specific technical depth and code quality guidelines

03Conversion-focused CTA and contact section design

04Best practices for mobile-first responsive portfolio design

050 GitHub stars

06High-impact project showcase and case study frameworks

Use Cases

01Optimizing existing personal sites to increase recruiter engagement and conversion

02Building a job-winning developer portfolio with deep technical case studies

03Creating a creative design portfolio that balances aesthetics with usability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro-front interactive-portfolio

For use in Claude.ai and ChatGPT

Download Skill