Skip to main content

Vibe Coding Project 3: Creative Portfolio in Bricks Builder

Design a bold, creative portfolio site using AI + CSS, then build it end-to-end in Bricks Builder.

🎯 Project Goal​

A high-impact creative portfolio with:

  • Full-screen animated hero with name + role.
  • Masonry / CSS Grid portfolio gallery.
  • About section with image and text side-by-side.
  • Skills / tools section with progress bars.
  • Contact form with styled inputs.

Phase 1: The Master AI Prompt​

Build a creative portfolio website for a web designer.
Visual tone: modern, bold, dark background with vibrant accent.

Color tokens:
  --bg:        #080808;
  --surface:   #111111;
  --accent:    #00ff87;   /* Electric green */
  --accent-2:  #7c3aed;   /* Deep violet */
  --text:      #f0f0f0;
  --muted:     #666666;

Typography: 'Space Grotesk' (Google Fonts) + fallback system-ui.

Sections needed:
1. Hero: 100vh, name in large typography clamp(3rem, 8vw, 7rem), role in accent color,
   subtle animated gradient orb in background using keyframes.
2. Portfolio grid: CSS masonry using grid (columns: repeat(auto-fill, minmax(320px,1fr))),
   hover overlay with "View Project" text fade in.
3. About: two-column (image left, text right), image with clip-path polygon shape.
4. Skills: horizontal progress bars animated on scroll (use Intersection Observer placeholder).
5. Contact: form with styled inputs (transparent background, accent border-bottom).

All CSS in :root variables. BEM naming. Mobile-first responsive.
Output: complete HTML file.

Phase 2: Advanced CSS Patterns Used​

Animated Gradient Orb (Hero Background)​

.hero__orb {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,255,135,0.15), transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, -50%) scale(1.15); }
}

Portfolio Card Hover Overlay​

.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.portfolio-card__overlay {
  position: absolute;
  inset: 0;                      /* shorthand for top/right/bottom/left: 0 */
  background: rgba(0, 255, 135, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-card:hover .portfolio-card__overlay { opacity: 1; }

Clip-Path Image Shape​

.about__image {
  clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 15% 100%, 0 85%);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

Animated Progress Bar​

.skill-bar__fill {
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-bar__fill.is-animated { width: var(--skill-level, 80%); }

Phase 3: Bricks Builder Implementation​

Step 1 — Global Settings​

/* Bricks → Settings → Custom Code → Custom CSS */
:root {
  --bg:        #080808;
  --surface:   #111111;
  --accent:    #00ff87;
  --accent-2:  #7c3aed;
  --text:      #f0f0f0;
  --muted:     #666666;
}
body { background: var(--bg); color: var(--text); }

Step 2 — Hero Section in Bricks​

  • Element: Section → set min-height 100vh in Style panel.
  • Custom CSS on Section: 
    %root% {
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
  • Add a Div element for the orb with class hero__orb and the keyframe CSS.

Step 3 — Portfolio Grid​

  • Use a GB Grid or Bricks grid with repeat(auto-fill, minmax(320px, 1fr)) via custom CSS.
  • Add hover overlay using a Div absolutely positioned inside each card container.

Phase 4: AI Refinement Prompts​

1. "Add a typing animation effect to the hero role subtitle using CSS."
2. "The portfolio grid should have an image zoom effect inside the card on hover."
3. "Style the contact form inputs with a glowing accent border-bottom on focus."
4. "Create a subtle noise texture overlay on the header background using CSS."