``` ```tsx Reduced section spacing theme={null}

``` For component-level spacing adjustments, Tailwind's spacing scale (`p-4`, `p-6`, `gap-6`, `mb-8`, etc.) maps directly to 4px increments — `p-6` is 24px, `p-8` is 32px. *** ## Tweaking Framer Motion animations Every animated element in Slik Dev uses `framer-motion`'s `motion.div` with `whileInView` for scroll-triggered entrance animations. The standard pattern looks like this: ```tsx theme={null} ``` You can tune three properties on `transition` to change how the animation feels: | Property | Default | Effect | | ---------- | -------------- | ----------------------------------------------------------------------------------------- | | `duration` | `0.5` | How long the animation takes in seconds. Lower = snappier. | | `delay` | `idx * 0.1` | Stagger delay per item in a list. Set to `0` to animate all at once. | | `ease` | Framer default | Controls the easing curve. Try `"easeOut"` or `[0.16, 1, 0.3, 1]` for a spring-like feel. | ```tsx Default animation theme={null} transition={{ delay: idx * 0.1, duration: 0.5 }} ``` ```tsx Faster, spring-like animation theme={null} transition={{ delay: idx * 0.05, duration: 0.4, ease: [0.16, 1, 0.3, 1] }} ``` ```tsx No stagger, instant entrance theme={null} transition={{ duration: 0.3, ease: "easeOut" }} ``` Set `viewport={{ once: true }}` to only trigger the animation the first time an element enters the viewport — this is Slik Dev's default. Remove it if you want the animation to replay every time the user scrolls back up. *** ## Controlling dark mode Dark mode is enabled by default and managed through a `ThemeContext` that reads from and writes to `localStorage` under the key `"theme"`. The initial value is determined in this order: 1. If `localStorage.getItem('theme')` exists, use it. 2. Otherwise, use the OS-level `prefers-color-scheme` media query. The theme is applied by toggling a `dark` class on `document.documentElement`, which activates all `dark:` Tailwind variants across the app. To change the **default** mode to light (ignoring the OS preference), modify `ThemeContext.tsx`: ```tsx Default (respects OS preference) theme={null} const [theme, setTheme] = useState(() => { const savedTheme = localStorage.getItem('theme') as Theme | null if (savedTheme) return savedTheme return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' }) ``` ```tsx Always default to light theme={null} const [theme, setTheme] = useState(() => { const savedTheme = localStorage.getItem('theme') as Theme | null if (savedTheme) return savedTheme return 'light' // ignore OS preference, default to light }) ``` Dark mode transitions are set at `duration-300` globally via Tailwind, giving every color change a smooth 300ms cross-fade. *** ## Using and swapping Lucide React icons Slik Dev uses [Lucide React](https://lucide.dev) for all icons throughout the app. Every icon is a named import from the `lucide-react` package: ```tsx theme={null} import { Zap, Palette, Shield, Database, Layout, Command } from 'lucide-react'; ``` To swap an icon, replace the component name with any valid Lucide icon name. Browse the full catalog at `lucide.dev/icons` and search by keyword. All icons accept standard props: ```tsx theme={null} // Size // Color via Tailwind // Stroke width ``` Icons in the features grid use `w-6 h-6` (24px). Icons in the tech stack grid use `w-10 h-10` container divs with the icon inside. Match the size to the surrounding container to keep visual balance. *** ## Conditional styling with clsx and tailwind-merge Slik Dev's tech stack includes both `clsx` and `tailwind-merge` for composing Tailwind classes conditionally without conflicts. Use them together whenever you need to apply classes based on component state or props: ```tsx theme={null} import { clsx } from 'clsx'; import { twMerge } from 'tailwind-merge'; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // Usage in a component