Stephen Smith - Web Developer Portfolio

A modern, responsive portfolio website showcasing web development skills and services.

🚀 Features

• Responsive Design - Optimized for all devices and screen sizes
• Modern UI/UX - Clean, professional design with smooth animations
• Interactive Portfolio - Filterable project showcase
• Skills Section - Comprehensive display of technical abilities
• Services Overview - Clear presentation of offered services
• Client Testimonials - Social proof with rotating testimonials
• Contact Form - Functional contact form with validation
• Smooth Scrolling - Enhanced navigation experience
• SEO Optimized - Structured for search engine visibility

🛠️ Technologies Used

Frontend

• HTML5 - Semantic markup
• CSS3 - Modern styling with Grid, Flexbox, and animations
• JavaScript (ES6+) - Interactive functionality
• Font Awesome - Icons
• Google Fonts (Inter) - Typography

Key Features Implemented

• Mobile-first responsive design
• CSS Grid and Flexbox layouts
• Smooth scroll animations
• Portfolio filtering system
• Testimonial slider
• Contact form validation
• Intersection Observer API for scroll animations
• CSS custom properties for theming

📁 Project Structure

zoneM/
├── index.html          # Main HTML file
├── styles.css          # CSS stylesheet
├── script.js           # JavaScript functionality
├── README.md           # Project documentation
├── favicon.ico         # Website favicon
├── logo.svg           # Logo file
├── hero-bg.jpg        # Hero section background
├── about-photo.jpg    # About section photo
├── services/          # Service images
│   ├── service-1.jpg  # Web Development
│   ├── service-2.jpg  # Frontend Development
│   └── service-3.jpg  # Backend Development
└── testimonials/      # Testimonial images (optional)
    └── README.md      # Guidelines for testimonial images

🎯 Sections

1. Hero Section - Introduction with call-to-action buttons
2. About - Personal introduction and statistics
3. Skills - Technical skills organized by category
4. Services - Web development services offered
5. Portfolio - Showcase of projects with filtering
6. Testimonials - Client feedback with rotating slider
7. Contact - Contact form and information
8. Footer - Links and additional information

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/billyndroid/zoneM.git

2. Open index.html in your web browser

3. Customize the content:

   • Update personal information in index.html
   • Modify colors in CSS custom properties in styles.css
   • Replace placeholder images with your own
   • Update portfolio projects and testimonials

📱 Responsive Breakpoints

• Desktop: 1200px and up
• Tablet: 768px - 1199px
• Mobile: Below 768px
• Small Mobile: Below 480px

🎨 Customization

Colors

The color scheme uses CSS custom properties defined in :root:

• Primary: #667eea (Purple-blue)
• Secondary: #764ba2 (Purple)
• Accent: #f093fb (Pink)
• Text: #2d3748 (Dark gray)
• Light text: #718096 (Medium gray)

Fonts

• Primary font: Inter (Google Fonts)
• Fallback: System fonts (San Francisco, Segoe UI, Roboto)

Images

• Hero background: 1920x1080px recommended
• About photo: 400x400px square format
• Service images: 400x300px recommended
• Logo: SVG format for scalability

📧 Contact Configuration

To make the contact form functional, you'll need to:

1. Set up a backend service (Node.js, PHP, etc.)
2. Configure email sending (SMTP, SendGrid, etc.)
3. Update the form action in script.js

🔗 Live Demo

Open index.html in your browser to see the portfolio in action.

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📞 Contact

Stephen Smith - Pluralsight Profile

Project Link: https://github.com/billyndroid/zoneM