Portfolio (Contra Profile Clone)

A 1:1 replica of the creator profile experience from Contra.com - designed for freelancers and creators to showcase their work, services, reviews, and profile credibility. Built for personal portfolios, marketplaces, or modern freelance landing pages.

Build a fully responsive creator profile template that is a pixel-perfect replica of Contra.com’s profile layout.

Include a top profile section with avatar, name, title, location, earnings, average rating, badges (e.g., “Top Independent”, “Contra Certified”), and CTA buttons (“Get in Touch”, “Available Now”).

Add sticky tab navigation (Overview, Work, Jobs, Reviews, Services, About) with Framer Motion transitions.

Each section should include:

Overview: featured work grid with images, project tags, titles, and categories

Services: card grid of offerings with tags, prices, and screenshots

Reviews: testimonial cards with client name, avatar, star rating, and quote

About: full profile bio, badge section with certification icons, skills list, location, timezone, languages, and “Featured In” section

Styling should use Tailwind CSS and match Contra’s layout and hierarchy exactly.

All content should be data-driven and stored in separate files: data/projects.ts, data/services.ts, data/reviews.ts, and data/certifications.ts.

Add skeleton loading states and error boundaries.

Ensure everything is mobile responsive and accessible.

This project was a deep dive into interface replication - aiming for near pixel-perfect similarity with Contra. Every module (projects, reviews, services, about) was rebuilt from scratch using Bolt and adjusted with dozens of micro refinements.

Despite platform limitations, the structure achieved ~80% accuracy - anything more would break the generated layout. Special care went into replicating font sizes, layout spacing, tab state logic, and Framer Motion transitions.

Escaped apostrophes in mock data files to prevent syntax errors

Fixed import analysis failures by manually correcting paths

Manually created missing pages (About, Reviews, Services, etc.)

Adjusted spacing, avatar scaling, and button sizes after initial Bolt renders were misaligned

Simplified modal logic and dynamic tabs to avoid router crashes