Communitygithub.com

ZeroSum-Solutions/mishmash

ProFolioX is a static reproduction of the current Lexington Themes portfolio template. It combines a fixed desktop sidebar, responsive mobile navigation, Geist typography, light and dark themes, animated project cards, searchable content, and editorial portfolio layouts.

¿Qué es mishmash?

mishmash is a Claude Code agent skill that proFolioX is a static reproduction of the current Lexington Themes portfolio template. It combines a fixed desktop sidebar, responsive mobile navigation, Geist typography, light and dark themes, animated project cards, searchable content, and editorial portfolio layouts.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ZeroSum-Solutions/mishmash/tree/HEAD/design-templates/lexington-profoliox
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

ProFolioX Portfolio Template

Multi-page site theme vendored from the MIT-licensed pulkitxm/claude-directory gallery.

ProFolioX is a static reproduction of the current Lexington Themes portfolio template. It combines a fixed desktop sidebar, responsive mobile navigation, Geist typography, light and dark themes, animated project cards, searchable content, and editorial portfolio layouts.

The upstream theme ships a full multi-page site. example.html is its home page; the remaining routes (about, blog, pricing, help centre, auth, and design-system pages) stay upstream — rebuild them from the build spec when a project needs them.

Workflow

  1. Clone example.html into the user's workspace as the working file.
  2. Replace placeholder content with the user's real brand name, headlines, body copy, numbers, and imagery. Match existing image dimensions when swapping assets.
  3. Preserve the design system. The palette, type scale, spacing rhythm, and motion in the build spec below are the identity — do not substitute fonts, recolour the palette, or strip decorative elements.
  4. Extend by duplicating sections, never by importing a layout from another template. If a section is missing, design it from scratch in this template's own vocabulary.
  5. Keep motion accessible. Every animation must stay behind prefers-reduced-motion, as the build spec requires.

Output contract

Emit between <artifact> tags:

<artifact identifier="lexington-profoliox" type="text/html" title="ProFolioX Portfolio Template">
<!doctype html>
<html>...</html>
</artifact>

Build spec

The upstream prompt that produced this design, verbatim.

SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE PROFOLIOX TEMPLATE — A PORTFOLIO/FOLIO THEME WITH FIXED LEFT SIDEBAR, DARK/LIGHT MODE, AOS SCROLL ANIMATIONS, AND HOVER CARD EFFECTS.

REFERENCE: https://lexingtonthemes.com/viewports/profoliox

SUMMARY

PROFOLIOX IS A MINIMAL, DARK/LIGHT PORTFOLIO TEMPLATE BUILT FOR DESIGNERS AND DEVELOPERS. IT FEATURES A PERSISTENT LEFT SIDEBAR WITH STAGGERED-ENTRANCE NAVIGATION, A THEME TOGGLE WITH LOCALSTORAGE PERSISTENCE, AND AN IN-PAGE FUZZY SEARCH MODAL POWERED BY FUSE.JS. CONTENT PAGES USE AOS (ANIMATE ON SCROLL) FOR FADE-UP ENTRANCE ANIMATIONS AND HOVER CARD EFFECTS WHERE OVERLAY TEXT SLIDES UP FROM BELOW ON HOVER. THE DESIGN IS BASED ON GEIST FONT, AN OKLCH-BASED NEUTRAL PALETTE (BASE-*) AND AN OKLCH INDIGO/VIOLET ACCENT PALETTE (ACCENT-*), WITH NO DECORATIVE CHROME — CLEAN WHITESPACE AND THIN 1PX DIVIDERS DEFINE STRUCTURE.

