My Porfolio

reference

Tech

• Tailwind 4
• Theme toggle with useContext() hook

Installation

1. npm i
2. import tailwindcss inside vite.config.js
3. Import tailwind inside index.css

Dependencies:

• lucide-react icons
• tailwind-merge creates util function to combine class names in tailwind
• radix-ui/react-toast for toaster
• clsx related to radix ui

Tailwind class names

min-h-screen sets min-height: 100vh

max-sm:hidden hidden when <= 640px

inset-0 shorthand for top right bottom left

z-0 => z-index 0

HSL colors

hsl colors: hue saturation and lightness

• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
• Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white