I Built My Brother a Portfolio with a Custom CRM — In a Weekend

A freelance portfolio used to mean a Behance page and a Google Sheet for tracking clients. I built my brother a full platform with a 6-stage lead tracker, contract generator, and rate calculator — all client-side, no backend. Here is why branding and tooling are the real moats in the age of AI.

Cover Image for I Built My Brother a Portfolio with a Custom CRM — In a Weekend

When AI can build the product, the brand is what makes people choose you


The Uncomfortable Truth About AI and Creative Work

Right now, in 2026, you can prompt an AI to generate a logo, edit a video, build an entire web app, or write marketing copy in an afternoon. The tools are getting absurdly good. I use them myself. I built Arkitekto and shipped multiple products with AI as my co-pilot.

But the easier it gets to make things, the harder it gets to stand out. When everyone has access to the same tools, the output starts looking the same. The same Midjourney aesthetic. The same ChatGPT-written copy. The same template-driven portfolios.

What AI can't mass-produce is a real brand: a distinct identity, the kind of presence that makes someone choose you over the next person who can technically do the same work.

That's why I built aj.pastelero.ph for my brother AJ. It's a portfolio, and behind it, a full freelance platform with a built-in CRM.

Why a Portfolio Matters More Now Than Ever

My brother AJ is a video editor and motion graphics artist based in Cebu. He works full-time at Creative Alliance and freelances on the side. He's edited 100+ videos, built 15+ brand identities, and delivered content across 6+ platforms, including Instagram, Facebook, TikTok, and YouTube Shorts.

The problem? So have thousands of other editors. The barrier to entry in creative work has collapsed. Someone with CapCut and a few YouTube tutorials can call themselves a video editor tomorrow. And honestly, some of them will produce decent work.

But decent work doesn't win clients. What wins clients is trust, consistency, and the feeling that this person gets it. That's branding, and branding starts with how you present yourself.

AJ needed more than a Behance page. He needed a site that communicates who he is, what he's capable of, and why you should hire him before a single conversation happens, plus tools to actually run his freelance business rather than just showcase it.

The Portfolio

The portfolio hero: scramble text animation, HUD elements, and rotating role titles

The portfolio is a single-page experience built with Next.js 16, Tailwind CSS 4, and Motion for animations.

The hero opens with a scramble text animation on AJ's name and a rotating role title: Video Editor, Motion Graphics Artist, Multimedia Designer, Brand Designer. HUD-style UI elements (targeting brackets, scan lines, hex grids) give the page a tech-forward look that matches his motion graphics work.

The about section shows proof instead of claims: 50+ projects delivered, 100+ videos produced, 15+ brands created. Skill bars with actual ratings, and a grid of 15 tools he's proficient in, from Premiere Pro to Blender. His resume is one click away.

Then the work itself: four branding projects (Akawntant, Arkitekto, Isip, and Lion Mate), each with interactive galleries, and 21 embedded videos (10 client, 11 personal) organized by category. You can watch his work without leaving the site.

Branding showcase with interactive project galleries

But the portfolio is just the front door. The real differentiator is what's behind it.

The CRM: What Used to Take Months Now Takes a Weekend

Five years ago, a freelancer who wanted to manage their client pipeline had three options: a spreadsheet, an expensive SaaS subscription, or building something from scratch with a backend, database, auth system, and deployment pipeline.

Today? I built AJ a full-featured CRM in a single afternoon. No traditional database, no monthly SaaS subscription. Just Vercel Blob for storage, Next.js API routes for persistence, and localStorage as a client-side cache, about 900 lines of TypeScript for the frontend alone.

Here's what it does:

The lead tracker CRM: stats dashboard, pipeline status badges, overdue alerts, and lead cards

6-Stage Pipeline

Every lead flows through a visual pipeline: New → Contacted → Replied → Negotiating → Won → Lost. Each stage is color-coded (blue, amber, violet, cyan, green, red), with a stacked bar chart showing the distribution at a glance. Click a status badge on any lead card to move it through the pipeline instantly.

Lead Tracking with 11 Data Fields

Each lead captures: name, company, email, platform source (9 options including LinkedIn, Instagram DM, Upwork, Fiverr), service type (6 categories, from Short-Form Content to Monthly Retainer), budget, status, notes, creation date, last contact date, and follow-up date.

That last field drives automatic overdue alerts. If a follow-up is past due and the lead isn't won or lost, it gets flagged with a red badge, so a potential client never sits forgotten in the pipeline.

Search, Filter, Export

