portfolio website pro

    1

    Converts project notes into high-converting, evidence-based professional portfolios designed for hiring decisions.

    $5

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned

    Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    portfolio website pro

    Example session with this skill installed

    I am a backend engineer with 3 years experience. I have two main projects: a distributed scraper and a payment gateway refactor. I want a site that looks serious and shows I can handle scale.

    • Read your context and instructions
    • Compiled the portfolio website pro
    • Generated the UI component

    I have structured your portfolio to emphasize system reliability and scale, targeting senior engineers and hiring managers at high-growth tech firms.

    Portfolio Strategy

    The site will function as a technical audit. Instead of a standard gallery, we will use a "System Deep-Dive" approach where the architecture is the hero.

    Site Map

    PagePrimary GoalKey Content
    HomeImmediate Technical CredibilityHigh-level tech stack, scale metrics (throughput/uptime), and CTA to projects.
    Project: ScraperDemonstrate ScalabilityArchitecture diagram, concurrency handling, and error recovery strategies.
    Project: PaymentsDemonstrate ReliabilityRisk mitigation, testing strategies, and migration zero-downtime plan.
    AboutEstablish BackgroundProfessional history, philosophy on system design, and open-source contributions.

    Visual Direction: The "System Log" Aesthetic

    The Terminal Professional: Dark slate backgrounds with high-contrast text and mint accents to denote "Success" states.

    • Palette: Background #0F172A, Text #F8FAFC, Primary #10B981, Accent #6366F1.
    • Typography: Inter (Sans-serif) for body text; JetBrains Mono (Monospace) for headers and data points.
    1. The Blueprint: Light gray, high-whitespace layout using thin borders to mimic technical drawings.
      • Palette: Background #F9FAFB, Text #111827, Primary #2563EB, Border #E5E7EB.
      • Typography: Roboto for body text; IBM Plex Serif for headers to convey authority.

    Case Study Template: Payment Refactor

    • Context: Legacy PHP monolith to Go microservice transition.
    • Problem: 2.5% transaction failure rate during peak load.
    • My Role: Lead developer for the ledger synchronization service.
    • Evidence: [Placeholder: Insert metric showing failure rate reduction, e.g., "Reduced failures to <0.01%"].
    • Decision Log: Why NATS was chosen over RabbitMQ for this specific use case.

    Publishing Checklist

    1. Export architecture diagrams as optimized SVGs for clarity.
    2. Verify all code snippets are syntax-highlighted and readable on mobile.
    3. Ensure the "Contact" link triggers a pre-composed email subject line: "Inquiry: [Project Name] - Backend Scale".

    Next steps

    1. Provide the specific throughput numbers for the scraper project.
    2. Decide between the "Terminal" or "Blueprint" visual direction.
    3. Collate any internal design docs that can be sanitized for the case study diagrams.

    portfolio-website-pro.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    What you get

    Structure project evidence to prove individual contribution vs team effort.Design a site map that leads hiring managers directly to proof of skill.Translate messy project notes into structured, professional case studies.Define a visual identity that supports technical credibility without fluff.

    About this skill

    Portfolio building often suffers from "design over substance," where flashy animations hide a lack of concrete evidence. This skill fixes that by refocusing your personal site on what hiring managers actually look for: contribution, proof, and clarity. It takes messy, incomplete project notes and translates them into a professional structure designed to convert visitors into interviews or clients.

    What it does

    • Evidence-led structure ensures case studies focus on measurable contributions rather than just describing team tasks.
    • Conversion-focused UX optimizes the contact path and site map to remove friction for potential employers.
    • Visual direction provides specific font pairings and hex palettes that support the work without distracting from it.
    • Strategy mapping aligns the site content with the specific expectations of your target industry and seniority level.

    How it works

    1. Analyze input to identify your target audience, core projects, and the specific evidence currently available.
    2. Define the site map and navigation flow based on your professional goals and typical hiring decision paths.
    3. Draft the content template for case studies, ensuring a clear separation between individual work and team efforts.
    4. Establish the visual identity including color systems and typography that reflect your professional tone.

    Frameworks & tools

    The skill produces platform-agnostic architectures suitable for Next.js, Hugo, Framer, or custom HTML/CSS. It prioritizes semantic HTML, accessible UI patterns, and responsive design principles.

    Why this beats prompting it yourself

    Standard prompts often produce generic "About Me" pages full of fluff. This skill enforces strict quality gates that separate individual authorship from team projects and demands evidence-based case studies, preventing the common mistake of over-indexing on aesthetics.

    Use cases

    • Converting a technical resume into a high-impact developer portfolio.
    • Structuring a UX design portfolio to show process rather than just final screens.
    • Organizing scattered freelance projects into a cohesive consultancy landing page.
    • Refining a senior-level portfolio to highlight leadership and architectural impact.

    Known limitations

    Does not generate actual code files or host images. You must provide the specific metrics and results for your projects as the skill will not invent data.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 3 days ago

    • Passed all security checks, Safe to install

    Listed3 days ago

    What's inside

    Frequently Asked Questions