360 Client Portfolio Builder
Create professional, editorially sophisticated portfolio HTML pages for 360 Social Impact Studios client ventures using Vianeo business validation sprint data
- Category: discovered
- Tags: github, community
- Version: 1.0.0
- Author: walid
- Downloads: 0
- Updated: 2025-11-22
Download the latest version (v1.0.0) from this page.
SKILL.md
--- name: 360 Client Portfolio Builder description: Create professional, editorially sophisticated portfolio HTML pages for 360 Social Impact Studios client ventures using Vianeo business validation sprint data version: 1.0.0 author: 360 Social Impact Studios created: 2025-11-16 --- # 360 Client Portfolio Builder - Complete Operational Specification **Version:** 1.0.0 **Last Updated:** 2025-11-16 **Skill Type:** Client Showcasing & Business Development **Estimated Completion Time:** 2-3 hours per portfolio --- ## Table of Contents 1. [Purpose & Scope](#purpose--scope) 2. [When to Use This Skill](#when-to-use-this-skill) 3. [Core Philosophy](#core-philosophy) 4. [Complete Workflow](#complete-workflow) 5. [Information Architecture](#information-architecture) 6. [Design System Specification](#design-system-specification) 7. [Content Strategy](#content-strategy) 8. [Technical Implementation](#technical-implementation) 9. [Vianeo Data Translation](#vianeo-data-translation) 10. [Quality Standards](#quality-standards) 11. [Deployment Process](#deployment-process) 12. [Troubleshooting Guide](#troubleshooting-guide) --- ## Purpose & Scope ### Primary Purpose Transform Vianeo business validation sprint outputs into professional, editorially sophisticated portfolio HTML pages that make early-stage social impact ventures credible to investors, partners, and ecosystem stakeholders. ### What This Skill Produces **Primary Deliverable:** - Production-quality single-page HTML file (150-250KB) - Self-contained (embedded CSS, JavaScript, fonts via CDN) - Mobile-responsive (375px to 1920px+) - Fast loading (under 3 seconds on 4G) - Deployment-ready (no build process required) **Supporting Deliverables:** - Content strategy brief (narrative arc, key messages) - Design rationale (color palette, typography choices) - Deployment instructions (step-by-step for non-technical users) - Update guide (how client can make simple text/image changes) ### Success Criteria A successful portfolio page achieves: 1. **Strategic Clarity:** External stakeholder understands value proposition in first 10 seconds 2. **Credibility:** Venture appears professional without overselling traction 3. **360 Visibility:** 360's partnership value is clear but doesn't overshadow client 4. **Actionability:** Clear next steps for investors, partners, or collaborators 5. **Technical Quality:** Works flawlessly across devices, browsers, and accessibility tools ### Scope Boundaries **In Scope:** - Single-page portfolio sites for 360 client ventures - Vianeo sprint data transformation to narrative - Editorial design quality (creative agency standard) - Mobile-responsive HTML with accessibility compliance - Deployment to free hosting (Netlify, GitHub Pages) - 360 brand integration without overshadowing client **Out of Scope:** - Multi-page websites or complex navigation - E-commerce or payment integration - User authentication or login systems - Backend databases or API integration - Content management systems (WordPress, etc.) - SEO optimization beyond basic meta tags - Video hosting or streaming media - Real-time data updates or dashboards - Internal 360 documentation (different format/tool) - Press releases or media kits (different tone/structure) --- ## When to Use This Skill ### Primary Use Cases **1. Investor Preparation** **Context:** Client venture preparing for seed/Series A fundraising, needs professional web presence for investor due diligence and pitch follow-up. **Trigger Phrases:** - "We need a website for our investor deck" - "Investors are asking for more information online" - "We're raising money and need to look legit" **Focus Areas:** - Traction metrics and milestones - Commercial pathway and business model - Competitive advantage and market validation - Team credentials and expertise - Financial projections or revenue model (if applicable) **Success Metrics:** - Investor conversion rate (pitch → due diligence) - Time saved in investor Q&A (information self-serve) - Credibility perception in investor feedback --- **2. Partnership Development** **Context:** Client exploring ecosystem partnerships, corporate collaborations, or joint ventures. Needs positioning that emphasizes complementary capabilities and collaboration opportunities. **Trigger Phrases:** - "We're talking to [Corporate X] about a partnership" - "Need to show potential partners what we do" - "Looking for ecosystem collaboration" **Focus Areas:** - Sector positioning and market context - Unique value proposition vs. alternatives - Collaboration opportunities and partnership models - Technology platform or IP for licensing - Geographic expansion or market access **Success Metrics:** - Partnership inquiry volume and quality - Conversion of cold outreach to meetings - Partnership close rate --- **3. Ecosystem Visibility** **Context:** Client wants broader visibility in innovation ecosystem for conferences, awards, speaking opportunities, or general brand building. **Trigger Phrases:** - "We're applying to [accelerator/conference/award]" - "Need a professional web presence for credibility" - "Want to be discoverable by the right people" **Focus Areas:** - Systems change narrative and sector impact - Mission and theory of change - Stakeholder testimonials or social proof - Media mentions or recognition - Community engagement or open collaboration **Success Metrics:** - Conference speaking invitations - Award nominations or wins - Inbound partnership inquiries - Media coverage --- **4. 360 Portfolio Showcase** **Context:** 360 building portfolio section for own website to demonstrate client transformation capability and attract new business development opportunities. **Trigger Phrases:** - "Let's update the 360 portfolio page" - "We need case studies for business development" - "Show prospects what we've done with clients" **Focus Areas:** - Standardize 360 brand presence across all client pages - Demonstrate range of sectors and geographies - Emphasize partnership value (not just service delivery) - Show before/after transformation (Vianeo data → compelling narrative) - Client diversity (stage, sector, geography, business model) **Success Metrics:** - 360 business development conversion - Portfolio page traffic and engagement - Client referral quality --- **5. International Expansion** **Context:** Client expanding to Brazil, Latin America, or other international markets. Needs culturally appropriate positioning and potentially multi-language support. **Trigger Phrases:** - "We're entering the Brazil market" - "Need Portuguese version for Latin America" - "Adapting for European partners" **Focus Areas:** - Cultural adaptation (relationship-building emphasis for Latin America) - Multi-language support (Portuguese, Spanish) - Local partnership context and ecosystem positioning - Regulatory or market-specific considerations - Geographic traction or pilots in target region **Success Metrics:** - International partnership conversion - Local stakeholder engagement - Market entry timeline acceleration --- ### When NOT to Use This Skill **Don't use for:** - **Internal 360 documentation** → Use standard project management tools, Google Docs, or Notion - **Raw Vianeo data exports** → Use Vianeo platform directly for sprint outputs - **Personal portfolios** → Use standard portfolio builder or template - **Generic website requests** → This skill is specific to 360 client ventures with Vianeo data - **E-commerce or transaction sites** → Out of scope, requires different tech stack - **Multi-page sites with complex navigation** → This skill creates single-page portfolios - **Real-time dashboards or data apps** → Use Executive Intelligence Dashboard skill instead - **Press releases or media kits** → Different format, tone, and distribution strategy --- ## Core Philosophy ### Design Direction: Editorial Sophistication **Aesthetic Goal:** High-end innovation studio meets creative agency. Make emerging ventures look credible and compelling without overselling or appearing corporate. **Visual References to Emulate:** - **Stripe** - Clarity, subtle animations, confident minimalism - **Linear** - Precision, intentional spacing, purposeful interactions - **Apple** - Product focus, white space, refined typography - **Notion** - Accessible sophistication, playful without childish - **Swiss Design** - Grid systems used then broken, typographic hierarchy **Visual References to Avoid:** - Startup pitch deck aesthetics (too much hype, gradient backgrounds) - Corporate annual reports (sterile, overly formal, dense data tables) - AI-generated gradients or obvious stock imagery - Template-based layouts (overly symmetrical, cookie-cutter sections) - Generic SaaS landing pages (feature lists, pricing tables) ### Design Principles **1. Asymmetry with Purpose** Don't default to centered layouts or rigid column grids. Use asymmetry to create visual interest and guide the eye. **Good:** - Text occupies left 60%, visual anchor on right 40% - Section widths vary (some full-bleed, some constrained to 680px) - Headers offset to left or right rather than centered - Images break grid boundaries intentionally **Avoid:** - Perfectly centered everything - Rigid 3-column layouts repeated throughout - Equal spacing between all sections - Predictable left-right alternation --- **2. White Space as Design Element** Negative space isn't wasted space. It creates breathing room, emphasizes content, and signals sophistication. **Good:** - Generous padding around sections (80-120px vertical) - Variable spacing that creates rhythm (tight for related content, loose for transitions) - Strategic emptiness that draws eye to focal points - Margins that frame content like a gallery **Avoid:** - Cramming content to "fill the page" - Uniform spacing throughout (monotonous) - Fear of empty space - Desktop-optimized spacing that breaks on mobile --- **3. Typographic Hierarchy** Typography should create clear information hierarchy and establish editorial quality. **Good:** - Serif + sans-serif pairing (editorial feel) - Modular scale for predictable sizing (1.25 or 1.333 ratio) - Line height 1.5-1.7 for readability - Strategic weight variation (light for body, bold for emphasis) - Optical alignment over mathematical precision **Avoid:** - More than 2-3 font families - Default system fonts without intention - Inconsistent sizing (no scale) - Poor contrast (light gray on white) - Justified text (ragged right is more readable) --- **4. Color as Accent, Not Decoration** Use color sparingly for emphasis and brand consistency. Let typography and layout do the heavy lifting. **Good:** - 360 brand colors in navigation, footer, subtle accents - Client accent color (1-2 colors max) derived from sector or brand - Neutral base (warm grays, off-whites, not pure black/white) - Color used to signal interactivity (links, buttons, hover states) - Sufficient contrast for accessibility (WCAG AA minimum) **Avoid:** - Rainbow effect (too many competing colors) - Bright, saturated backgrounds - Color used without purpose - Poor contrast combinations - Gradients for decoration rather than function --- **5. Interactions That Enhance, Not Distract** Every animation or interaction must serve a purpose. No motion for motion's sake. **Good:** - Scroll-triggered fade-ins for section headers - Gentle transforms on hover (scale 1.02, shadow depth) - Smooth transitions (300-400ms with ease-out easing) - Progress indicators for long pages - Subtle parallax on hero section (minimal, not distracting) **Avoid:** - Aggressive animations that feel like PowerPoint - Parallax overuse (motion sickness) - Slow transitions (over 500ms feels sluggish) - Bouncing, spinning, or other decorative motion - Animations that delay usability --- **6. Hand-Crafted, Not Template-Based** Every portfolio should feel custom-designed for that specific venture, not generated from a template. **Achieve this through:** - Varied section layouts (not repeating same pattern) - Custom visual elements (abstract shapes, unique compositions) - Unexpected details (asymmetric cards, offset images, varied rhythm) - Client-specific color palette and imagery - Organic flow rather than rigid structure **Red flags for template feel:** - Same hero layout on every portfolio - Identical section ordering - Consistent card sizing and spacing - Generic stock imagery - Predictable interactions --- ### Brand Balance: 360 + Client Every portfolio page needs two layers: **Layer 1: 360 Studios Presence** - Logo or wordmark in navigation (top left or top right) - Footer with "Partnership with 360 Social Impact Studios" - Consistent use of 360 brand colors in UI elements - "360 Partnership Context" section explaining support role - Optional: Link to 360 website or contact **Layer 2: Client Distinctiveness** - Client name, logo, and mission take hero position - Client-specific accent colors (not 360 palette) - Sector-specific framing and language - Client traction and milestones emphasized over 360 contributions - Client call-to-action (not 360 CTA) as primary action **Critical Rule:** 360 should create cohesion across portfolio pages (identifiable visual system), but never overshadow the client venture being showcased. The client is the hero, 360 is the enabling partner. --- ## Complete Workflow ### Phase 1: Data Collection & Analysis (15-30 minutes) **Objective:** Gather all necessary information and identify the strategic narrative. #### Step 1.1: Collect Vianeo Sprint Outputs **Required Data:** - Vianeo assessment results (TRL, market validation, innovation scores) - Business model canvas or commercial pathway analysis - Customer discovery insights or user research - Competitive landscape analysis - Technology or product description - Team composition and expertise **How to Obtain:** - Request from client directly (PDF export from Vianeo) - Access via 360's internal Vianeo workspace (if client authorized) - Use meeting notes if formal export unavailable - Synthesize from multiple sprint sessions if comprehensive export isn't available **Common Formats:** - PDF reports from Vianeo platform - Slide decks summarizing sprint results - Spreadsheets with assessment scores - Meeting transcripts or notes #### Step 1.2: Gather Team Information **Essential Details:** - Venture name and tagline/one-liner - Founder(s) name, title, background (1-2 sentence bio each) - Mission statement or problem statement - Sector/industry classification - Geographic focus (local, national, regional, global) - Current stage (concept, prototype, pilot, scaling) **Optional But Valuable:** - Team photos (headshots, team photo, or working session images) - Logo (PNG with transparent background preferred) - Brand colors (if established) - Existing website or materials (for consistency) #### Step 1.3: Identify Traction & Milestones **What to Look For:** - Users served or customer count - Pilot programs or trials completed - Revenue generated (if applicable) - Partnerships formed (organizations, institutions) - Grants or funding received - Recognition or awards - Media coverage or press mentions - Patents filed or IP protection - Team hires or advisors joined **How to Document:** - Chronological timeline (earliest to most recent) - Categorize by type (customer, financial, partnership, recognition) - Quantify wherever possible (numbers, percentages, dates) #### Step 1.4: Understand Partnership Context with 360 **Key Questions:** - How long has 360 been working with this client? - What specific support has 360 provided? (Sprint facilitation, strategy, ecosystem connections) - What outcomes has the partnership achieved? - Why did client engage 360? (What gap were they trying to fill) - Is this an active engagement or completed project? **Use This to Frame:** - "360 Partnership Context" section content - How prominently to feature 360 in design - Whether to emphasize ongoing support or completed transformation #### Step 1.5: Analyze and Synthesize **Create a Content Brief:** ```markdown ## Portfolio Content Brief: [Client Name] **Lead Narrative:** [One paragraph: What's the compelling story? Problem → Solution → Impact] **Value Proposition:** [One sentence: What do they do and why does it matter?] **Target Audience:** [Primary: Investors | Partners | Ecosystem | Combination] **Key Messages (3-5):** 1. [First key message] 2. [Second key message] 3. [Third key message] **Critical Data Points to Highlight:** - [Traction metric #1] - [Traction metric #2] - [Validation evidence] **Sector Positioning:** [How to position in their industry/sector] **360 Partnership Angle:** [How to frame 360's support without overshadowing] **Call to Action:** [What should stakeholders do after viewing portfolio?] ``` **Estimated Time:** 15-30 minutes depending on data organization --- ### Phase 2: Content Strategy & Information Architecture (20-40 minutes) **Objective:** Define narrative arc, section structure, and key messages. #### Step 2.1: Define Narrative Arc Every portfolio page tells a story. Structure follows this arc: **Act 1: The Problem (Hero Section + Mission)** - Hook attention with clear problem statement - Establish stakes (why this matters) - Introduce the venture as solution **Act 2: The Solution (Innovation Snapshot + Technology/Approach)** - Explain how they're solving the problem - Demonstrate unique approach or competitive advantage - Show development stage and validation progress **Act 3: The Evidence (Traction & Milestones)** - Prove it's working with concrete data - Show momentum and progress over time - Build credibility through achievements **Act 4: The Future (Commercial Pathway + What's Next)** - Articulate business model and sustainability - Outline near-term goals and vision - Invite stakeholder engagement **Act 5: The Partnership (360 Context + CTA)** - Frame 360's enabling role - Provide clear next steps for engagement - Make it easy to connect #### Step 2.2: Plan Section Structure **Required Sections (Every Portfolio Must Have):** 1. **Hero Section** - Venture name + tagline - Visual anchor (logo, abstract element, or key image) - 360 partnership indicator (subtle badge or text) - Optional: Short animated hook or video 2. **Mission & Context** - Problem statement (what they're solving) - Who they serve (target beneficiaries or customers) - Why it matters (systems change or impact angle) - Sector and geography context 3. **Innovation Snapshot** - Technology readiness (translated from TRL) - Market validation status (customer discovery, pilot, traction) - Unique value proposition or competitive advantage - Development stage in accessible language 4. **Traction & Milestones** - Key achievements to date (chronological or categorical) - Partnerships or pilot programs - User/customer metrics (if available) - Recognition, awards, or media coverage 5. **Commercial Pathway** - Business model approach (where they are in validation) - Target market segments - Revenue model or sustainability strategy - Go-to-market approach or partnership strategy 6. **What's Next** - Immediate goals (3-6 month horizon) - Partnership or collaboration opportunities - How stakeholders can engage - Vision for scale or long-term impact 7. **360 Partnership Context** - Brief description of 360's support role - Sprint focus areas or outcomes - Optional: Testimonial from founder about 360 partnership - Link to 360 contact or partnership page **Optional Sections (Add When Data Supports):** 8. **Team** - Founder/leadership bios (brief, with photos) - Advisory board or key partners - Team expertise and credentials 9. **Impact & Theory of Change** - Logic model or impact framework - Metrics and measurement approach - Long-term systems change vision 10. **Technology Deep Div