Real-time search runs across name, company, email, and notes, with a status filter dropdown. Full JSON export/import handles backups: download a timestamped file, or restore from one. The data is AJ's, always.

Stats Dashboard

Four KPI cards at the top (Total Leads, Active, Won, and Overdue) tell AJ exactly where his pipeline stands. At the bottom, a color-coded pipeline bar shows how many leads sit in each stage, with percentages.

Pipeline visualization and more lead cards: status badges, budgets, notes, and the stacked pipeline bar

Minimal Infrastructure

The CRM persists data to Vercel Blob through Next.js API routes, with localStorage as a client-side cache for instant reads. The API routes use timingSafeEqual for password authentication, the same constant-time comparison used in production auth systems.

Password gate: all business tools are protected behind authentication

Why Vercel Blob and not a real database? Because the data model doesn't need one. AJ's entire lead pipeline is a single JSON array, maybe 30 objects at peak. There's no relational data, no concurrent users, no complex queries. The whole dataset fits in memory with room to spare.

Vercel Blob gives you a put() and list() API with 500MB of free storage. That's it. No schema, no migrations, no ORM, no connection strings. For a use case where the entire dataset is one JSON file that gets overwritten on every save, it's the simplest thing that works, and that makes it the right tool.

I could have reached for Supabase or Postgres. But that would mean provisioning a database, writing a schema, setting up an ORM, and managing connection pooling, all for a freelancer tracking 20 leads. That's engineering for the architecture instead of for the user. The best infrastructure choice matches the actual problem, not the tech stack slide.

If AJ ever needs concurrent users, complex filtering, or audit trails, migrating from Blob to a real database means changing one layer (the four API routes), not rewriting the app. But he won't need that. And that's the point.

The git log tells the real story. The entire platform (portfolio, CRM, contract generator, rate calculator, and Vercel Blob integration) shipped in 41 commits over a single afternoon session:

  • 4:11 PM: First commit. Scaffolded the Next.js project.
  • 4:45 PM: Full portfolio with all sections live. 34 minutes.
  • 5:50 PM: Video carousels, branding showcase, graphic design gallery, parallax hero, magnetic buttons done.
  • 6:22 PM: Rates page with calculator and tiered pricing.
  • 6:37 PM: Contract generator.
  • 6:58 PM: Lead tracker CRM created.
  • 9:48 PM: Vercel Blob cloud storage integrated.
  • 10:34 PM: Security patches finalized. Done.

That's 10,781 lines of code across 93 files, in roughly 4.5 hours of actual coding time (with breaks in between). From zero to a deployed, branded freelance platform with persistent cloud storage, PDF generation, and a 6-stage CRM.

This is the part that would have been unthinkable five years ago. The CRM features themselves are straightforward. What's new is that one developer with AI-assisted coding can ship a production-quality platform in an afternoon, with zero recurring infrastructure costs. Frontend frameworks, component patterns, and tools like Claude Code have collapsed the gap between "idea" and "shipped product" to a few hours.

The Contract Generator

The contract generator: client info, service presets, deliverables checklist, PDF export

On top of the CRM, I built a contract generator that produces professional PDF agreements. AJ fills in client details, selects services from presets, checks off deliverables, sets terms (revision rounds, delivery format, payment schedule), and exports a properly formatted PDF with auto-calculated totals and his pre-signed signature.

It's built with jspdf and html2canvas-pro, with multi-page support, A4 formatting, and automatic pagination. The output looks like something from a design agency, not a side project.

The alternative is a Google Doc template that AJ would copy-paste and manually update every time. That kind of operational friction is what kills freelance businesses. The talent is rarely the problem; the tooling around the talent is.

The Rate Calculator

Service rates page: pricing tiers, 5-step process flow, and interactive calculator

The rates page includes an interactive calculator where AJ can configure service quantities (number of short-form videos, YouTube edits, corporate videos, motion graphics pieces) and get an estimated range instantly.

The interactive rate calculator: select services, adjust quantities, get an instant estimate

It also has tiered pricing cards (Starter/Growth/Scale) with savings percentages and a "How It Works" flow.

Clients can browse the rates page before the first conversation even happens. That transparency builds trust and filters out budget mismatches early.

The Admin Dashboard

The business tools live together in an admin panel with sidebar navigation, a KPI overview, and quick actions, rather than being scattered across separate pages.

Admin dashboard: KPI cards, quick actions for leads/contracts/rates, and recent leads

The dashboard shows total leads, active pipeline, won deals, and overdue follow-ups at a glance. Quick action cards link directly to the lead tracker, contract generator, and service rates. Recent leads surface at the bottom so AJ sees new inquiries the moment he logs in.