STYLE

  • FONTS: GEIST (SANS), GEIST MONO (CODE/MONO)
  • PALETTE:
    • BASE NEUTRALS (OKLCH): BASE-50 oklch(98.5% 0 0) → BASE-950 oklch(14.5% 0 0)
    • ACCENT (INDIGO/VIOLET OKLCH): ACCENT-300 oklch(59.81% .221 277.36), ACCENT-400 oklch(49.73% .283 269.85), ACCENT-500 oklch(45.2% .313 264.05)
    • LIGHT BG: white / DARK BG: base-950
  • TYPE SCALE: TEXT-XS 0.75REM → TEXT-9XL 8REM; BODY TEXT-BASE 1REM / LINE-HEIGHT 1.5
  • RADII: RADIUS-MD 0.375REM, RADIUS-LG 0.5REM, RADIUS-XL 0.75REM
  • ANIMATIONS: AOS FADE-UP (DURATION 400MS DEFAULT, UP TO 3000MS); HOVER TRANSLATE-Y-12 → 0 (CARD TEXT REVEAL, 800MS EASE-IN-OUT); NAV LINK STAGGER (OPACITY+TRANSLATE-Y, 0.1S STEPS); FOOTER LINK HOVER TRANSLATE-X-1.5; THEME TOGGLE ARIA-CHECKED; SEARCH MODAL BACKDROP-BLUR

LAYOUT & STRUCTURE

SHARED CHROME

  • SIDEBAR (FIXED LEFT, 256PX, HIDDEN ON MOBILE): LOGO SVG → NAV LINKS (BLOG, WORK, STORE, ABOUT, STUDIO, COURSE, SIGN IN, SIGN UP, CONTACT) → SYSTEM LINKS (OVERVIEW, LINKS, BUTTONS, COLORS, TYPOGRAPHY) → BUY LINK; FOOTER: THEME-TOGGLE BUTTON + SEARCH BUTTON
  • MOBILE HEADER (VISIBLE < LG): HAMBURGER + LOGO; OVERLAY DRAWER MATCHING SIDEBAR
  • MAIN CONTENT AREA: lg:ml-64 OFFSET; min-h-[640px] flex flex-col; <main class="grow">
  • FOOTER (INSIDE MAIN AREA): 3-COLUMN GRID (RESOURCES, CONNECT, NAVIGATION); COPYRIGHT LINE

PAGES DISCOVERED & THEIR SECTIONS

  1. HOME (index.html) — HERO (AVATAR IMAGE, TITLE, DESCRIPTION, CTA); FEATURED WORK (3-UP GRID WITH HOVER OVERLAY); PROCESS (3-STEP WITH GIANT BACKGROUND NUMBERS); LATEST BLOG POSTS (4-UP GRID); FEATURED STORE PRODUCTS (3-UP GRID)
  2. BLOG (blog/index.html) — HEADING "REFLEXIONS"; 2-COLUMN GRID OF POSTS WITH HOVER OVERLAY + DATE/AUTHOR; SHOW-MORE PAGINATION; FOOTER
  3. BLOG POST (blog/posts/[1-6].html) — HERO IMAGE; TITLE + DESCRIPTION; META (PUBLISHED DATE, AUTHOR, READ TIME, TAGS); PROSE CONTENT
  4. WORK (work/index.html) — HEADING "ALL WORK"; 2-COLUMN GRID OF PROJECTS WITH HOVER OVERLAY + DESCRIPTION
  5. WORK DETAIL (work/[1-6].html) — HERO IMAGE WITH EXTERNAL LINK BUTTON; TITLE + PROSE DESCRIPTION; PROJECT META (CLIENT, YEAR, CATEGORY, SERVICES)
  6. STORE (store/index.html) — HEADING "DIGITAL PRODUCTS FOR YOUR BUSINESS"; 3-COLUMN PRODUCT GRID WITH ASPECT-8/10 IMAGES, PRICE, DESCRIPTION
  7. STORE ITEM (store/[1-6].html) — PRODUCT TITLE + DESCRIPTION; BUY BUTTON; SPECIFICATIONS TABLE; IMAGE GALLERY
  8. ABOUT (about.html) — INTRO PARAGRAPH + PORTRAIT IMAGE; AWARDS & HONORS LIST; CLIENTS GRID; SKILLS/TECH SECTION
  9. STUDIO (studio.html) — HEADING + CTA; SERVICE CARDS (UI/UX, DEVELOPMENT, BRANDING) WITH PRICING + FEATURE LISTS; FAQ ACCORDION
  10. COURSE (course.html) — HERO IMAGE; TITLE + DESCRIPTION; OVERVIEW + COURSE DETAILS SIDEBAR; MODULES LIST
  11. SIGN IN (signin.html) — SIMPLE FORM (EMAIL, PASSWORD, SUBMIT)
  12. SIGN UP (signup.html) — SIMPLE FORM (EMAIL, PASSWORD, CONFIRM PASSWORD, SUBMIT)
  13. CONTACT (contact.html) — HEADING "GET IN TOUCH"; CONTACT FORM (NAME, LAST NAME, COMPANY, EMAIL, MESSAGE, SUBMIT)
  14. SYSTEM / OVERVIEW (system/overview.html) — DESIGN SYSTEM OVERVIEW PAGE
  15. SYSTEM / LINKS (system/links.html) — LINK VARIANTS
  16. SYSTEM / BUTTONS (system/buttons.html) — BUTTON VARIANTS
  17. SYSTEM / COLORS (system/colors.html) — COLOR PALETTE SWATCHES
  18. SYSTEM / TYPOGRAPHY (system/typography.html) — TYPE SCALE SPECIMENS

