Shadcn Portfolio Blocks
Discover 100 Portfolio blocks for shadcn/ui. About, skills, case studies, services, hero showcases, and contact sections for personal and studio sites.
Portfolio About And Skill: About Me
An about section pairing a portrait with a short bio, role, and contact links. Tells visitors who you are and why they should hire you on a portfolio page.
Portfolio About And Skill: Education Certifications
A list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.
Portfolio About And Skill: Resume Download
A compact call to action with a download button and file details for your CV. Lets recruiters grab your resume in one click from a portfolio page.
Portfolio About And Skill: Skills Display
A grid of skill badges grouped by area with optional proficiency levels. Summarizes the tools and languages you know across a portfolio about page.
Portfolio About And Skill: Timeline Category Skills
A vertical timeline of roles and projects with skills tagged per entry. Maps your career history and the abilities you used at each step you took.
Portfolio Awards And Recognition: Awards Timeline
A vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.
Portfolio Awards And Recognition: Badge Or Icon Grid
A responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.
Portfolio Awards And Recognition: Carousel Of Certifications
A sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.
Portfolio Awards And Recognition: Featured Award Highlight
A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.
Portfolio Awards And Recognition: Quote Award Combo
A block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.
Portfolio Blog Writing And Preview: Featured Article List
A list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.
Portfolio Blog Writing And Preview: Grid Blog Cards
A responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.
Portfolio Blog Writing And Preview: Horizontal Blog Carousel
A horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.
Portfolio Blog Writing And Preview: Masonry Layout Articles
A masonry grid of article cards with varied heights for a dynamic feel. Fits posts that mix tall images with short text on a writing showcase.
Portfolio Blog Writing And Preview: Minimal List Dates
A plain text list of post titles with publish dates beside each one. Use it when you want a fast, distraction free archive of all your writing.
Portfolio Case Study: Accordion Expandable Case Studies
An accordion that expands each case study to reveal the full story. Use it to list many projects while keeping the page compact until one is tapped.
Portfolio Case Study: Grid Case Study Previews
A responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.
Portfolio Case Study: Large Visual Focus Case Study
A case study block built around one large hero image with supporting copy. Use it when the visual result of the project tells the story best.
Portfolio Case Study: Side By Side Image Story
A two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.
Portfolio Case Study: Timeline Style Case Study
A timeline that maps a project across stages from the first brief to outcome. Use it to show your process and results step by step in one case study.
Portfolio Contact Section: Classic Contact Form
A straightforward contact form with name, email, and message fields plus a submit button. Drop it on a portfolio page so visitors can send a quick note.
Portfolio Contact Section: Map With Contact Info
Pairs an embedded location map with address, phone, and email details. Use it when clients need to find your studio or office alongside ways to reach you.
Portfolio Contact Section: Minimal Form With Social
A compact contact form sitting beside a row of social media icons. Fits portfolios that want one simple message field and links to your other profiles.
Portfolio Contact Section: Popup Trigger Contact
A button that opens the contact form in a modal dialog, keeping the page clean. Good for portfolios where you want the form hidden until a visitor asks.
Portfolio Contact Section: Split Layout
A two column section with intro copy on one side and the contact form on the other. Balances a personal message with a clear path to get in touch.
Portfolio Core Services Overview: Accordion Services
An accordion that lists each service as an expandable row with a short summary and details inside. Keeps a long offering compact and easy to scan.
Portfolio Core Services Overview: Icon List Overview
A list of services where each row pairs an icon with a title and one line of supporting text. Communicates your capabilities at a quick glance.
Portfolio Core Services Overview: Numbered Process Style Services
A numbered sequence that frames your services as ordered steps with titles and notes. Shows clients how you work and what to expect at each stage.
Portfolio Core Services Overview: Service Cards Grid
A responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.
Portfolio Core Services Overview: Split Layout Feature
A split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.
Portfolio CTA Banner: Full Width Bold Banner
A wide banner with a large heading and a single prominent button. Use it to span the page and push visitors toward hiring you or booking a call.
Portfolio CTA Banner: Inline CTA
A slim call to action that sits within page content, pairing one line of copy with a button. Place it between sections to nudge readers without interrupting.
Portfolio CTA Banner: Personal Photo CTA
A banner combining your portrait with a short pitch and a button. Adds a human face to the ask, ideal for freelancers inviting visitors to connect.
Portfolio CTA Banner: Split CTA
A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.
Portfolio CTA Banner: Sticky CTA
A banner that stays fixed as the visitor scrolls, keeping a button always in view. Useful for long portfolio pages where the offer should stay reachable.
Portfolio Email Signup And Newsletter: Card Style Signup
A bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.
Portfolio Email Signup And Newsletter: Footer Integrated Signup
An email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.
Portfolio Email Signup And Newsletter: Popup Signup Form
A modal that surfaces an email field over the page, often on exit or after a delay. Use it to catch visitors before they leave your portfolio.
Portfolio Email Signup And Newsletter: Simple Inline Form
A single row with an email input and a subscribe button. Slots into any section when you want a quick, low friction way to gather addresses.
Portfolio Email Signup And Newsletter: Split Section Signup
A two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.
Portfolio Event Speaking And Workshop: Event Cards Grid
A grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.
Portfolio Event Speaking And Workshop: Featured Talk
A spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.
Portfolio Event Speaking And Workshop: Featured Talk Highlight
A bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.
Portfolio Event Speaking And Workshop: Timeline Speaking Engagements
A vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.
Portfolio Event Speaking And Workshop: Video Recording Embed
A section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.
Portfolio Featured Work Highlight: Carousel Of Featured Projects
A carousel that slides through featured projects one at a time, each with a cover image and title. Use it to spotlight your best work on a portfolio home page.
Portfolio Featured Work Highlight: Interactive Hover Reveal
A grid of project thumbnails that reveal a title, role, and link on hover. Use it to keep a portfolio index clean while exposing detail on demand.
Portfolio Featured Work Highlight: Large Hero Project Display
A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.
Portfolio Featured Work Highlight: Split Image And Details Layout
A two column layout pairing a project screenshot with details and a link beside it. Use it to present featured work with room for context and notes.
Portfolio Featured Work Highlight: Stacked Highlight Cards
A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.
Portfolio Hero Showcase: Carousel Slider
A hero with a sliding carousel of images behind a headline and short intro. Use it to cycle through signature work the moment a portfolio loads.
Portfolio Hero Showcase: Floating Elements
A hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.
Portfolio Hero Showcase: Full Screen Centered
A full screen hero with a centered name, role, and tagline over a clean background. Use it to make a strong first statement on a personal site.
Portfolio Hero Showcase: Minimalist CTA
A spare hero with a short headline and one prominent call to action button. Use it when you want visitors to reach your work or contact fast.
Portfolio Hero Showcase: Split Layout
A hero split into a text column and an image column side by side. Use it to pair an introduction with a portrait or featured shot at the top of a page.
Portfolio Mission And Value: Grid Of Core Values
A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.
Portfolio Mission And Value: Quote Values Combo
A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.
Portfolio Mission And Value: Story First Narrative
A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.
Portfolio Mission And Value: Three Pillars Layout
Three equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.
Portfolio Mission And Value: Vertical Step Timeline
A vertical timeline that marks milestones and values down the page in order. Use it to trace how your mission took shape over time for visitors.
Portfolio Process And Approach: Cycle Diagram
A circular diagram showing the stages of your process as a repeating loop. Use it to convey an iterative way of working where steps feed back in.
Portfolio Process And Approach: Horizontal Stepper
A horizontal row of numbered steps that lead the eye from start to finish. Use it to lay out a linear workflow across a single line on the page.
Portfolio Process And Approach: Process Principles
A section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.
Portfolio Process And Approach: Stacked Cards
A vertical stack of cards, each describing one phase of your process in turn. Use it to walk a client through how an engagement unfolds step by step.
Portfolio Process And Approach: Vertical Timeline
A vertical timeline that maps each process phase down the page in sequence. Use it to show the path a project follows from kickoff through delivery.
Portfolio Project Display: Filterable Grid
A project grid with category filters across the top so visitors narrow results by tag or type. Use it when a portfolio holds varied work across many fields.
Portfolio Project Display: Quote Stack
A vertical stack of client quotes paired with project names and roles. Use it to weave testimonials into a project page and back up your results with words.
Portfolio Project Display: Standard Grid
An even grid of project cards, each with a cover image, title, and short caption. Use it as the main index for browsing a portfolio at a glance.
Portfolio Project Display: Stats Cards
A row of cards calling out key numbers like projects shipped, clients, and years active. Use it to quantify your track record near the top of a portfolio.
Portfolio Project Display: Zigzag Layout
Alternating rows that flip image and text side to side down the page. Use it to give each project room to breathe with a clear narrative flow.
Portfolio Quote And Feedback: Base
A clean quote block with the testimonial text, author name, and role. Use it as a simple starting point to add one piece of client feedback to any page.
Portfolio Quote And Feedback: Grid Of Quotes
A grid that arranges several short client quotes side by side with names and roles. Use it to gather feedback from many clients in one compact section.
Portfolio Quote And Feedback: Quote With Project Context
A testimonial paired with the project it refers to, including a thumbnail and link. Use it to tie praise directly to the work that earned it on a case study.
Portfolio Quote And Feedback: Scrollable Quote Carousel
A carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.
Portfolio Quote And Feedback: Single Quote Highlight
A large single quote set in generous space with the author name and title. Use it to feature one standout endorsement and let it carry real weight.
Portfolio Resource Download Section: Featured Resource Card
A prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.
Portfolio Resource Download Section: Gated Download
A download offer behind a short email form so visitors trade contact details for the file. Use it to capture leads while sharing a guide or kit.
Portfolio Resource Download Section: Inline Resource Callout
A compact callout that slots into running text to point readers at a related file. Use it to surface a download right where it stays relevant.
Portfolio Resource Download Section: Minimalist Resource List
A plain vertical list of resources, each a title and a download link. Use it when you want a quiet, fast index of files with no extra clutter.
Portfolio Resource Download Section: Resources Grid
A grid of resource cards, each with an icon, title, and download action. Use it to present a full library of guides and templates in one tidy section.
Portfolio Resume And Download: Branded Document Icons Grid
A grid of document icons, each labeled and linked to a file like a resume or portfolio PDF. Use it to offer several downloads in one branded section.
Portfolio Resume And Download: Resume Cover Letter Combo
A paired offer that lets visitors grab both your resume and cover letter together. Use it on a hiring page where both documents matter to recruiters.
Portfolio Resume And Download: Resume With Short Bio CTA
A short bio next to a clear call to action that downloads your resume. Use it to introduce yourself and hand over your CV in one focused block.
Portfolio Resume And Download: Simple Download Button
A single clear button that downloads your resume in one click. Use it when you want the lightest possible way to share a CV on any portfolio page.
Portfolio Resume And Download: Split Layout
A two column block with your intro on one side and resume downloads on the other. Use it to balance a personal pitch with quick access to your files.
Portfolio Social Media Embed: Highlighted Post
A single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.
Portfolio Social Media Embed: Instagram Grid
A responsive photo grid that mirrors an Instagram profile layout with hover overlays for likes and comments. Use it to preview a visual feed on a portfolio.
Portfolio Social Media Embed: Social Icons Feed
A compact row of platform icons that link out to every profile you maintain. Drop it in a footer or sidebar so visitors can follow you anywhere fast.
Portfolio Social Media Embed: Tweet Carousel
A swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.
Portfolio Social Media Embed: YouTube Video Strip
A horizontal strip of YouTube thumbnails with titles and view counts. Place it on a channel page to let visitors scan and open videos in one click.
Portfolio Why Work With Me: Before After Comparison
A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.
Portfolio Why Work With Me: Bulleted Value Proposition
A scannable list of value points, each with an icon and short line. Summarizes what you deliver so visitors grasp your strengths in a few seconds.
Portfolio Why Work With Me: Client Oriented Testimonials
Stacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.
Portfolio Why Work With Me: Storytelling Approach
A narrative section that walks through your process in ordered steps with supporting copy. Use it to explain how you work and win over cautious buyers.
Portfolio Why Work With Me: Why Me Vs Competition
A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.
Portfolio Work Experience Card: Accordion Experience Cards
Collapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.
Portfolio Work Experience Card: Card With Project Showcase
A role card paired with a thumbnail of the project you shipped there. Connects each position to concrete work so visitors see outcomes, not just titles.
Portfolio Work Experience Card: Experience Quote Combo
A role card joined with a manager or client quote about your impact. Pairs the facts of a position with social proof to strengthen each entry.
Portfolio Work Experience Card: Logo First Card Layout
A card that leads with the company logo beside your title and dates. Use it when recognizable employers carry weight and you want brands seen first.
Portfolio Work Experience Card: Minimalist Role Highlight
A pared back card showing title, company, and dates with generous spacing. Ideal for a clean resume page where the focus stays on the roles themselves.
Portfolio About And Skill: About Me
An about section pairing a portrait with a short bio, role, and contact links. Tells visitors who you are and why they should hire you on a portfolio page.
Portfolio About And Skill: Resume Download
A compact call to action with a download button and file details for your CV. Lets recruiters grab your resume in one click from a portfolio page.
Portfolio About And Skill: Timeline Category Skills
A vertical timeline of roles and projects with skills tagged per entry. Maps your career history and the abilities you used at each step you took.
Portfolio Awards And Recognition: Badge Or Icon Grid
A responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.
Portfolio Awards And Recognition: Featured Award Highlight
A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.
Portfolio Blog Writing And Preview: Featured Article List
A list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.
Portfolio Blog Writing And Preview: Horizontal Blog Carousel
A horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.
Portfolio Blog Writing And Preview: Minimal List Dates
A plain text list of post titles with publish dates beside each one. Use it when you want a fast, distraction free archive of all your writing.
Portfolio Case Study: Grid Case Study Previews
A responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.
Portfolio Case Study: Side By Side Image Story
A two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.
Portfolio Contact Section: Classic Contact Form
A straightforward contact form with name, email, and message fields plus a submit button. Drop it on a portfolio page so visitors can send a quick note.
Portfolio Contact Section: Minimal Form With Social
A compact contact form sitting beside a row of social media icons. Fits portfolios that want one simple message field and links to your other profiles.
Portfolio Contact Section: Split Layout
A two column section with intro copy on one side and the contact form on the other. Balances a personal message with a clear path to get in touch.
Portfolio Core Services Overview: Icon List Overview
A list of services where each row pairs an icon with a title and one line of supporting text. Communicates your capabilities at a quick glance.
Portfolio Core Services Overview: Service Cards Grid
A responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.
Portfolio CTA Banner: Full Width Bold Banner
A wide banner with a large heading and a single prominent button. Use it to span the page and push visitors toward hiring you or booking a call.
Portfolio CTA Banner: Personal Photo CTA
A banner combining your portrait with a short pitch and a button. Adds a human face to the ask, ideal for freelancers inviting visitors to connect.
Portfolio CTA Banner: Sticky CTA
A banner that stays fixed as the visitor scrolls, keeping a button always in view. Useful for long portfolio pages where the offer should stay reachable.
Portfolio Email Signup And Newsletter: Footer Integrated Signup
An email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.
Portfolio Email Signup And Newsletter: Simple Inline Form
A single row with an email input and a subscribe button. Slots into any section when you want a quick, low friction way to gather addresses.
Portfolio Event Speaking And Workshop: Event Cards Grid
A grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.
Portfolio Event Speaking And Workshop: Featured Talk Highlight
A bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.
Portfolio Event Speaking And Workshop: Video Recording Embed
A section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.
Portfolio Featured Work Highlight: Interactive Hover Reveal
A grid of project thumbnails that reveal a title, role, and link on hover. Use it to keep a portfolio index clean while exposing detail on demand.
Portfolio Featured Work Highlight: Split Image And Details Layout
A two column layout pairing a project screenshot with details and a link beside it. Use it to present featured work with room for context and notes.
Portfolio Hero Showcase: Carousel Slider
A hero with a sliding carousel of images behind a headline and short intro. Use it to cycle through signature work the moment a portfolio loads.
Portfolio Hero Showcase: Full Screen Centered
A full screen hero with a centered name, role, and tagline over a clean background. Use it to make a strong first statement on a personal site.
Portfolio Hero Showcase: Split Layout
A hero split into a text column and an image column side by side. Use it to pair an introduction with a portrait or featured shot at the top of a page.
Portfolio Mission And Value: Quote Values Combo
A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.
Portfolio Mission And Value: Three Pillars Layout
Three equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.
Portfolio Process And Approach: Cycle Diagram
A circular diagram showing the stages of your process as a repeating loop. Use it to convey an iterative way of working where steps feed back in.
Portfolio Process And Approach: Process Principles
A section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.
Portfolio Process And Approach: Vertical Timeline
A vertical timeline that maps each process phase down the page in sequence. Use it to show the path a project follows from kickoff through delivery.
Portfolio Project Display: Quote Stack
A vertical stack of client quotes paired with project names and roles. Use it to weave testimonials into a project page and back up your results with words.
Portfolio Project Display: Stats Cards
A row of cards calling out key numbers like projects shipped, clients, and years active. Use it to quantify your track record near the top of a portfolio.
Portfolio Quote And Feedback: Base
A clean quote block with the testimonial text, author name, and role. Use it as a simple starting point to add one piece of client feedback to any page.
Portfolio Quote And Feedback: Quote With Project Context
A testimonial paired with the project it refers to, including a thumbnail and link. Use it to tie praise directly to the work that earned it on a case study.
Portfolio Quote And Feedback: Single Quote Highlight
A large single quote set in generous space with the author name and title. Use it to feature one standout endorsement and let it carry real weight.
Portfolio Resource Download Section: Gated Download
A download offer behind a short email form so visitors trade contact details for the file. Use it to capture leads while sharing a guide or kit.
Portfolio Resource Download Section: Minimalist Resource List
A plain vertical list of resources, each a title and a download link. Use it when you want a quiet, fast index of files with no extra clutter.
Portfolio Resume And Download: Branded Document Icons Grid
A grid of document icons, each labeled and linked to a file like a resume or portfolio PDF. Use it to offer several downloads in one branded section.
Portfolio Resume And Download: Resume With Short Bio CTA
A short bio next to a clear call to action that downloads your resume. Use it to introduce yourself and hand over your CV in one focused block.
Portfolio Resume And Download: Split Layout
A two column block with your intro on one side and resume downloads on the other. Use it to balance a personal pitch with quick access to your files.
Portfolio Social Media Embed: Instagram Grid
A responsive photo grid that mirrors an Instagram profile layout with hover overlays for likes and comments. Use it to preview a visual feed on a portfolio.
Portfolio Social Media Embed: Tweet Carousel
A swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.
Portfolio Why Work With Me: Before After Comparison
A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.
Portfolio Why Work With Me: Client Oriented Testimonials
Stacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.
Portfolio Why Work With Me: Why Me Vs Competition
A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.
Portfolio Work Experience Card: Card With Project Showcase
A role card paired with a thumbnail of the project you shipped there. Connects each position to concrete work so visitors see outcomes, not just titles.
Portfolio Work Experience Card: Logo First Card Layout
A card that leads with the company logo beside your title and dates. Use it when recognizable employers carry weight and you want brands seen first.
Portfolio About And Skill: Education Certifications
A list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.
Portfolio About And Skill: Skills Display
A grid of skill badges grouped by area with optional proficiency levels. Summarizes the tools and languages you know across a portfolio about page.
Portfolio Awards And Recognition: Awards Timeline
A vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.
Portfolio Awards And Recognition: Carousel Of Certifications
A sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.
Portfolio Awards And Recognition: Quote Award Combo
A block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.
Portfolio Blog Writing And Preview: Grid Blog Cards
A responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.
Portfolio Blog Writing And Preview: Masonry Layout Articles
A masonry grid of article cards with varied heights for a dynamic feel. Fits posts that mix tall images with short text on a writing showcase.
Portfolio Case Study: Accordion Expandable Case Studies
An accordion that expands each case study to reveal the full story. Use it to list many projects while keeping the page compact until one is tapped.
Portfolio Case Study: Large Visual Focus Case Study
A case study block built around one large hero image with supporting copy. Use it when the visual result of the project tells the story best.
Portfolio Case Study: Timeline Style Case Study
A timeline that maps a project across stages from the first brief to outcome. Use it to show your process and results step by step in one case study.
Portfolio Contact Section: Map With Contact Info
Pairs an embedded location map with address, phone, and email details. Use it when clients need to find your studio or office alongside ways to reach you.
Portfolio Contact Section: Popup Trigger Contact
A button that opens the contact form in a modal dialog, keeping the page clean. Good for portfolios where you want the form hidden until a visitor asks.
Portfolio Core Services Overview: Accordion Services
An accordion that lists each service as an expandable row with a short summary and details inside. Keeps a long offering compact and easy to scan.
Portfolio Core Services Overview: Numbered Process Style Services
A numbered sequence that frames your services as ordered steps with titles and notes. Shows clients how you work and what to expect at each stage.
Portfolio Core Services Overview: Split Layout Feature
A split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.
Portfolio CTA Banner: Inline CTA
A slim call to action that sits within page content, pairing one line of copy with a button. Place it between sections to nudge readers without interrupting.
Portfolio CTA Banner: Split CTA
A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.
Portfolio Email Signup And Newsletter: Card Style Signup
A bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.
Portfolio Email Signup And Newsletter: Popup Signup Form
A modal that surfaces an email field over the page, often on exit or after a delay. Use it to catch visitors before they leave your portfolio.
Portfolio Email Signup And Newsletter: Split Section Signup
A two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.
Portfolio Event Speaking And Workshop: Featured Talk
A spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.
Portfolio Event Speaking And Workshop: Timeline Speaking Engagements
A vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.
Portfolio Featured Work Highlight: Carousel Of Featured Projects
A carousel that slides through featured projects one at a time, each with a cover image and title. Use it to spotlight your best work on a portfolio home page.
Portfolio Featured Work Highlight: Large Hero Project Display
A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.
Portfolio Featured Work Highlight: Stacked Highlight Cards
A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.
Portfolio Hero Showcase: Floating Elements
A hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.
Portfolio Hero Showcase: Minimalist CTA
A spare hero with a short headline and one prominent call to action button. Use it when you want visitors to reach your work or contact fast.
Portfolio Mission And Value: Grid Of Core Values
A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.
Portfolio Mission And Value: Story First Narrative
A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.
Portfolio Mission And Value: Vertical Step Timeline
A vertical timeline that marks milestones and values down the page in order. Use it to trace how your mission took shape over time for visitors.
Portfolio Process And Approach: Horizontal Stepper
A horizontal row of numbered steps that lead the eye from start to finish. Use it to lay out a linear workflow across a single line on the page.
Portfolio Process And Approach: Stacked Cards
A vertical stack of cards, each describing one phase of your process in turn. Use it to walk a client through how an engagement unfolds step by step.
Portfolio Project Display: Filterable Grid
A project grid with category filters across the top so visitors narrow results by tag or type. Use it when a portfolio holds varied work across many fields.
Portfolio Project Display: Standard Grid
An even grid of project cards, each with a cover image, title, and short caption. Use it as the main index for browsing a portfolio at a glance.
Portfolio Project Display: Zigzag Layout
Alternating rows that flip image and text side to side down the page. Use it to give each project room to breathe with a clear narrative flow.
Portfolio Quote And Feedback: Grid Of Quotes
A grid that arranges several short client quotes side by side with names and roles. Use it to gather feedback from many clients in one compact section.
Portfolio Quote And Feedback: Scrollable Quote Carousel
A carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.
Portfolio Resource Download Section: Featured Resource Card
A prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.
Portfolio Resource Download Section: Inline Resource Callout
A compact callout that slots into running text to point readers at a related file. Use it to surface a download right where it stays relevant.
Portfolio Resource Download Section: Resources Grid
A grid of resource cards, each with an icon, title, and download action. Use it to present a full library of guides and templates in one tidy section.
Portfolio Resume And Download: Resume Cover Letter Combo
A paired offer that lets visitors grab both your resume and cover letter together. Use it on a hiring page where both documents matter to recruiters.
Portfolio Resume And Download: Simple Download Button
A single clear button that downloads your resume in one click. Use it when you want the lightest possible way to share a CV on any portfolio page.
Portfolio Social Media Embed: Highlighted Post
A single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.
Portfolio Social Media Embed: Social Icons Feed
A compact row of platform icons that link out to every profile you maintain. Drop it in a footer or sidebar so visitors can follow you anywhere fast.
Portfolio Social Media Embed: YouTube Video Strip
A horizontal strip of YouTube thumbnails with titles and view counts. Place it on a channel page to let visitors scan and open videos in one click.
Portfolio Why Work With Me: Bulleted Value Proposition
A scannable list of value points, each with an icon and short line. Summarizes what you deliver so visitors grasp your strengths in a few seconds.
Portfolio Why Work With Me: Storytelling Approach
A narrative section that walks through your process in ordered steps with supporting copy. Use it to explain how you work and win over cautious buyers.
Portfolio Work Experience Card: Accordion Experience Cards
Collapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.
Portfolio Work Experience Card: Experience Quote Combo
A role card joined with a manager or client quote about your impact. Pairs the facts of a position with social proof to strengthen each entry.
Portfolio Work Experience Card: Minimalist Role Highlight
A pared back card showing title, company, and dates with generous spacing. Ideal for a clean resume page where the focus stays on the roles themselves.
Portfolio About And Skill: About Me
An about section pairing a portrait with a short bio, role, and contact links. Tells visitors who you are and why they should hire you on a portfolio page.
Portfolio About And Skill: Skills Display
A grid of skill badges grouped by area with optional proficiency levels. Summarizes the tools and languages you know across a portfolio about page.
Portfolio Awards And Recognition: Badge Or Icon Grid
A responsive grid of award badges or icons with short captions. Displays many certifications and honors at a glance on a portfolio about page.
Portfolio Awards And Recognition: Quote Award Combo
A block pairing a testimonial quote with an award badge side by side. Combines praise and recognition to build credibility on a portfolio page.
Portfolio Blog Writing And Preview: Horizontal Blog Carousel
A horizontal carousel of blog cards that scrolls sideways. Use it to preview recent posts in a tidy row without taking up much vertical space.
Portfolio Case Study: Accordion Expandable Case Studies
An accordion that expands each case study to reveal the full story. Use it to list many projects while keeping the page compact until one is tapped.
Portfolio Case Study: Side By Side Image Story
A two column block placing a project image beside its written story. Pairs visuals and narrative to walk readers through a single case study.
Portfolio Contact Section: Map With Contact Info
Pairs an embedded location map with address, phone, and email details. Use it when clients need to find your studio or office alongside ways to reach you.
Portfolio Contact Section: Split Layout
A two column section with intro copy on one side and the contact form on the other. Balances a personal message with a clear path to get in touch.
Portfolio Core Services Overview: Numbered Process Style Services
A numbered sequence that frames your services as ordered steps with titles and notes. Shows clients how you work and what to expect at each stage.
Portfolio CTA Banner: Full Width Bold Banner
A wide banner with a large heading and a single prominent button. Use it to span the page and push visitors toward hiring you or booking a call.
Portfolio CTA Banner: Split CTA
A two column banner with a message on one side and the action button on the other. Keeps the copy and the click target distinct and easy to scan.
Portfolio Email Signup And Newsletter: Footer Integrated Signup
An email field built into the site footer beside links and details. Captures subscribers at the bottom of every page without a dedicated section.
Portfolio Email Signup And Newsletter: Split Section Signup
A two column section with descriptive copy beside the signup form. Explains what subscribers get while keeping the email field clearly in view.
Portfolio Event Speaking And Workshop: Featured Talk Highlight
A bold featured talk layout pairing a large title with imagery and key facts. Draws extra attention to your most notable conference appearance.
Portfolio Featured Work Highlight: Carousel Of Featured Projects
A carousel that slides through featured projects one at a time, each with a cover image and title. Use it to spotlight your best work on a portfolio home page.
Portfolio Featured Work Highlight: Split Image And Details Layout
A two column layout pairing a project screenshot with details and a link beside it. Use it to present featured work with room for context and notes.
Portfolio Hero Showcase: Floating Elements
A hero with floating shapes and images drifting around a centered headline. Use it to add motion and personality to a creative portfolio landing.
Portfolio Hero Showcase: Split Layout
A hero split into a text column and an image column side by side. Use it to pair an introduction with a portrait or featured shot at the top of a page.
Portfolio Mission And Value: Story First Narrative
A reading focused section that tells your origin story in flowing paragraphs. Use it to explain how a studio or person came to be and what drives it.
Portfolio Process And Approach: Cycle Diagram
A circular diagram showing the stages of your process as a repeating loop. Use it to convey an iterative way of working where steps feed back in.
Portfolio Process And Approach: Stacked Cards
A vertical stack of cards, each describing one phase of your process in turn. Use it to walk a client through how an engagement unfolds step by step.
Portfolio Project Display: Quote Stack
A vertical stack of client quotes paired with project names and roles. Use it to weave testimonials into a project page and back up your results with words.
Portfolio Project Display: Zigzag Layout
Alternating rows that flip image and text side to side down the page. Use it to give each project room to breathe with a clear narrative flow.
Portfolio Quote And Feedback: Quote With Project Context
A testimonial paired with the project it refers to, including a thumbnail and link. Use it to tie praise directly to the work that earned it on a case study.
Portfolio Resource Download Section: Featured Resource Card
A prominent card spotlighting one downloadable resource with a cover, summary, and button. Use it to push a flagship guide or template to visitors.
Portfolio Resource Download Section: Minimalist Resource List
A plain vertical list of resources, each a title and a download link. Use it when you want a quiet, fast index of files with no extra clutter.
Portfolio Resume And Download: Resume Cover Letter Combo
A paired offer that lets visitors grab both your resume and cover letter together. Use it on a hiring page where both documents matter to recruiters.
Portfolio Resume And Download: Split Layout
A two column block with your intro on one side and resume downloads on the other. Use it to balance a personal pitch with quick access to your files.
Portfolio Social Media Embed: Social Icons Feed
A compact row of platform icons that link out to every profile you maintain. Drop it in a footer or sidebar so visitors can follow you anywhere fast.
Portfolio Why Work With Me: Before After Comparison
A split panel that shows a project before and after your work with a draggable divider. Proves your impact visually when results speak louder than text.
Portfolio Why Work With Me: Storytelling Approach
A narrative section that walks through your process in ordered steps with supporting copy. Use it to explain how you work and win over cautious buyers.
Portfolio Work Experience Card: Card With Project Showcase
A role card paired with a thumbnail of the project you shipped there. Connects each position to concrete work so visitors see outcomes, not just titles.
Portfolio Work Experience Card: Minimalist Role Highlight
A pared back card showing title, company, and dates with generous spacing. Ideal for a clean resume page where the focus stays on the roles themselves.
Portfolio About And Skill: Education Certifications
A list of degrees, courses, and certifications with issuer, date, and credential. Shows formal training and qualifications on a portfolio or resume page.
Portfolio About And Skill: Timeline Category Skills
A vertical timeline of roles and projects with skills tagged per entry. Maps your career history and the abilities you used at each step you took.
Portfolio Awards And Recognition: Carousel Of Certifications
A sliding carousel that cycles through certification logos and details. Fits a long list of credentials into a compact, scrollable strip here.
Portfolio Blog Writing And Preview: Featured Article List
A list that leads with one large featured article followed by smaller entries. Use it to spotlight your best post while listing recent writing.
Portfolio Blog Writing And Preview: Masonry Layout Articles
A masonry grid of article cards with varied heights for a dynamic feel. Fits posts that mix tall images with short text on a writing showcase.
Portfolio Case Study: Grid Case Study Previews
A responsive grid of case study cards with thumbnail, title, and summary. The go to layout for browsing a portfolio of client projects at once.
Portfolio Case Study: Timeline Style Case Study
A timeline that maps a project across stages from the first brief to outcome. Use it to show your process and results step by step in one case study.
Portfolio Contact Section: Minimal Form With Social
A compact contact form sitting beside a row of social media icons. Fits portfolios that want one simple message field and links to your other profiles.
Portfolio Core Services Overview: Accordion Services
An accordion that lists each service as an expandable row with a short summary and details inside. Keeps a long offering compact and easy to scan.
Portfolio Core Services Overview: Service Cards Grid
A responsive grid of service cards, each with an icon, heading, and short description. Lays out everything you offer in a tidy, balanced overview.
Portfolio CTA Banner: Inline CTA
A slim call to action that sits within page content, pairing one line of copy with a button. Place it between sections to nudge readers without interrupting.
Portfolio CTA Banner: Sticky CTA
A banner that stays fixed as the visitor scrolls, keeping a button always in view. Useful for long portfolio pages where the offer should stay reachable.
Portfolio Email Signup And Newsletter: Popup Signup Form
A modal that surfaces an email field over the page, often on exit or after a delay. Use it to catch visitors before they leave your portfolio.
Portfolio Event Speaking And Workshop: Event Cards Grid
A grid of cards listing talks and workshops with their title, date, and venue. Use it to present many speaking appearances in one scannable layout.
Portfolio Event Speaking And Workshop: Timeline Speaking Engagements
A vertical timeline charting talks and workshops in date order. Use it to show how your speaking history has grown across many events over time.
Portfolio Featured Work Highlight: Interactive Hover Reveal
A grid of project thumbnails that reveal a title, role, and link on hover. Use it to keep a portfolio index clean while exposing detail on demand.
Portfolio Featured Work Highlight: Stacked Highlight Cards
A vertical stack of project cards, each holding an image, title, and tags. Use it to walk visitors through selected highlights in a clear reading order.
Portfolio Hero Showcase: Full Screen Centered
A full screen hero with a centered name, role, and tagline over a clean background. Use it to make a strong first statement on a personal site.
Portfolio Mission And Value: Grid Of Core Values
A grid of cards, each naming one core value with an icon and a short line of detail. Use it to lay out the principles behind your work at a glance.
Portfolio Mission And Value: Three Pillars Layout
Three equal columns, each presenting one guiding pillar with a heading and text. Use it to summarize the ideas your practice is built around.
Portfolio Process And Approach: Horizontal Stepper
A horizontal row of numbered steps that lead the eye from start to finish. Use it to lay out a linear workflow across a single line on the page.
Portfolio Process And Approach: Vertical Timeline
A vertical timeline that maps each process phase down the page in sequence. Use it to show the path a project follows from kickoff through delivery.
Portfolio Project Display: Standard Grid
An even grid of project cards, each with a cover image, title, and short caption. Use it as the main index for browsing a portfolio at a glance.
Portfolio Quote And Feedback: Base
A clean quote block with the testimonial text, author name, and role. Use it as a simple starting point to add one piece of client feedback to any page.
Portfolio Quote And Feedback: Scrollable Quote Carousel
A carousel that slides through client quotes one at a time with author details. Use it to rotate testimonials without crowding a portfolio page.
Portfolio Resource Download Section: Gated Download
A download offer behind a short email form so visitors trade contact details for the file. Use it to capture leads while sharing a guide or kit.
Portfolio Resource Download Section: Resources Grid
A grid of resource cards, each with an icon, title, and download action. Use it to present a full library of guides and templates in one tidy section.
Portfolio Resume And Download: Resume With Short Bio CTA
A short bio next to a clear call to action that downloads your resume. Use it to introduce yourself and hand over your CV in one focused block.
Portfolio Social Media Embed: Highlighted Post
A single featured post pinned in a clean card with avatar, caption, and engagement counts. Spotlights your best content when one example carries the message.
Portfolio Social Media Embed: Tweet Carousel
A swipeable carousel of tweet cards with author, timestamp, and text. Rotate through recent posts or testimonials without stacking them down the page.
Portfolio Why Work With Me: Bulleted Value Proposition
A scannable list of value points, each with an icon and short line. Summarizes what you deliver so visitors grasp your strengths in a few seconds.
Portfolio Why Work With Me: Why Me Vs Competition
A two column comparison table contrasting your offer against typical alternatives. Helps undecided visitors see why you are the better choice at a glance.
Portfolio Work Experience Card: Experience Quote Combo
A role card joined with a manager or client quote about your impact. Pairs the facts of a position with social proof to strengthen each entry.
Portfolio About And Skill: Resume Download
A compact call to action with a download button and file details for your CV. Lets recruiters grab your resume in one click from a portfolio page.
Portfolio Awards And Recognition: Awards Timeline
A vertical timeline listing awards by year with titles and issuers. Use it to walk visitors through your honors in chronological order on a profile.
Portfolio Awards And Recognition: Featured Award Highlight
A spotlight block centered on a single major award with its name, year, and a short note. Use it to lead with your most impressive recognition.
Portfolio Blog Writing And Preview: Grid Blog Cards
A responsive grid of blog cards with cover image, title, and excerpt. The standard layout for browsing many articles on a writing index page.
Portfolio Blog Writing And Preview: Minimal List Dates
A plain text list of post titles with publish dates beside each one. Use it when you want a fast, distraction free archive of all your writing.
Portfolio Case Study: Large Visual Focus Case Study
A case study block built around one large hero image with supporting copy. Use it when the visual result of the project tells the story best.
Portfolio Contact Section: Classic Contact Form
A straightforward contact form with name, email, and message fields plus a submit button. Drop it on a portfolio page so visitors can send a quick note.
Portfolio Contact Section: Popup Trigger Contact
A button that opens the contact form in a modal dialog, keeping the page clean. Good for portfolios where you want the form hidden until a visitor asks.
Portfolio Core Services Overview: Icon List Overview
A list of services where each row pairs an icon with a title and one line of supporting text. Communicates your capabilities at a quick glance.
Portfolio Core Services Overview: Split Layout Feature
A split section pairing a single highlighted service with an image on one side and explanatory copy on the other. Spotlights your headline offering.
Portfolio CTA Banner: Personal Photo CTA
A banner combining your portrait with a short pitch and a button. Adds a human face to the ask, ideal for freelancers inviting visitors to connect.
Portfolio Email Signup And Newsletter: Card Style Signup
A bordered card holding a headline, short pitch, and email field. Use it as a standalone callout inviting visitors to join your mailing list.
Portfolio Email Signup And Newsletter: Simple Inline Form
A single row with an email input and a subscribe button. Slots into any section when you want a quick, low friction way to gather addresses.
Portfolio Event Speaking And Workshop: Featured Talk
A spotlight section for one talk with its title, summary, and event details. Highlights a signature presentation at the top of a speaking page.
Portfolio Event Speaking And Workshop: Video Recording Embed
A section embedding a recorded talk video alongside its title and context. Lets visitors watch you present without ever leaving your portfolio.
Portfolio Featured Work Highlight: Large Hero Project Display
A full width hero that frames one flagship project with a big image, title, and short summary. Use it to open a case study or anchor a portfolio.
Portfolio Hero Showcase: Carousel Slider
A hero with a sliding carousel of images behind a headline and short intro. Use it to cycle through signature work the moment a portfolio loads.
Portfolio Hero Showcase: Minimalist CTA
A spare hero with a short headline and one prominent call to action button. Use it when you want visitors to reach your work or contact fast.
Portfolio Mission And Value: Quote Values Combo
A layout that pairs a featured quote with a list of supporting values beside it. Use it to ground your mission in a memorable statement and proof.
Portfolio Mission And Value: Vertical Step Timeline
A vertical timeline that marks milestones and values down the page in order. Use it to trace how your mission took shape over time for visitors.
Portfolio Process And Approach: Process Principles
A section that lists the principles guiding how you tackle each project. Use it to state the beliefs behind your method alongside short explanations.
Portfolio Project Display: Filterable Grid
A project grid with category filters across the top so visitors narrow results by tag or type. Use it when a portfolio holds varied work across many fields.
Portfolio Project Display: Stats Cards
A row of cards calling out key numbers like projects shipped, clients, and years active. Use it to quantify your track record near the top of a portfolio.
Portfolio Quote And Feedback: Grid Of Quotes
A grid that arranges several short client quotes side by side with names and roles. Use it to gather feedback from many clients in one compact section.
Portfolio Quote And Feedback: Single Quote Highlight
A large single quote set in generous space with the author name and title. Use it to feature one standout endorsement and let it carry real weight.
Portfolio Resource Download Section: Inline Resource Callout
A compact callout that slots into running text to point readers at a related file. Use it to surface a download right where it stays relevant.
Portfolio Resume And Download: Branded Document Icons Grid
A grid of document icons, each labeled and linked to a file like a resume or portfolio PDF. Use it to offer several downloads in one branded section.
Portfolio Resume And Download: Simple Download Button
A single clear button that downloads your resume in one click. Use it when you want the lightest possible way to share a CV on any portfolio page.
Portfolio Social Media Embed: Instagram Grid
A responsive photo grid that mirrors an Instagram profile layout with hover overlays for likes and comments. Use it to preview a visual feed on a portfolio.
Portfolio Social Media Embed: YouTube Video Strip
A horizontal strip of YouTube thumbnails with titles and view counts. Place it on a channel page to let visitors scan and open videos in one click.
Portfolio Why Work With Me: Client Oriented Testimonials
Stacked testimonial cards framed around client outcomes, with quote, name, and role. Builds trust by letting past clients vouch for your results.
Portfolio Work Experience Card: Accordion Experience Cards
Collapsible role cards that expand to reveal duties and achievements on click. Keeps a long career history tidy while letting readers drill into detail.
Portfolio Work Experience Card: Logo First Card Layout
A card that leads with the company logo beside your title and dates. Use it when recognizable employers carry weight and you want brands seen first.