Growth Journey Portfolio

Interactive career transformation story from Admin/Procurement to Tech Professional

Live Demo • Features • Quick Start • Tech Stack

---

Overview

A performance-first, accessibility-focused portfolio showcasing career growth through strategic storytelling and technical execution. Built with React 18, TypeScript, and modern web technologies to achieve 90+ Lighthouse scores while maintaining WCAG AA compliance.

Current Phase: Phase 2 - Architecture & Design (refinement)

Key Highlights

• Interactive career timeline with milestone tracking
• Performance-optimized animations with device adaptation
• Learning journey across Coursera, LMS, TryHackMe, LeetCode, and roadmap.sh
• Contact system with validation and anti-spam protection

Features

Portfolio Sections

Hero & Timeline

• Animated introduction with career archetype ("The Technical Storyteller")
• Interactive timeline showing progression from admin/procurement to tech
• Milestone markers highlighting key achievements and transitions

Skills & Projects

• Category-based skill visualization (Development, Networking, Data, AI/ML)
• Project showcase with live demos and source code links
• Technology stack badges and gradient-based visual hierarchy

GitHub Integration

• Live contribution graph with activity tracking
• Repository showcase with stars, forks, and primary language
• Automatic updates from GitHub API

Learning Journey

• Platform-specific progress (TryHackMe ranks, LeetCode stats, roadmap.sh paths)
• Expandable learning cards with detailed achievements
• Categorized by work experience, education, and technical skills

Contact & Blog

• Professional contact form with validation
• Blog section for ongoing learning insights
• Resume download capability

Technical Features

• Performance: Code splitting, lazy loading, image optimization
• Accessibility: WCAG AA compliant, keyboard navigation, screen reader support, reduced motion
• UX: Microsoft Viva-inspired animations that adapt to device performance
• SEO: Semantic HTML, meta tags, structured data
• Testing: Unit tests (Vitest), E2E tests (Playwright), accessibility tests (axe-core)
• CI/CD: Automated testing, Lighthouse CI, linting, and deployment

Quick Start

Prerequisites

• Node.js 18+ (Download)
• npm 9+ (included with Node.js)

Installation

# Clone the repository
git clone https://github.com/joembolinas/myPortfolio.git
cd myPortfolio

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:5173 to see the portfolio in action.

Optional: GitHub Integration

To enable real-time GitHub data, create a .env.local file:

VITE_GITHUB_TOKEN=your_personal_access_token

Note: Generate a token at GitHub Settings → Tokens with public_repo scope. The site functions without this token but GitHub API requests will be rate-limited (60/hour).

Development

Available Commands

# Development
npm run dev              # Start dev server with hot reload
npm run build            # Build for production
npm run preview          # Preview production build

# Testing
npm run test             # Run unit tests
npm run test:watch       # Run tests in watch mode
npm run test:coverage    # Generate coverage report
npm run test:e2e         # Run end-to-end tests
npm run test:a11y        # Run accessibility tests

# Code Quality
npm run lint             # Check for linting issues
npm run lint:fix         # Auto-fix linting issues
npm run format           # Format code with Prettier
npm run type-check       # TypeScript type checking

# Performance
npm run analyze          # Analyze bundle size
npm run lighthouse       # Run Lighthouse CI

Project Structure

myPortfolio/
├── src/
│   ├── components/          # React components
│   │   ├── animations/      # Framer Motion effects
│   │   ├── github/          # GitHub integration components
│   │   ├── layout/          # Navigation, Footer
│   │   ├── sections/        # Main page sections
│   │   ├── ui/              # Reusable UI components
│   │   └── lazy/            # Lazy-loaded sections
│   ├── hooks/               # Custom React hooks
│   ├── services/            # API services (GitHub, contact)
│   ├── data/                # Static data (projects, skills)
│   ├── utils/               # Helper functions
│   ├── types/               # TypeScript type definitions
│   └── __tests__/           # Test files
├── public/                  # Static assets
├── config/                  # Configuration files
├── docs/                    # Documentation
└── logging-system/          # Development logging utilities

Tech Stack

Core Technologies

Technology	Version	Purpose
React	18+	UI Framework
TypeScript	5.0+	Type Safety
Vite	5.0+	Build Tool
Tailwind CSS	3.0+	Styling
Framer Motion	Latest	Animations

Development Tools

Tool	Purpose
ESLint	Code Quality
Prettier	Code Formatting
Vitest	Unit Testing
Playwright	E2E Testing
Lighthouse CI	Performance Monitoring
axe-core	Accessibility Testing

Key Dependencies

• UI Components: @headlessui/react, lucide-react
• Utilities: clsx, date-fns, gray-matter
• Routing: react-router-dom
• Error Handling: react-error-boundary

Performance & Accessibility

Performance Targets

• Lighthouse Performance: 90+
• First Contentful Paint: < 1.8s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1

Accessibility Standards

• WCAG AA Compliant
• Keyboard navigation support
• Screen reader optimized
• Reduced motion support
• High contrast mode compatible
• Focus management utilities

Optimization Strategies

• Code splitting with React.lazy
• Image optimization and lazy loading
• Device-adaptive animations
• Memory usage monitoring
• Bundle size analysis

Contributing

Contributions are welcome! Please read the Contributing Guidelines for details on:

• Code standards and conventions
• Testing requirements
• Pull request process
• Development workflow

Roadmap

Current Phase: Phase 2 - Architecture & Design

• Phase 1: Foundation & Setup
• Phase 2.1: Component Architecture
• Phase 2.2: Animation System
• Phase 2.3: Accessibility Implementation
• Phase 2.4: Contact System & Testing
• Phase 3: Content & Polish
• Phase 4: Deployment & Monitoring

See CHANGELOG.md for detailed version history.

Acknowledgments

Built with excellent open-source tools:

• React Team for the UI framework
• Vite Team for the blazing-fast build tool
• Tailwind CSS for utility-first styling
• Framer Motion for smooth animations

---

Built with modern web technologies and a focus on performance, accessibility, and user experience.

View Live Demo • Star on GitHub