The Code Ranger - Crafting digital adventures with 5+ years of coding expertise

A fantasy-themed personal portfolio showcasing my skills, projects, and professional journey as a Software Engineer II. Built with React, Vite, and a touch of magic.

• Fantasy Adventure Theme: Software Ranger branding with mystical elements
• Professional Yet Memorable: Clean layout with subtle fantasy touches
• Fully Responsive: Optimized for all devices and screen sizes
• Accessibility First: WCAG compliant with proper focus states and ARIA labels

• React 18.3.1: Stable React with excellent testing compatibility
• Vite Build System: Lightning-fast development and builds
• CSS-in-JS Styling: Scoped styles with styled-jsx
• Testing Suite: Jest + React Testing Library
• ESLint + Prettier: Code quality and formatting
• Performance Optimized: Lazy loading, optimized images, minimal bundle size

• Hero Section: Above-the-fold key information with animated stats (20+ projects)
• Skills Matrix: Interactive skill categories with detailed descriptions
• Projects Showcase: Three featured projects with detailed descriptions
• Experience Timeline: Professional journey with "Guild Chronicles"
• Contact Information: Professional contact methods and availability
• Responsive Navigation: Smooth scrolling with mobile hamburger menu

• React 18.3.1 - Stable UI library with testing compatibility
• Vite - Build tool and dev server
• Lucide React - Beautiful icons
• CSS-in-JS - Scoped styling

• Jest - Testing framework
• React Testing Library - Component testing
• ESLint - Code linting
• Prettier - Code formatting

• Netlify - Hosting and CI/CD
• GitHub Pages - Alternative hosting

• Node.js 18+
• npm or yarn

1. Clone the repository

   git clone https://github.com/alishataylor/portfolio.git
   cd portfolio

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint errors
npm run format       # Format code with Prettier
npm run format:check # Check code formatting

# Testing
npm run test         # Run tests
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Run tests with coverage

alisha-portfolio/
├── public/                 # Static assets
├── src/
│   ├── components/         # React components
│   │   ├── Header.jsx     # Navigation component
│   │   ├── Hero.jsx       # Hero section
│   │   ├── Experience.jsx # Experience timeline
│   │   ├── Skills.jsx     # Skills matrix
│   │   ├── Projects.jsx   # Projects showcase
│   │   ├── Contact.jsx    # Contact information
│   │   ├── Footer.jsx     # Footer component
│   │   └── __tests__/     # Component tests
│   ├── assets/            # Images and static files
│   ├── styles/            # Global styles
│   ├── utils/             # Utility functions
│   ├── hooks/             # Custom React hooks
│   ├── App.jsx            # Main app component
│   ├── App.css            # Global CSS variables
│   └── main.jsx           # App entry point
├── .eslintrc.js           # ESLint configuration
├── .prettierrc            # Prettier configuration
├── package.json           # Dependencies and scripts
├── vite.config.js         # Vite configuration
└── README.md              # Project documentation

• Tech: React + Rails API + WebSocket
• Features: Real-time chat, secure access
• Status: Live (private demo available)

• Tech: React + Supabase + TypeScript
• Features: OSRS game clan tracker
• Status: Live at siege-clan.com

• Tech: React + JavaScript
• Features: Educational Islamic games
• Status: Live on Netlify

Note: Portfolio showcases 20+ projects total across various technologies

• React (90%), JavaScript (95%), HTML/CSS (90%)
• TypeScript (75%), Vite (85%)

• Ruby on Rails (95%), Ruby (90%), REST APIs (90%)
• GraphQL (70%), Node.js (75%)

• PostgreSQL (85%), MySQL (80%), Redis (75%)
• Supabase (70%), Database Design (85%)

• RSpec (90%), Jest (85%), Testing Library (80%)
• Capybara (75%), TDD/BDD (85%)

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build
3. Set publish directory: dist
4. Deploy!

1. Add to package.json:

   {
     "homepage": "https://alishataylor.github.io/portfolio",
     "scripts": {
       "predeploy": "npm run build",
       "deploy": "gh-pages -d dist"
     }
   }

2. Install gh-pages: npm install --save-dev gh-pages
3. Deploy: npm run deploy

• Mobile-First Design: Fixed hero text overflow and implemented 2x2 grid layout for stats on small screens
• Icon Alignment: Perfect vertical alignment of icons in action buttons using flexbox
• Project Count Update: Updated from "3" to "20+" projects to reflect actual portfolio
• Duplicate Content Removal: Removed redundant stats box from Skills section
• Section Reordering: Logical flow: Hero → Skills → Projects → Experience → Contact

• React 18.3.1: Downgraded for better testing library compatibility
• Babel Configuration: Added proper ES module support for Jest
• Test Coverage: All 48 tests passing with comprehensive component coverage
• Accessibility: Enhanced ARIA labels and semantic HTML structure

The portfolio includes comprehensive tests demonstrating best practices:

# Run all tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

• Component rendering tests
• User interaction tests
• Accessibility tests
• External link validation
• Form submission tests

Update CSS variables in src/App.css:

:root {
  --primary-gold: #d4af37;
  --secondary-gold: #f4d03f;
  --forest-green: #2d5016;
  /* ... more variables */
}

• Personal Info: Update src/components/Hero.jsx
• Experience: Modify src/components/Experience.jsx
• Skills: Edit src/components/Skills.jsx
• Projects: Update src/components/Projects.jsx
• Contact: Update src/components/Contact.jsx

• Lighthouse Score: 95+ across all metrics
• Bundle Size: < 200KB gzipped
• First Contentful Paint: < 1.5s
• Largest Contentful Paint: < 2.5s

1. Create component in src/components/
2. Add tests in src/components/__tests__/
3. Import and use in src/App.jsx

• Use CSS variables for consistency
• Follow BEM methodology for class names
• Ensure responsive design
• Maintain accessibility standards

While this is a personal portfolio, suggestions and improvements are welcome:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new features
5. Submit a pull request

This project is licensed under the MIT License - see the LICENSE file for details.

• Email: [email protected]
• LinkedIn: linkedin.com/in/alisha-t-098785180
• GitHub: github.com/atayl16

Ready for the next coding adventure! 🗡️✨

Built with React, Vite, and a touch of magic