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.

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

Added Hacker style Art loading

writing up blogs

My personal website portfolio