#UPDATED and finally added clerk so my logins and signup for either company or sales person under a company works
used clerk snippets and clerk cli to fast foward the development landed many bugs on the way mostly eith redirection and navigation been hell tryna fix them

#CHANGED UI TO LOOK SOMETHING BETTER
Mehn it’s been crazy tyna change the ui designs had to work on my ‘global.css’ and any inline styling just happy i got good results . Day 5 of working without any figma design

Vendora — Formerly Zillion Enterprise

Vendora started as a product I built for a client. I couldn’t pitch the idea well enough to get the project off the ground, but building it made me realize that the problem wasn’t specific to one client.

So instead of letting the work go to waste, I’m turning Vendora into a SaaS product.

The goal is to take what was originally a custom solution and turn it into something that other businesses can sign up for, use, and get value from without needing a custom implementation.

From a failed client pitch to a SaaS product.

That’s what Vendora is becoming.

Refactored the codebase after review feedback — real types, shared components, and copy that actually sounds like me

Got flagged for overusing AI in the submission, so I went back through the whole thing file by file instead of just tweaking the surface. Turned into a proper refactor pass.

What’s in it

• Fixed the types instead of casting around them — Project and ExperienceItem in lib/data.ts were missing fields (status, link, impact, highlights), so every component consuming them was littered with as any. Extended the actual types and removed every cast.
• Extracted Badge and TerminalWindow — the same colored-badge markup was copy-pasted near-identically across Projects.tsx, Experience.tsx, CTF.tsx, and Contact.tsx, and the terminal-window mock was duplicated in two more places. Pulled both into shared components.
• Simplified the Brevo integration — lib/brevo.ts had a full HTML “email card” builder with its own design-token constants and a hand-rolled escapeHtml, for an email that only ever lands in my own inbox. Cut it down to what the contact form actually needs.
• Killed a recurring string hack — color.replace("1)", "0.2)") to derive a lighter shade from an rgba string was showing up in three different files. Replaced with actual stored bg values.
• Rewrote the bio and project/experience copy — the original text in data.ts and About.tsx all had the same over-polished, bolded-keyword rhythm you get from one AI pass. Rewrote it to sound like how I'd actually describe this stuff.
• Repo cleanup — deleted a pile of unused screenshots in /public and a stale implementation.md that no longer matched the site.
• Swapped a placeholder hero stat for a real one — now shows my actual HackerDNA rank (#1 in Nigeria) instead of a filler number, and fixed the scroll-behavior build warning while I was in there.

Why this fits

The flag wasn’t wrong to catch — a lot of this genuinely read as generated: duplicated markup that was never refactored, any-casts instead of fixed types, an over-engineered email builder for a one-off form, and bio copy that hit every AI-bio beat (bolded keywords, tidy aphoristic closers). Going through it properly meant fixing the root causes — bad types, real duplication — not just rewording things. Ended up being a better codebase either way, not just a resubmission.

Rewrote the README to actually tell the story — from “way too extra” to stripped down and fast

Went back through and rewrote the whole README instead of just patching the stack table. The old version was still describing the Framer Motion / matrix rain / glitch loader era even after most of that got ripped out — docs had drifted from what the site actually does.

What’s in it

• Origin story section — laid out the actual arc: started with zero Next.js/React experience, went overboard with a full boot loader, matrix rain, glitch text, parallax orbs, 3D-tilt avatar, mouse-tracked glow cards, background video — then got told the UI was too heavy and stripped it all back to plain CSS hover states and server components.
• Mail server callout — pulled the SMTP/Postfix/Brevo relay work (SPF, DKIM, DMARC) out as its own section since that was the actually hard part of this project, not the frontend.
• Updated section list — Hero, About, Skills, Experience, Projects, CTF, Blog, Uses, Contact — added the new /uses page and dropped references to features that no longer exist.
• Stack table cleaned up — removed Framer Motion entirely, added fonts (Inter + JetBrains Mono), content pipeline (blog posts as data via react-markdown), and domain info.
• Dev setup switched to pnpm — pnpm install / pnpm dev / pnpm check instead of npm, matching the actual workspace config.
• Real project structure — updated the tree to match current src/app, src/components, src/lib layout instead of the old flat structure.
• “What I’d do differently” section — added a retro-style note: start simpler, ship the blog earlier, set up pnpm check from day one instead of relying on build to catch mistakes.

Why this fits

Docs that describe features you already deleted are worse than no docs — anyone landing on the repo (recruiter, hiring manager, another dev) would’ve read about a matrix-rain loader that doesn’t exist anymore. Rewriting it to match reality, and being upfront about the “too extra” phase instead of hiding it, is the same instinct as the frontend rework itself: cut what doesn’t need to be there.

Reworked the frontend performance by stripping out Framer Motion and eliminating heavy UI animations to fix site bloat and maximize loading speed.

What’s in it

• Framer Motion removal: Purged all heavy animation dependencies to drastically reduce JavaScript bundle size and eliminate layout thrashing.
• CSS-only micro-interactions: Replaced JS-driven animations with lightweight, native CSS transitions that respect user prefers-reduced-motion settings.
• Zero-JS state handling: Shifted dynamic hover/focus states directly to native CSS pseudo-classes (:hover, :focus-visible).
• Render optimization: Minimized DOM paint bottlenecks and improved Core Web Vitals (LCP and CLS) for near-instant page loads.

Why this fits

Refactored directly in response to submission feedback (“your project has heavy UI usage, please rework the frontend and resubmit”). Stripping unnecessary motion bloat aligns the portfolio with a core cybersecurity principle: prioritizing speed, efficiency, and zero-fluff performance over visual bloat.

Added a custom 404 page styled as a hacker terminal — fitting the cybersecurity theme instead of using a generic “page not found.”

What’s in it

• Fake nmap scan output styled to look like a real terminal session
• Scans the broken URL path itself (vincentiwuno.me/???) as if probing it
• Returns a fitting “host unreachable · port closed” error in place of a normal 404 message
• Exit code echoed back as 404 (echo $?) — a small detail that doubles as both a joke and the actual HTTP status
• Simple “← back to home” link to get users back on track

Why this fits

Keeps the visitor inside the site’s aesthetic even when they hit a broken link, instead of dropping them into a default framework error page. Small detail, but it’s the kind of thing that reinforces the whole cybersecurity-portfolio identity rather than breaking it.

Built out the Site Health Crawl feature for the SEO Auditor — a full-site crawler that checks robots.txt, sitemap, meta tags, H1s, schema, and broken links across every page.

What’s in it

• Crawl engine — walks the full site from the sitemap and scans every discovered page
• Robots.txt check — confirms a user-agent directive is present and the site isn’t accidentally blocking itself
• Sitemap detection — locates sitemap.xml, counts pages listed, and confirms it’s reachable
• Crawl map — visual list of every page discovered so you can see site structure at a glance
• Page-level audit table — per-page breakdown of HTTP status, title length, meta description length, H1 presence, and schema markup, each flagged with issue counts where something’s off
• Broken link detection — surfaces dead links site-wide instead of per-page

Notes

• Click into individual page issues to show exactly what’s wrong (title too short/long, missing meta, etc.) instead of just an issue count
• Add historical crawl comparison so users can see what changed since the last scan

Wired up email sending with Brevo so contact form submissions land straight in my inbox.

Built out the /contact page with a subject dropdown (security consultation, pentesting inquiry, CTF collaboration, job opportunity, etc.) and a message field, backed by Brevo to actually deliver the emails instead of just sitting in a form with nowhere to go.

What’s in it

• Contact form with subject categorization so I can triage messages faster
• 500-character message limit with live counter
• Brevo integration to handle delivery reliably instead of rolling my own SMTP
• Social/contact links section (GitHub, LinkedIn, X, TryHackMe, HackTheBox, HackerDNA, Instagram) alongside the form

Problems faced

Ran into domain/IP verification issues with Brevo — emails weren’t sending properly until the sending domain was correctly verified. Had to go through and set up the DNS/domain verification properly on Brevo’s side before delivery actually started working.

Notes

• Add basic rate limiting on the form itself to prevent spam/abuse
• Auto-reply confirmation email on submit

Built out the Site Audit page for the SEO Auditor — full Lighthouse-style scan integration covering SEO, Performance, Accessibility, and Best Practices, plus Core Web Vitals (LCP, CLS, FCP, Speed Index, TTI).

What’s in it

• Full site scan — pulls scores across 4 categories (SEO, Performance, Accessibility, Best Practices) with a single “Run New Audit” trigger
• Audit issue breakdown — flags critical issues like legacy JavaScript, heading order problems, network dependency chains, and missing link names, each with a Fix action
• Core Web Vitals panel — surfaces LCP, CLS, FCP, Speed Index, and Time to Interactive at a glance
• Health status checks — HTTPS status and sitemap detection/page count
• Scan history — tracks scores over time so users can see trend, not just a snapshot

Google Search Console / SERP integration

Wired up SERP and Google Search Console data alongside the Lighthouse-style audit so the page isn’t just technical scoring — it also pulls in real search visibility data (keyword positions, indexing status) to give a fuller picture of site health rather than just performance metrics in isolation.

Problems faced

Google Search Console gave me a rough time:

• OAuth kept generating incorrectly — spent a long time debugging why the auth flow wasn’t producing valid tokens
• Page Insights access wasn’t being granted — even after “fixing” the OAuth, some scopes weren’t allowing the page insights data I needed
• SERP data never wired up cleanly — couldn’t get a reliable integration working in the time I had
• Burned through API quota while testing/debugging all of the above, which slowed iteration even further

Still an open problem — SERP and GSC integration need another pass. Noting it here so future-me remembers where it broke.

Notes

• Fix Google Search Console OAuth flow (check scopes + redirect URI config)
• Get SERP data wired up reliably
• Add pagination/filtering for the full issue list (currently capped at “view all” expand)
• Surface historical Core Web Vitals trend, not just latest scan

Added Hacker style Art loading

Added Team Workspace To the SEO AUDITOR

writing up blogs

My personal website portfolio

Updated the setting , accounts and integration Ui .

An AI SEO Auditor which gives a full SEO audit, live keyword rankings, and backlink monitoring in seconds. Then let your AI Growth Copilot tell you exactly what to fix first — and paste the fix.