Skip to content

design_guidelines.md

Latest commit

 

History

History
71 lines (57 loc) · 2.71 KB

design_guidelines.md

File metadata and controls

71 lines (57 loc) · 2.71 KB

Portfolio Website Design Guidelines

Design Approach

Reference-Based Approach: Inspired by Stuart Sul's clean, professional portfolio design with focus on readability and structured content presentation.

Core Design Elements

Color Palette

  • Primary: 220 15% 15% (dark charcoal for headers)
  • Secondary: 220 10% 45% (medium gray for body text)
  • Background: 0 0% 98% (off-white)
  • Accent: 220 100% 50% (blue for links and highlights)
  • Borders: 220 10% 90% (light gray for subtle divisions)

Typography

  • Primary Font: Inter (via Google Fonts)
  • Headers: 600-700 weight, varying sizes (text-2xl to text-4xl)
  • Body: 400 weight, text-base to text-lg
  • Labels: 500 weight, text-sm for section tags

Layout System

  • Spacing: Consistent use of Tailwind units 4, 6, 8, 12, 16
  • Container: max-w-4xl mx-auto for main content
  • Grid: 2-3 column layouts for project showcases
  • Sections: Clear vertical spacing with py-12 to py-16

Component Library

Navigation

  • Clean header with name/logo and simple navigation links
  • Sticky or fixed positioning for easy access

Profile Section

  • Left-aligned or centered profile photo (circular, professional)
  • Name as large heading
  • Brief bio paragraph
  • Contact information (email, LinkedIn, GitHub links)

Content Sections

  • Education: Institution, degree, dates in structured format
  • Experience: Company, role, duration with bullet points for achievements
  • Projects: Card-based layout with titles, descriptions, and clickable links
  • Tools/Software: Grid or list format showcasing technical skills

Interactive Elements

  • Subtle hover effects on project cards
  • Clean button styling for external links
  • Smooth scrolling between sections

Visual Hierarchy

  • Large, bold section headers
  • Consistent spacing between elements
  • Strategic use of white space for readability
  • Clear visual separation between different content types

Responsive Design

  • Mobile-first approach
  • Stack columns vertically on smaller screens
  • Maintain readability across all device sizes
  • Touch-friendly interactive elements

Images

Profile Photo: Professional headshot, circular crop, positioned in profile section Project Thumbnails: Optional small preview images for projects (if available) No large hero image: Focus on clean, text-based presentation matching the reference style

Key Principles

  • Minimalism: Clean, uncluttered design prioritizing content
  • Professionalism: Corporate-friendly aesthetic suitable for career purposes
  • Scannability: Easy to quickly review qualifications and projects
  • Functionality: Every element serves a clear purpose in showcasing professional credentials