Source & license

Vendored from MIT-licensed pulkitxm/claude-directory. The upstream MIT licence text ships in this template at LICENSE and must be redistributed alongside any copy of example.html or assets/.

Webfonts and full-resolution imagery are not vendored: local @font-face rules are served from the Google Fonts CDN and referenced images are downscaled. Fetch the upstream folder for the original assets.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ZeroSum-Solutions/mishmash

Two-section scroll landing for **S.P.D**, a fictional daily-operations automation platform. Section one is a full-bleed black hero: a muted, looping period-painting video plays edge to edge behind a top-left wordmark and tagline, a top-right pill CTA, and a large right-aligned serif headline low in the frame. A cloud-plume image straddles the seam into section two, a saturated red panel holding a centered monogram, an uppercase mission line, a large script signature, two closing lines of copy, and a second looping video with a soft fade into the red. Motion is a staggered load-in fade on the hero, an IntersectionObserver reveal on the red section's content, and a scroll-linked parallax on the cloud plume — all degrading to a static, fully-visible layout under reduced motion.

ZeroSum-Solutions/mishmash

Full-screen, single-viewport (100vh, no scroll) dark hero landing page for **Asme**, a fictional no-code AI app platform. The fullscreen background is an HLS video stream from Mux, playing natively on Safari and via hls.js MediaSource on other browsers. A liquid-glass pill navbar (luminosity-blended glass with a masked `::before` gradient border) floats above an Instrument Serif hero heading and an animated email-capture CTA — "Get early access" expands to a form with a 60 ms/char typewriter placeholder, flips `ArrowRight` to `Check` on submit, and auto-resets after 4 seconds. All elements animate in on load with Motion (Framer Motion).

ZeroSum-Solutions/mishmash

A pixel-spec, dark-themed single-page marketing landing site for **Asme**, a fictional knowledge and insights platform, featuring a signature reusable `.liquid-glass` surface treatment — luminosity-blended translucent fill, 4px backdrop blur, inset top highlight, and a masked `::before` gradient border — applied consistently across the navbar pill, email capture, buttons, cards, and icon chips. The full-viewport hero loops a locally vendored `.mp4` video via a vanilla `requestAnimationFrame` opacity crossfade (fade in on `canplay`, fade out at 0.55s remaining, 100ms gap restart). Four scroll-triggered sections animate in with Framer Motion `useInView`: About, Featured Video, Innovation × Vision (video + two columns sliding from opposite sides), and Services (two glass cards with hover-zoom video). Instrument Serif display type sits against pure black throughout.

ZeroSum-Solutions/mishmash

A premium, dark-cinematic landing page for **Aura**, a fictional AI-native email client, featuring a looping fullscreen background video, a gradient-clip shiny headline, a macOS-style menu bar mockup, a realistic inbox preview, and a custom liquid-glass card treatment. The multi-section layout covers navbar, hero, menu bar, inbox mockup, feature triage, logo cloud, testimonials, pricing, and a final CTA — targeting the AI productivity app and SaaS landing page use case.

ZeroSum-Solutions/mishmash

