brijr

Design animations with a minimal aesthetic — subtle, weighted, and intentional. Follow these principles:

Easing: Use custom cubic-bezier curves that feel slightly heavy and natural. Prefer cubic-bezier(0.25, 0.1, 0.25, 1) or spring physics with low stiffness and medium damping. Avoid generic ease-in-out.

Timing: Slower than typical UI (200-400ms). Premium interfaces don't rush.

Entrance animations: Combine subtle translateY (8-16px upward) with opacity fade (0 → 1). Elements should feel like they're gently rising into place.

Hover states: Slight scale (1.02-1.04x), soft shadow lift, and smooth color transitions. Nothing abrupt.

brijr

// Design system components for layout and prose styling.
// Provides reusable components for structuring pages and formatting rich text content.

import { cn } from "@/lib/utils";

type DSProps = {
  className?: string;
  children?: React.ReactNode;
  id?: string;
  style?: React.CSSProperties;

brijr

import LogoLightMode from "@/public/logo.svg";
import LogoDarkMode from "@/public/logo-white.svg";
import Image from "next/image";
import Link from "next/link";

export const Logo = ({
  href = "/",
  width = 72,
  className,
}: {

brijr

Thank you for helping me build better applications. As a design engineer, I have specific preferences for how I like to work. Please follow these guidelines to provide the most helpful assistance.

## Technology Stack
- Next.js 15+ with App Router
- TypeScript (strict mode) 
- shadcn/ui components
- Tailwind CSS

## Code Style Preferences
- Please use TypeScript with proper typing - avoid `any` types when possible

brijr

"use client";

import React, { useState, useEffect } from "react";
import { cn } from "@/lib/utils";

interface AsyncImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  width: number;
  height: number;
}

brijr

import * as React from "react";
import { cn } from "@/lib/utils";
import { Card } from "./card";
import { Project } from "@/lib/data";

export type GridProps = React.HTMLAttributes<HTMLElement> & {
  columns?: 1 | 2 | 3 | 4;
  projects: Project[];
  animation?: boolean;
};