Portfolio Lab · Visual Playground

01 — Card Layouts

Project Cards Grid

Hover-activated overlay cards with action buttons. A staple of modern portfolio sites — clean grid with consistent card sizing.

Grid + Overlay — hover interaction GRID

React TypeScript

E-Commerce Dashboard

A full-featured admin panel with real-time analytics, inventory management, and order tracking.

UI Design Figma

Fitness App Redesign

Complete redesign of a fitness tracking app focusing on simplicity and motivation.

Swift iOS

Recipe Finder App

Native iOS app with ingredient-based search, meal planning, and nutrition tracking.

<div class="proj-grid">
  <div class="proj-card">
    <div class="proj-card-img">
      <i class="ph ph-browser"></i>
      <div class="proj-card-overlay">
        <a href="#"><i class="ph ph-eye"></i></a>
        <a href="#"><i class="ph ph-github-logo"></i></a>
      </div>
    </div>
    <div class="proj-card-body">
      <div class="proj-card-tags">
        <span class="proj-tag">React</span>
      </div>
      <h3>Project Title</h3>
      <p>Project description goes here.</p>
    </div>
  </div>
</div>

.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.proj-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.proj-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.proj-card-overlay {
  position: absolute; inset: 0;
  background: rgba(139,92,246,.85);
  display: flex; align-items: center;
  justify-content: center; gap: 12px;
  opacity: 0; transition: opacity .3s;
}
.proj-card:hover .proj-card-overlay {
  opacity: 1;
}

02 — Featured Project

Case Study Hero

A large, prominent layout for your best work. Pairs an image with detailed project metadata and a strong call-to-action.

Split Grid — image + content HERO

2024 3 months Team of 4

SaaS Analytics Platform

Led the complete redesign of a B2B analytics platform serving 10K+ users. Focused on data visualization, onboarding flow, and reducing time-to-insight by 60%.

Product Design Research Prototyping

<div class="case-hero">
  <div class="case-hero-img">
    <i class="ph ph-layout"></i>
  </div>
  <div class="case-hero-content">
    <div class="case-hero-meta">
      <span class="case-meta-item">
        <i class="ph ph-calendar-blank"></i> 2024
      </span>
    </div>
    <h2>Project Title</h2>
    <p>Project description...</p>
    <button class="case-btn">
      View Case Study <i class="ph ph-arrow-right"></i>
    </button>
  </div>
</div>

.case-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
}
.case-hero-img {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
}
.case-btn {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  background: #8b5cf6;
  color: #fff;
  transition: all .2s;
}
.case-btn:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}

03 — Minimal Layout

Minimal List

Typography-driven project list. No images needed — let the project titles and descriptions do the talking. Great for developers and writers.

Numbered list — hover animation LIST

01

Open-Source Design System

Component library with 50+ accessible components • React + Storybook

02

Developer Portfolio Template

Minimal portfolio starter with dark mode • Next.js + MDX

03

Weather CLI Tool

Terminal weather app with ASCII art visualization • Rust

04

AI Image Generator

Text-to-image web app with style presets • Python + Flask

<div class="min-list">
  <a class="min-item" href="#">
    <span class="min-num">01</span>
    <div class="min-info">
      <h3>Project Title</h3>
      <p>Short description &bull; Tech stack</p>
    </div>
    <i class="ph ph-arrow-right min-arrow"></i>
  </a>
</div>

