Components - JPL-DEV

Component Library

Reusable UI components powering the portfolio

Widget Cards

Profile Card

Themed card component with a coloured header band and a flex body. Works with any header colour utility.

Stats Card
12+
Projects
5+
Years
100+
Commits
Info Card

Cards use CSS custom properties for background and border, so they automatically adapt to light & dark themes.

Badges

Default Primary Active Featured Info Python JavaScript Flask Tailwind

Buttons

Primary Default Docs View

Header Colour Palette

Blue
bg-blue-600
Green
bg-green-600
Cyan
bg-cyan-600
Gray
bg-gray-600
Amber
bg-amber-500
Red
bg-red-600

Repository Card

JPL Dev Portfolio Python

Personal portfolio site built with Flask, Tailwind CSS, and GitHub Pages.

Flask Tailwind