HooBank Landing Page

2023

A polished fintech marketing page built by following the JavaScript Mastery HooBank tutorial, as deliberate practice with Tailwind and responsive layout.

Source

React
Vite
Tailwind CSS

Built by following the JavaScript Mastery HooBank tutorial. Included as a styling exercise, not as original design work.

What I took from it

Source

src/style.js

const styles = {
  boxWidth: "xl:max-w-[1280px] w-full",
  heading2: "font-poppins font-semibold text-[48px] leading-[66.8px]",
  paragraph: "font-poppins font-normal text-dimWhite text-[18px]",
};

Centralising the type and spacing scale keeps a dozen sections visually consistent — the habit that carried into this site.

This one is a tutorial build, not original product design, and it is on the site labelled as such — a recruiter who opens the repo would spot it immediately, and pretending otherwise would be worse than including it.

What I took from it was Tailwind's composition model and how a design system holds together across a dozen sections: consistent spacing, gradient treatment and typographic scale. That is the vocabulary this portfolio is built with.