About This Layout

TaskForge — Top + Sidebar Hybrid

A production-grade project management interface with rose accents, animated progress bars, task card wobble effects, sprint burndown charts, and collapsible sidebar sections. Built with DM Sans, recharts, and motion for a Linear-meets-Notion experience.

Tech Stack

FrameworkNext.js (App Router)
StylingTailwind CSS + CSS variables (--tf-*)
Componentsshadcn/ui (dropdown, button)
Animationmotion ^12.35.2
Chartsrecharts ^3.8.0
Iconslucide-react
FontDM Sans (var(--font-dm-sans))

Theme & Styling

  • Rose accent color (#f43f5e) with warm pink tints throughout
  • Light near-white background (#fafafa) with subtle rose dot pattern
  • CSS custom properties scoped via --tf-* tokens (bg, text, border, rose, etc.)
  • Pink-tinted sidebar gradient (fefcfc to fdf8f8)
  • Warm ambient glow in top-right corner
  • Colorful priority badges: critical (red), high (rose), medium (amber), low (emerald)

Typography

  • Primary font: DM Sans (--font-dm-sans)
  • Monospace for task IDs: system mono
  • Size hierarchy: 2xl headings, sm body, xs labels, [11px] badges
  • Uppercase tracking-widest section labels (10px, 0.12em tracking)
  • Tabular-nums for all numeric values and dates

Motion Animations

  • Library: motion (^12.35.2) — successor to framer-motion
  • Signature: Progress bar fill from 0% to target with spring physics (stiffness: 40-50)
  • Signature: Task card drag-ready wobble on hover (rotateZ keyframes)
  • Staggered card/item entrance with incremental delays
  • Sprint progress bar animated fill in sidebar
  • Collapsible sections (Favorites, Recent) with AnimatePresence spring transitions
  • Active route indicator bar with layoutId spring transition
  • Search input expand/collapse with width spring animation
  • Logo hover scale with spring (stiffness: 400, damping: 17)
  • Team workload bars animate from 0% to target width
  • Gantt timeline bars animate width from 0 with spring physics
  • Toggle switches with spring-animated knob position

Charts (Recharts)

  • Library: recharts (^3.8.0)
  • Bar chart: Tasks completed per week (gradient fill taskforge-bar-grad)
  • Area chart: Sprint burndown (remaining vs ideal, dashed ideal line)
  • Custom tooltip component matching TaskForge theme
  • All gradient IDs prefixed with taskforge-* to avoid SVG conflicts
  • Responsive containers adapting to card width

Layout Architecture

  • Hybrid pattern: fixed top bar (h-13) + fixed sidebar (w-60) + scrollable content
  • Top bar: logo, project selector dropdown, search, AI assist, notifications, settings, user menu
  • Sidebar: sprint indicator, primary nav, quick filters, favorites (collapsible), recent (collapsible), bottom nav
  • Active route highlighting via usePathname() with spring-animated indicator bar
  • Sidebar pink-tinted gradient background for warmth

Interactive Elements

  • Task table: sortable columns (click header to sort asc/desc), row selection checkboxes, hover reveal actions
  • Task cards: drag-ready wobble animation on hover (rotateZ keyframes)
  • Collapsible task groups by status with AnimatePresence
  • Project selector dropdown with status dots and progress percentages
  • Sprint progress bar with animated fill
  • Toggle switches with spring-animated knobs on settings page
  • Integration connect/disconnect buttons with state management
  • Notification preference toggles with instant visual feedback

Domain: Project Management

  • Dashboard: stat cards, burndown chart, task table, activity feed, team workload
  • Projects: card grid with progress bars, status indicators, team avatars
  • Tasks: grouped by status (Todo, In Progress, In Review, Done) with collapsible sections
  • Timeline: Gantt-style horizontal bars with today marker and project color coding
  • Team: member cards with workload visualization, skills, availability status
  • Settings: workspace config, sprint duration, integrations (Slack/GitHub/Figma/Linear), notifications

Signature Animations

Progress Bar Fill

All progress bars animate from 0% to their target value using spring physics (stiffness: 40-50, damping: 15). Visible on dashboard stat cards, project cards, team workload bars, and the sidebar sprint indicator.

Task Card Wobble

Task rows in the dashboard table subtly wobble on hover using rotateZ keyframes (0, -0.3, 0.3, -0.15, 0 degrees over 0.4s), creating a drag-ready tactile feel that reinforces the project management context.

← Gallery