A modern React landing page for a fictional broadcast-grade live video platform featuring a full-screen adaptive HLS video background, a glassmorphic navigation header, and hero content pinned to the bottom-left corner. Dark cinematic aesthetic with Gloock display serif, Archivo body, JetBrains Mono telemetry labels, and an aurora-green signal accent — ideal as a live streaming platform or video SaaS landing page template.

ZeroSum-Solutions/mishmash

A single-screen marketing landing page for "dot.", a calm-messaging product that links you with one anonymous peer for a single message each day. The hero is a full-screen looping background video of a phone, fronted by an animated Instrument Serif headline and a typewriter effect that types and deletes short messages ("Are you here?", "Yes, I am.", "Speak soon.") positioned to sit on the phone's on-screen display — evoking a quiet, analog rhythm. A floating pill navbar with a glinting "Link up" CTA completes the single-screen composition.

ZeroSum-Solutions/mishmash

A single-page "scrollytelling" landing page called Step Into Wonder: a 4.8-screen pinned scroll sequence where painted curtains part over a glowing crystal-cave portal, the world zooms and the portal irises open toward a sky beyond, then a giant arc of nine pastel destination cards sweeps across the closing scroll like a slow ferris wheel. Serif display headlines (Viaoda Libre) pair with a plain sans body face (Imprima) over a near-black stage, with mouse parallax on every layer and a dignified static fallback under reduced motion.

ZeroSum-Solutions/mishmash

Full landing page for the fictional AI workflow-automation platform **FlowMate** — a fixed left sidebar with a logo mark and section nav, a translucent blurred navbar, a large serif hero headline, a liquid-glass chat-composer card overlaid on a looping ambient video, a six-card feature grid, and an auto-rotating three-up cards carousel, all on an off-white minimalist palette with one indigo-violet chromatic accent.

ZeroSum-Solutions/mishmash

A single-page landing page for GroundAI, an interior-design AI product, built with TanStack Start v1 on file-based routing, React 19, TypeScript, Tailwind CSS v4, framer-motion for all animation, and lucide-react for icons. The page is composed of four stacked sections: a full-bleed autoplaying video hero with spring-animated header, expanding glass nav pill, and word-by-word animated description; a CSS marquee of partner brand wordmarks; a CraftExperiences section with a spring-driven style carousel, a skeleton-morphing chat card, and a staggered adaptable list; and a two-column testimonials block with animated word reveals.

ZeroSum-Solutions/mishmash

Produce a print-grade single-page kami (紙 / 纸) document — warm parchment canvas, ink-blue accent, serif at one weight, no italic, no cool grays. The output reads like a professional white paper or studio one-pager, not an app UI. Multilingual by design (EN · zh-CN · ja). One self-contained HTML file, zero dependencies.

ZeroSum-Solutions/mishmash

A single-page, desktop-only dark hero landing for the fictional studio **Kubric™**, built on **TanStack Start v1 + React 19 + Vite 7 + Tailwind v4** with file-based routing. Features a looping background video with a progressive 8-layer `backdrop-filter` blur at the bottom, an animated SVG logo with arc stroke-dashoffset reveals, a glass nav pill, a character-by-character headline reveal, a vertical right-side section nav, and a white "About us" card. Everything animates in on first load once the background video is ready.

ZeroSum-Solutions/mishmash

Warm, editorial single-page landing for **Velar.**, a fictional luxury real-estate brand. A deep-teal typewriter preloader gives way to a sky-backdrop hero ("Live in Irreplaceable") with a cutout building image that rises from below on load, then a scroll-driven centerpiece: as the user scrolls, that same building drifts upward and scales to 1.45x while pinning toward the bottom of a sticky black statement section with count-up stats. A hover-expand five-tile video gallery slides up over the statement section, and a bronze-gradient "Inquire" close finishes the page. Syne (display) pairs with Inter (body) throughout, on a warm off-white ground with one chromatic bronze accent.

ZeroSum-Solutions/mishmash

A full-screen, cinematic hero landing page for a creative agency called Mainframe, featuring a fixed background video that scrubs forward and backward in response to horizontal mouse movement, an AI-assistant-themed blurred intro label, a typewriter-animated headline, and a row of pill-shaped action buttons with a clipboard copy email link. The design pairs HelveticaNowDisplay-Medium headings with HelveticaNowDisplayW01-Rg body text, both vendored locally for offline use. Built with React 19, TypeScript, Vite, and Tailwind CSS v3.

