A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS. Showcases projects, skills, and blog content with a focus on accessibility and performance.

• Modern Tech Stack: React 18, TypeScript, Vite, Tailwind CSS
• Responsive Design: Mobile-first approach with beautiful animations
• Accessibility: WCAG compliant with keyboard navigation and screen reader support
• Performance: Optimized for speed with lazy loading and efficient bundling
• SEO Ready: Meta tags, Open Graph, sitemap, and structured data
• Content Management: JSON-based content for easy updates

• Frontend: React, TypeScript, Tailwind CSS, Framer Motion
• Routing: React Router DOM
• Build Tool: Vite
• Deployment: GitHub Pages with GitHub Actions
• Styling: Tailwind CSS with custom design system

src/
├── components/          # Reusable UI components
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   └── ProjectCard.tsx
├── pages/              # Page components
│   ├── Home.tsx
│   ├── Projects.tsx
│   ├── ProjectDetails.tsx
│   ├── Blog.tsx
│   ├── About.tsx
│   └── Contact.tsx
├── content/            # JSON content files
│   ├── projects.json
│   └── blog.json
├── App.tsx
├── main.tsx
└── index.css

• Node.js 18 or higher
• npm or yarn

1. Clone the repository:

git clone https://github.com/drewrogers10/DrewsWebsite.git
cd DrewsWebsite

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:5173 in your browser.

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint

The color scheme is defined in tailwind.config.ts:

colors: {
  primary: "#1a2a6c",    // Deep blue
  secondary: "#b21f1f",  // Deep red
  accent: "#fdbb2d",     // Golden yellow
}

• Projects: Edit src/content/projects.json
• Blog Posts: Edit src/content/blog.json
• Personal Info: Update the About page and contact details

Place images in the public/images/ directory and reference them in your JSON content files.

The site automatically deploys to GitHub Pages when you push to the main branch. The deployment is handled by GitHub Actions.

1. Build the project:

npm run build

2. The dist/ folder contains the production build ready for deployment.

• Semantic HTML structure
• Meta tags and Open Graph data
• Sitemap and robots.txt
• Lazy loading for images
• Optimized bundle size
• Lighthouse score: 90+ across all categories

• Keyboard navigation support
• Screen reader compatibility
• High contrast ratios
• Focus indicators
• Alt text for images
• Semantic HTML elements

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

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

• Email: drew@example.com
• LinkedIn: linkedin.com/in/drewrogers10
• GitHub: github.com/drewrogers10

Built with ❤️ by Drew