The admin leads view mirrors the standalone CRM but lives inside the unified panel: same search, filters, pipeline bar, and export/import, all synced to Vercel Blob with a "SYNCED" indicator in the corner.

Admin leads view: CRM with sidebar navigation, search, pipeline bar, and cloud sync

The Calendar

Freelancers juggle multiple projects with overlapping deadlines. The calendar gives AJ a visual layout of his schedule: projects, deadlines, meetings, follow-ups, deliveries, and personal events, all color-coded by type.

Project calendar: monthly view with event types, filters, and upcoming events sidebar

It supports 6 event types (Project, Deadline, Meeting, Follow-up, Delivery, Personal), filters by type, and shows upcoming events in a sidebar. Like the rest of the platform, it persists to Vercel Blob. There's no Google Calendar dependency or third-party sync, just a purpose-built tool.

The Branding Argument

Branding stopped being a nice-to-have. For creatives, it's the moat.

Think about it from a client's perspective. You need a video editor, so you search online or ask for referrals and end up with five names. All of them have reels. All of them can edit. What makes you pick one?

Mostly, it's how their site makes you feel: whether their visual identity matches the quality of the portfolio, whether they have a contract generator ready instead of "I'll send you a Google Doc," whether the animations, typography, and color palette show attention to detail. These signals communicate competence before you've seen a single frame of their video work.

AI Makes Products, Branding Makes Businesses

I've built enough products to know the building is the easy part now. AI accelerated everything. I can ship an MVP in a weekend.

But I've also watched technically good products fail, and mediocre products win, because the winners had better positioning, clearer messaging, and a stronger identity.

When tools democratize creation, output becomes a commodity, and the only escape is differentiation. At the same time, AI-generated content has created a trust deficit: people want to know there's a real human with real taste behind the work. A coherent brand solves both problems. It cuts through the noise because it's recognizable and consistent, and it signals there's someone who stands behind the output. Random quality doesn't compound. Brand does.

For creatives especially, this is existential. If an AI can edit a video (and it's getting there), the value shifts from technical skill to creative direction, storytelling instinct, and the client relationship. Those are exactly the things a brand communicates.

The Technical Details

For those who care about the stack:

  • Next.js 16 with App Router and React 19
  • Tailwind CSS 4 for styling
  • Motion (the Framer Motion successor) for animations: scramble text, parallax, magnetic buttons, lightbox transitions
  • Vercel Blob for persistent storage (leads, contracts, rates) via API routes
  • jspdf + html2canvas-pro for the contract PDF generator
  • localStorage as a client-side cache for instant CRM reads
  • Vercel for deployment with a custom domain

The design system uses a gold/brown/cream palette with HUD-style accents: corner brackets, scan lines, monospace labels. Every component in the CRM reuses the corner bracket motif from the portfolio, so the business tools feel like a natural extension of the brand instead of an afterthought.

The CRM alone is about 900 lines. The contract generator is another 940, and the rate calculator 790. The business operations layer totals about 2,600 lines; the portfolio, with all its animations and galleries, accounts for the rest of the 10,781.

What Creatives Should Take Away

If you're a creative professional (video editor, designer, photographer, whatever) and you don't have a strong online presence, you're leaving money on the table. And I don't mean "post more on Instagram." I mean:

  1. Own your platform. Social media profiles are rented land. A personal domain with a proper portfolio is yours; it shows up in search and doesn't get buried by an algorithm.

  2. Show the work instead of talking about it. Embed your videos. Display your designs at full resolution. Let the work do the selling.

  3. Build tools into your brand. A rate calculator, a contract generator, a lead tracker: these signal professionalism, and clients notice. The tools to build them are free and fast now. You don't need a SaaS subscription to manage 20 leads.

  4. Invest in the details. Typography, color consistency, animation polish, mobile responsiveness. Clients read these as trust signals, not vanity.

  5. Differentiate through identity. When AI can replicate skill, your perspective and aesthetic become the product. Protect and project that.

Try It

Check out AJ's portfolio at aj.pastelero.ph. If you're looking for a video editor or motion graphics artist who takes his craft seriously, you'll see it in the first three seconds.

And if you're a creative professional who needs a proper portfolio, reach out. The gap between "I have a Behance" and "I have a platform" has never been smaller.

Let's build something together.

Got an idea? I'm always up for a new challenge, whether it's a side project, a startup, or something in between.

© 2026 Cyrus David Pastelero. All rights reserved.

Built with Next.js, TypeScript & Tailwind CSS