ZeroSum-Solutions/mishmash

A cinematic, single-section landing hero for mėntality, a fictional mental-health resources product. The page pairs a full-bleed background video that gradient-masks into a soft `#edeef5` base with a glassmorphic, fixed navigation bar, built in React 19 + Vite and animated with Motion (formerly Framer Motion). Notable techniques include `backdrop-blur` glassmorphism, a gradient mask that blends the video top into the base color, `clamp()` fluid headline sizing, an animated SVG hamburger that morphs into an X, an inline blinking "eye/pupil" pill in the headline, and an animated `pl`/`en` language toggle. Styling is Tailwind CSS 4 via the `@tailwindcss/vite` plugin (CSS-first `@theme`, no config file), with Inter and Outfit from Google Fonts.

ZeroSum-Solutions/mishmash

A pure-black (#000) monochrome landing page for Mindloop, a newsletter and content platform, where white typography does the talking — Inter for structure and Instrument Serif italics for accent words. The seven-section page flows through a fixed glass navbar, a full-viewport MP4 hero with email capture, an AI-platform awareness section, a scroll-driven word-by-word opacity reveal, a solution feature grid with a 3:1 video panel, an HLS-streamed CTA section via hls.js (with native Safari fallback), and a minimal footer — with Framer Motion entrances and a liquid-glass CSS border effect throughout.

ZeroSum-Solutions/mishmash

Cinematic single-page landing for the fictional neural-AI platform **SynapseX**. A fixed, full-viewport background video scrubs frame-by-frame as the page scrolls and progressively blurs, sitting behind a scramble-in split-corner hero headline, a 3D-tilted cinematic paragraph reveal, and a frosted-glass horizontal metrics carousel. Pure black-and-white scaffolding is punctuated by one neon-green "synaptic" accent that ties the UI to the glowing footage underneath it.

ZeroSum-Solutions/mishmash

A dark, full-bleed landing page for Neuralyn, a fictional analytics-dashboard SaaS, featuring a full-viewport hero with a scroll-linked parallax dashboard composited over a looping background video and a scroll-driven testimonial where each word lights up as you scroll. The aesthetic is pure-black background, white type, a single italic serif accent word, and a liquid-glass tag pill. Built with React 18 + Vite and TypeScript, styled with Tailwind CSS 3 and shadcn/ui-style primitives, animated via Framer Motion (`useScroll`/`useTransform`) for scroll-linked parallax and the word-by-word color reveal, with fonts self-hosted via Fontsource.

ZeroSum-Solutions/mishmash

A monochrome, editorial landing page for a fictional Natural History Museum paleontology collection, featuring a three-section continuous scroll: a full-viewport hero with a delayed background video reveal and an animated geometric "NHM" SVG logotype (per-polygon slide-up reveal), an "Explore Our World" section with scroll-revealed display heading and action pills, and a dark "Ancient Collection" chapter browser with auto-cycling fossil images and a custom SVG `feTurbulence`/`feDisplacementMap` sand-dissolve transition effect. Built with React 19, Vite 6, Tailwind CSS 4 (CSS-first config), and Motion (Framer Motion), in a strictly monochrome black/white/gray palette — no color accents.

ZeroSum-Solutions/mishmash

A single-page NFT landing site with four full-bleed sections (Hero, About, Collection, CTA) on a dark space theme. The page uses looping muted background videos, a CSS liquid-glass UI effect, a fixed grain texture overlay, and a tight color system (deep navy `#010828`, off-white `#EFF4FF`, neon green `#6FFF00`; Anton headings, Condiment cursive accents, system mono body). Showcases a three-card NFT collection grid with rarity scores and video previews.

ZeroSum-Solutions/mishmash

Dark "About Me" section for a freelance designer's portfolio, built as a single self-contained HTML page. A gradient headline reading "About me" sits above a bio paragraph whose characters brighten left-to-right as the page scrolls, framed by four glassy 3D corner icons (moon, brick, smiley, cursor) that slide in from the left and right on load, with a magenta-to-orange gradient pill button beneath.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community