Karen Scarbrough - Professional Portfolio Website

A modern, responsive portfolio website showcasing professional experience at Microsoft and passion for trail running.

Features

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Modern UI/UX: Clean, professional design with smooth animations
• Interactive Elements: Hover effects, smooth scrolling, and dynamic content
• Professional Sections: About, Experience, Hobbies, and Contact information
• Social Media Integration: LinkedIn, GitHub, X (Twitter), and Strava profiles
• Performance Optimized: Fast loading with optimized assets

Setup Instructions

1. Image Setup

You need to add your images to the website directory:

1. Professional Photo (professional-photo.jpeg):

   • Save your professional headshot (the first image you provided) as professional-photo.jpg
   • Recommended size: 500x500px or larger, square aspect ratio
   • This will be displayed in the hero section

2. Running Photo (running-photo.jpg):

   • Save your trail running photo (the second image you provided) as running-photo.jpg
   • Recommended size: 800x600px or larger, landscape orientation
   • This will be displayed in the hobbies section

2. Customization

Contact Information

Update the contact links in index.html:

• Replace mailto:contact@karenscarbrough.com with your actual email
• Add your GitHub profile URL if desired
• Add your Strava profile URL for running connections

Professional Details

The website currently shows you work at Microsoft. You can update:

• Job title and specific role details in the Experience section
• Add more specific accomplishments and projects
• Update the LinkedIn URL (currently set to your provided LinkedIn profile)

Running Achievements

Update the running statistics and accomplishments in the hobbies section to reflect your actual achievements.

3. Deployment Options

Option 1: GitHub Pages (Free)

1. Create a new repository on GitHub
2. Upload all files to the repository
3. Enable GitHub Pages in repository settings
4. Your site will be available at https://yourusername.github.io/repository-name

Option 2: Netlify (Free)

1. Create an account at netlify.com
2. Drag and drop your website folder to Netlify
3. Get a free subdomain or connect your custom domain

Option 3: Custom Domain

1. Purchase a domain (e.g., karenscarbrough.com)
2. Use any hosting provider (Netlify, Vercel, GitHub Pages)
3. Connect your custom domain in the hosting platform settings

4. File Structure

karens-portfolio-website/
├── index.html          # Main HTML file
├── styles.css          # CSS styling
├── script.js           # JavaScript functionality
├── professional-photo.jpg  # Your professional headshot
├── running-photo.jpg       # Your trail running photo
└── README.md           # This file

5. Browser Compatibility

The website is compatible with:

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

6. Performance Features

• Optimized images and assets
• Smooth scrolling and animations
• Mobile-first responsive design
• Fast loading times
• SEO-friendly structure

7. Customization Tips

Colors

The website uses a professional color scheme:

• Primary: #0078d4 (Microsoft Blue)
• Accent: #e74c3c (Running Red)
• Text: #2c3e50 (Dark Blue-Gray)

You can modify these in the CSS file if you prefer different colors.

Fonts

The website uses the Inter font family from Google Fonts for a modern, professional look.

Sections

You can easily add or modify sections by:

1. Adding new HTML sections in index.html
2. Styling them in styles.css
3. Adding any interactive features in script.js

8. Next Steps

1. Add your images as described above
2. Customize the content to match your specific experience
3. Test the website locally by opening index.html in a browser
4. Deploy using one of the hosting options above
5. Share your new professional website!

Technical Details

• Built with vanilla HTML5, CSS3, and JavaScript
• Uses CSS Grid and Flexbox for responsive layouts
• Includes CSS animations and transitions
• Mobile-responsive design with hamburger menu
• Semantic HTML for better SEO
• Clean, maintainable code structure

Support

If you need help customizing or deploying the website, the code is well-commented and follows web development best practices.

---

Website Features: ✅ Professional design
✅ Mobile responsive
✅ Fast loading
✅ SEO optimized
✅ Easy to customize
✅ Modern animations
✅ Contact integration
✅ Social media links