.min-list { display: flex; flex-direction: column; }
.min-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center; gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: all .2s;
}
.min-item:hover { padding-left: 12px; }
.min-item:hover .min-num { color: #8b5cf6; }
.min-num {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: rgba(255,255,255,.15);
}
.min-arrow {
  opacity: 0; transform: translateX(-8px);
  transition: all .2s;
}
.min-item:hover .min-arrow {
  opacity: 1; transform: translateX(0);
}

04 — Gallery Layout

Bento Grid

Asymmetric grid layout inspired by the popular "bento box" trend. Mix large and small project thumbnails for visual variety.

CSS Grid spans — asymmetric sizing BENTO

Web Platform

Full-stack SaaS application

Mobile App

Cross-platform

3D Visuals

WebGL experience

Data Dashboard

Real-time analytics interface

Brand Identity

Visual system

<div class="bento">
  <div class="bento-item">
    <div class="bento-bg">
      <i class="ph ph-desktop-tower"></i>
    </div>
    <div class="bento-info">
      <h3>Web Platform</h3>
      <p>Full-stack SaaS application</p>
    </div>
  </div>
  <!-- More items... -->
</div>

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 240px 240px;
  gap: 16px;
}
.bento-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.bento-item:nth-child(1) { grid-column: span 2; }
.bento-item:nth-child(4) { grid-column: span 2; }
.bento-info {
  position: relative; z-index: 1;
  padding: 20px; width: 100%;
  background: linear-gradient(
    to top, rgba(0,0,0,.7), transparent
  );
}

05 — Interactive

Filterable Gallery

Category-based project filter with toggle buttons. Uses simple JavaScript to show/hide cards based on the selected category.

Filter buttons + Grid — JS toggle FILTER

Web Development

Startup Landing Page

High-converting landing page with animated sections

Mobile App

Task Manager Pro

Productivity app with gesture-based navigation

Branding

Cafe Brand System

Complete visual identity for artisan coffee brand

Web Development

E-Commerce Store

Full-stack store with payment integration

Mobile App

Travel Companion

Location-based travel recommendations

Branding

Eco Startup Identity

Sustainable brand system with packaging design

<div class="filter-bar">
  <button class="filter-btn active" data-filter="all">
    <i class="ph ph-squares-four"></i> All
  </button>
  <button class="filter-btn" data-filter="web">
    <i class="ph ph-globe"></i> Web
  </button>
</div>

<div class="filter-grid">
  <div class="filter-card" data-cat="web">
    <div class="filter-card-img">
      <i class="ph ph-code"></i>
    </div>
    <div class="filter-card-body">
      <h3>Project Title</h3>
      <p>Description...</p>
    </div>
  </div>
</div>

