Is this skill suitable for non-technical designers?

Yes, while it includes developer-specific advice, it focuses heavily on UX, branding, and presentation patterns that apply to all creative professionals.

What is the recommended project structure for my portfolio?

The skill suggests a proven 9-step case study structure: hero image, overview, challenge, your role, process highlights, key decisions, results/impact, learnings, and live links.

Does it check for common portfolio mistakes?

Yes, it includes validation checks for missing viewports, unoptimized images, broken mobile layouts, and a lack of clear contact calls-to-action.

How does this skill help me land a job?

It implements the '30-second test' framework, ensuring recruiters can immediately identify who you are, see your best work, and find your contact information while emphasizing measurable impact.

Can it help me with portfolio animations and interactivity?

Absolutely. It provides specific patterns for various levels of interactivity, from subtle hover effects and smooth page transitions to high-impact 3D workspace scenes.

Interactive Portfolio Architect

Name: Interactive Portfolio Architect
Author: lingxling

bylingxling

•

デザインツール

Architects high-conversion professional portfolios that transform personal projects into memorable, job-landing experiences.

Interactive Portfolio Architect is a specialized skill designed to help developers and designers create portfolios that pass the '30-second recruiter test.' It provides expert guidance on portfolio architecture, technical implementation, and conversion optimization, ensuring your work isn't just displayed but effectively sold to hiring managers. The skill covers everything from mobile-first responsiveness and interactive case study structures to creative coding patterns like smooth transitions and 3D elements, while proactively identifying common pitfalls like over-engineering or poor mobile usability.

主な機能

01High-impact project showcase design focusing on metrics and problem-solving results

02Strategic portfolio architecture based on the '30-second test' framework for recruiters

03Conversion-oriented call-to-action (CTA) placement and contact integration strategies

04Mobile-first optimization and responsive design validation for cross-device performance

0546 GitHub stars

06Technical implementation of interactive elements using GSAP, Three.js, and smooth scroll patterns

ユースケース

01Optimizing existing personal websites for faster load times and better mobile accessibility

02Creating a high-converting freelance showcase for UI/UX designers and creative professionals

03Building a developer portfolio that highlights technical depth beyond standard tutorial clones

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lingxling/awesome-skills-cn interactive-portfolio

For use in Claude.ai and ChatGPT

主な機能

01High-impact project showcase design focusing on metrics and problem-solving results

02Strategic portfolio architecture based on the '30-second test' framework for recruiters

03Conversion-oriented call-to-action (CTA) placement and contact integration strategies

04Mobile-first optimization and responsive design validation for cross-device performance

0546 GitHub stars

06Technical implementation of interactive elements using GSAP, Three.js, and smooth scroll patterns

ユースケース

01Optimizing existing personal websites for faster load times and better mobile accessibility

02Creating a high-converting freelance showcase for UI/UX designers and creative professionals

03Building a developer portfolio that highlights technical depth beyond standard tutorial clones