https://github.com/gah-code/haro-photo-website
Photography project using design tokens and SCSS for modular design, Vite for quick builds and image optimization, and Cloudinary for asset delivery. Netlify handles SEO, marketing forms, and A/B testing for an optimal user experience.
https://github.com/gah-code/haro-photo-website
design-system image-processing scss vite
Last synced: about 1 month ago
JSON representation
Photography project using design tokens and SCSS for modular design, Vite for quick builds and image optimization, and Cloudinary for asset delivery. Netlify handles SEO, marketing forms, and A/B testing for an optimal user experience.
- Host: GitHub
- URL: https://github.com/gah-code/haro-photo-website
- Owner: gah-code
- Created: 2024-11-15T10:47:12.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-12-17T23:54:35.000Z (5 months ago)
- Last Synced: 2025-02-07T05:14:29.716Z (3 months ago)
- Topics: design-system, image-processing, scss, vite
- Language: SCSS
- Homepage: https://haro-family-photography.com
- Size: 5.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Family Photography Website Campaign - 2025**
Welcome to my photography repository! I'm excited to incorporate new techniques as I build this website. The goal is simple: to showcase my family photography work and the experience I gained since 2018 when I began working for my first agency. Over the past year, I've been booking clients month-to-month, which has been quite a headache lol. This website will inform interested clients about my prices, open dates, and my personal photographic style from an editor's perspective.
[](https://app.netlify.com/sites/haro-photo/deploys)
---
## **Showcase**
In addition to simple descriptions of my services, I'm thrilled to showcase a few standout images from previous sessions.
---
## **Target Campaign Date**
The upcoming campaign will run from **December 2024 through around March 2025**. I’ve carefully chosen six preferred locations for family photography, ensuring consistent colors and tones throughout all galleries:
- **Gilroy**: Scenic parks and rustic settings.
- **San Jose**: Urban and natural blends.
- **Morgan Hill**: Serene countryside.
- **Hollister**: Timeless rural backdrops.
- **San Juan Bautista**: Historic and cultural beauty.
- **Palo Alto**: Sophisticated cityscapes and lush parks.
---
## **A/B Test: Time-Based Personalization**
### **Purpose**
To enhance user engagement, the "About" section dynamically updates content based on the visitor's local **time of day**.
| **Time Range** | **Personalized Content** |
|-----------------------|---------------------------------------------------------------|
| **Morning** (5-11 AM) | Title: "Good Morning! Start Your Day with a Smile"
CTA: "Book a Morning Session" |
| **Afternoon** (12-5 PM) | Title: "Good Afternoon! Make Memories Last Forever"
CTA: "Book an Afternoon Session" |
| **Evening** (6-11 PM) | Title: "Good Evening! Preserve the Golden Hour"
CTA: "Book an Evening Session" |
### **How It Works**
- **JavaScript** dynamically detects the user's current hour and updates:
- Title text
- Description content
- Call-to-action button text
- Section image (e.g., morning, afternoon, or evening themes)
- Content is tailored to the time of day for maximum contextual relevance.
### **Key Features**
- **Dynamic Updates**: No page reload required, smooth and seamless transitions.
- **Engagement Focus**: Personalized messaging improves click-through rates (CTR).
---
## **Deployment and Marketing**
- **Netlify** is ideal for:
- Managing marketing campaigns.
- Handling forms for customer inquiries.
- Optimizing SEO with built-in tools.
- Conducting A/B tests to refine user engagement.
- Integration with **Google My Business (GMB)**:
- Added an optimized business description.
- Encouraged reviews to boost local search visibility.
---
## **Developer Notes**
### **Design System**
- Implementing a **seven-in-one folder pattern** to organize SCSS for a cohesive design system.
- Utilizing SCSS features such as **mixins** for reusable, modular styling.
- Leveraging smooth scrolling techniques for better navigation and a seamless user experience.
### **Optimization**
- **Vite** is used for build optimization and image processing, ensuring consistent load speeds for a content-heavy site.
- **Cloudinary** for efficient image delivery with:
- Lazy loading for improved performance.
- Modern formats like WebP.
- Automatic resizing and compression to adapt to device screen sizes.
### **SEO Enhancements**
- Added structured data (Schema.org) for local SEO, focusing on `LocalBusiness` and `Photographer` types.
- Improved meta tags for optimized rankings:
- **Descriptive titles** (e.g., "Haro Family Photography | Serving Gilroy & Beyond").
- **Focused keywords** like “family photographer” and “Gilroy photography.”
- Created a **Locations page** with unique descriptions for each area served.
### **Accessibility**
- Improved navigation with `aria-label` attributes and meaningful alt text for all images, ensuring inclusivity for all users.
- Smooth scrolling implemented via `scroll-behavior: smooth` in CSS for a polished feel.
---
## **Asset Delivery**
- **Cloudinary** ensures:
- Fast loading of high-quality images.
- Automated transformations for consistent performance.
---
### **Pre-release Versions**
MORE COMING SOON - THANK YOU! 🚀
---