.filter-bar { display: flex; gap: 8px; }
.filter-btn {
  padding: 8px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.5);
  cursor: pointer; transition: all .2s;
}
.filter-btn.active {
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  border-color: rgba(59,130,246,.3);
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.filter-card.hidden { display: none; }

function filterCards(btn) {
  var filter = btn.dataset.filter;
  // Toggle active button
  document.querySelectorAll('.filter-btn')
    .forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  // Show/hide cards
  document.querySelectorAll('.filter-card')
    .forEach(card => {
      if (filter === 'all' || card.dataset.cat === filter) {
        card.classList.remove('hidden');
      } else {
        card.classList.add('hidden');
      }
    });
}

06 — Detailed View

Split Showcase

Image and details side by side, alternating direction. Perfect for showcasing projects with metrics and outcomes.

Alternating grid — stats + link SPLIT

Analytics Dashboard

Designed and built a real-time analytics dashboard for a fintech startup, improving data accessibility for non-technical stakeholders.

+42%Engagement

3.2sLoad Time

98%Uptime

View Project

Social Media Platform

Full-stack social platform with real-time messaging, content feeds, and community features built for creative professionals.

15KUsers

4.8Rating

50msLatency

View Project

AI Writing Assistant

Chrome extension powered by machine learning that helps writers improve clarity, tone, and engagement across any text input.

25KInstalls

-60%Edit Time

92%Accuracy

View Project

<div class="split-showcase">
  <div class="split-item">
    <div class="split-img">
      <i class="ph ph-chart-bar"></i>
    </div>
    <div class="split-content">
      <h3>Project Title</h3>
      <p>Description...</p>
      <div class="split-stats">
        <div class="split-stat">
          <span class="split-stat-val">+42%</span>
          <span class="split-stat-label">Metric</span>
        </div>
      </div>
      <a class="split-link" href="#">
        View Project <i class="ph ph-arrow-right"></i>
      </a>
    </div>
  </div>
</div>

.split-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: center;
  padding: 36px;
  border-radius: 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
/* Flip every other row */
.split-item:nth-child(even) { direction: rtl; }
.split-item:nth-child(even) > * { direction: ltr; }

.split-stats { display: flex; gap: 28px; }
.split-stat-val {
  font-size: 22px; font-weight: 700;
  color: #10b981;
}

07 — Chronological

Timeline Portfolio

Show your work in chronological order with a vertical timeline. Great for freelancers and agencies to display project history.

Vertical timeline — gradient line TIMELINE

2024

Healthcare Patient Portal

Designed an accessible patient portal for a healthcare network, enabling online appointment booking and secure messaging.

React Node.js PostgreSQL

2023

Real Estate Platform

Built a property listing platform with interactive map search, virtual tours, and mortgage calculator integration.

Next.js Mapbox Prisma

2022

EdTech Learning Platform

Interactive learning platform with video courses, quizzes, and progress tracking for coding students.

Vue.js Firebase Tailwind

2021

Restaurant Ordering System

Online ordering and delivery platform for a restaurant chain with kitchen display and driver tracking.

Angular Express MongoDB

<div class="timeline">
  <div class="tl-item">
    <div class="tl-dot"></div>
    <div class="tl-year">
      <i class="ph ph-calendar-blank"></i> 2024
    </div>
    <div class="tl-card">
      <h3>Project Title</h3>
      <p>Description...</p>
      <div class="tl-card-footer">
        <span class="tl-tech">React</span>
        <span class="tl-tech">Node.js</span>
      </div>
    </div>
  </div>
</div>

.timeline {
  position: relative;
  padding-left: 40px;
}
.timeline::before {
  content: ''; position: absolute;
  left: 15px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(139,92,246,.4),
    rgba(236,72,153,.4),
    rgba(245,158,11,.4)
  );
}
.tl-dot {
  position: absolute;
  left: -33px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #8b5cf6;
  background: #0c0c14;
}
.tl-card {
  padding: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}

08 — Interactive Cards

Hover Reveal Cards

Full-bleed cards where project details slide up on hover. A dramatic, portfolio-focused interaction that keeps the layout clean until explored.

Transform + Opacity — slide-up reveal REVEAL

01 / Brand Design

Luxury Brand Refresh

Complete visual identity overhaul for a premium lifestyle brand including packaging and digital presence.

Preview Details

02 / Web App

Project Management Tool

Kanban-style project tracker with team collaboration, time tracking, and automated reporting.

Preview Details

03 / Mobile App

Wellness Tracker

Health and wellness app with habit tracking, mindfulness exercises, and personalized insights.

Preview Details

<div class="reveal-grid">
  <div class="reveal-card">
    <div class="reveal-label">01 / Category</div>
    <div class="reveal-bg">
      <i class="ph ph-diamond"></i>
    </div>
    <div class="reveal-content">
      <h3>Project Title</h3>
      <p>Description...</p>
      <div class="reveal-actions">
        <a href="#" class="reveal-btn reveal-btn-primary">
          <i class="ph ph-eye"></i> Preview
        </a>
        <a href="#" class="reveal-btn reveal-btn-ghost">
          <i class="ph ph-arrow-square-out"></i> Details
        </a>
      </div>
    </div>
  </div>
</div>

.reveal-card {
  position: relative;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}
.reveal-card:hover .reveal-bg {
  transform: scale(1.08);
  filter: brightness(1.2);
}
.reveal-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(
    to top, rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.3) 50%, transparent 100%
  );
  transform: translateY(40px);
  opacity: 0;
  transition: all .35s;
}
.reveal-card:hover .reveal-content {
  transform: translateY(0);
  opacity: 1;
}