humanfryo/Website-Portfolio

Srihari Narayan Rajashekar - Portfolio Website

🚀 Overview A modern, accessible, and AI-themed portfolio website showcasing my work as an AI Product Developer and UX Designer. Built with a focus on performance, accessibility, and stunning visual design.

🎨 Features

• —Modern Design: Glassmorphism, gradients, and smooth animations
• —Fully Accessible: WCAG 2.2 compliant with screen reader support
• —Dark Mode: Automatic and manual dark mode switching
• —Responsive: Mobile-first design that looks great on all devices
• —Performance Optimized: Lazy loading, optimized assets, and smooth animations
• —SEO Ready: Proper meta tags and structured data
• —Interactive Elements: Hover effects, scroll animations, and micro-interactions
• —Modular Architecture: Clean, organized codebase with comprehensive documentation

📁 Project Structure

portfolio/
├── index.html                              # Main portfolio page
├── case-studies.html                       # Case studies index page
├── case-studies/
│   ├── collective-roots-apg.html          # Complete case study
│   ├── vanishing-seattle.html             # Future case study
│   ├── mooody-ai.html                     # Future case study
│   └── ai-job-market.html                 # Future case study
├── templates/
│   └── case-study-template.html          # Reusable template
├── styles/
│   ├── case-study-core.css               # Core styles
│   └── case-study-enhanced.css           # Enhanced features
├── scripts/
│   ├── case-study-core.js                # Core functionality
│   ├── case-study-enhanced.js            # Advanced features
│   └── case-study-config.js              # Configuration system
├── docs/
│   ├── CASE-STUDY-IMPLEMENTATION.md      # Implementation guide
│   ├── CASE-STUDY-STYLE-GUIDE.md         # Design system
│   └── CASE-STUDY-COMPLETE-SUMMARY.md    # Complete documentation
└── assets/
    └── case-studies/
        ├── collective-roots/              # Project assets
        └── [other projects]/             # Future project assets

🛠️ Technologies Used

• —Frontend: HTML5, CSS3, JavaScript (ES6+)
• —Styling: CSS Grid, Flexbox, Custom CSS animations
• —Icons: Font Awesome 6
• —Fonts: Inter, Space Grotesk (Google Fonts)
• —Tools: Figma for design, VS Code for development

🚀 Getting Started

1. 1.Clone the repository
2. 2.Navigate to the portfolio/ directory
3. 3.Open index.html in your browser
4. 4.Explore the case studies section

Development The portfolio uses a modular architecture:

• —Templates: Use templates/case-study-template.html for new case studies
• —Configuration: Modify scripts/case-study-config.js for settings
• —Styling: Follow the design system in docs/CASE-STUDY-STYLE-GUIDE.md
• —Implementation: See docs/CASE-STUDY-IMPLEMENTATION.md for detailed instructions

📖 Documentation Comprehensive documentation is available in the docs/ directory:

• —Implementation Guide: Step-by-step instructions for adding content
• —Style Guide: Complete design system and component library
• —Complete Summary: Full system overview and architecture

🎯 Case Studies

• —Collective Roots APG (Live): AI-powered community platform
• —Vanishing Seattle (Coming Soon): Urban development tracking
• —Mooody AI (Coming Soon): Emotion recognition platform
• —AI Job Market Analysis (Coming Soon): Employment trends dashboard

Version 2.0 - Modular Architecture