The Portfolio

From neo-brutalism to the live site

Four months of iterations. Each step took something away: hard shadows, then gradients, then color everywhere. What's left: one red, black, white, and a small character for warmth.

The SkillxTube system

A red badge with a white bolt, five colors, two typefaces. The rules got stricter screen after screen until they became non-negotiable in every Cursor prompt.

Zero Figma. All of it came out of AI.

Logo, guidelines, mockups, mascot, resources and code: every piece of this portfolio was generated by AI, then picked, critiqued and refined by me. My role: art direction, references and the final call.

The landing page, in three molts

A neo-brutalist first draft (thick borders, hard shadows), then a calmer version on a light gray background with white cards, and finally a blend with the ShipFast structure: hero, problem, features accordion, pricing, FAQ.

The features accordion set a rule used everywhere since: color only appears on the active element.

The “The problem” section moves to a black background: a Without / With SkillxTube comparison, a single word highlighted in red, and Thumby as a sticker in the corner.

The dashboard: one button that matters

Brief: “one primary CTA dominates”. Everything else steps back. The right column was then stripped down like an analytics tool: black monospace numbers, black progress bars, green reserved for “done”.

Wall of Fame, the quiet version

V1 had a gold, silver and bronze podium. Verdict: “Christmas tree”. V2 keeps white cards with thin hairlines: #1 stands out only through a red border and a slightly larger size, and the rank is set in monospace.

The top 3 win Skill Credits every Monday: 500, 300, 150.

One space per skill

Space switcher (from three to ten), collapsible channel groups, pinned posts, a clickable events calendar. Locked channels unlock with credits, through a popup that sends you to the shop when your balance is too low.

Report a bug, from any screen

The Report a bug modal, open from any screen of the app and the demo.

• 4 categories and 3 severity levels
• Only the browser name and screen size are attached
• Admins get an email, and a confirmed report can become a GitHub issue
• Bot protection and an hourly limit
• The email is deleted when the report is closed, or after 90 days

For makers: free, or generate

First a 7-step credit slider, then three Orchestra-style cards. Today, two cards on a dark background: the library is free, you only pay to generate a custom path.

The Generate card carries a 3, 7 or 14-day picker, and the pay once / monthly toggle stays on top.

Maker Projects

A flame-based ranking voted by learners: free, no pay-to-win. A three-card podium with #1 on a dark card, then the list, filterable by “All-time” or “Last 30 days”.

On each side, five bookable “Feature your channel” cells, clearly marked as sponsored and with no effect on the ranking.

Affiliate sign-up as a conversation

“Recommend once. Get paid every month for a year.” Applying happens in a chat: name, where you'll share, confirming you're 18+ and the terms, then a button to the affiliate space.

40% of every payment for 12 months. The affiliate space tracks clicks, sales, conversion and commissions, with a 10% code to give away.

Advertise on SkillxTube

A low-key brand program: paths stay editorial, brands book logo cells. Footer, app sidebar, channels board, around the Zip vs the Brainrot game.

Booking takes three steps on a mockup of the site: click the open cells, choose 3, 6 or 12 months (up to 30% off), drop your logo and link, then pay through Stripe. Every logo is reviewed before it goes live and marked as a sponsored link.

Four paths, live

White background, black text, an all-black video player and timeline. For 14 days, the timeline splits into two weeks of seven columns to stay readable.

Zip, the mascot

A small creature whose tuft echoes the logo's bolt. Character sheet, silhouette test, legibility from 96 down to 24 px, 25 reactions, then Zip becomes each learner's customizable avatar. Yellow is deliberately left out of the palette.

Zip vs the Brainrot

A playable game built on Astrocade: Zip sorts each statement into brainrot or actual knowledge. Six mistakes and it's over.

Embedded in the SkillxTube community space, with Zip wearing headphones: every round won earns 150 SkillXP, with unlimited rounds.

The game now has its own page: 110 sets of 18 statements, combos up to ×4, a leaderboard of the best rounds and a visible scoring grid. Four $850 logo cells on each side, and a link to install the game app.

20 Thumbys hidden per session, moving with every visit, 4 of them with a prize. Quests with progress bars reward SkillXP, until January 31, 2027. A scrolling ticker announces it at the top of the site.

Zip and the gang

Six characters, six little slices of YouTube life: a flaw you can see, a weakness you can guess, a running gag. Plus CC, who sneaks in. Each character has a sheet (three poses, silhouette, legibility, palette), then a storyboard per episode.

She captions everything, including what others leave unsaid. Except how she feels about Zip: her own subtitles give her away. Lavender for tenderness and mystery.

She arrives as a riddle: a stray “[Zip is happy]” in episode 7, mysterious subtitles, then the reveal.

Zip on TikTok

Making the mascot go viral with short videos that must never look educational. A broad “relatable YouTube” angle, never preachy, and never putting creators' work down.

73 resources in their space's colors

PDF guides, PNG diagrams, Excel workbooks and code files across ten spaces. Each space signs its footers and diagram headers with its own accent color. In the workbooks, input cells are yellow and everything else is calculated.

SkillxTube in 35 seconds

“You wanted to learn.” Then a path generated in a few clicks, and the promise: daily actions, not more videos.

Free tools: one result a day

Calculators, not lead magnets: no account, no YouTube fetch. Each one gives a score or a verdict, then points to a matching path.

Guides: X is not Y

Each guide turns a habit into a clear distinction, then gives a side-by-side table, a “Do this tonight” list and a “Common mistake” box.

RankBid.Body

Live auctions for ad spots placed on a body, front and back. Built in one hour as static HTML, then reworked: parallax tilt on hover, a light sheen, raised anatomical pins, zoom and pan.

It started with the outbid.lol trend on X (Twitter): I built my own take on it before refocusing on SkillxTube. The idea stayed. Bidding for visibility shaped SkillxTube's Advertise program, which is why it earns its place in this portfolio.

Other AI products