Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 12 days ago
JSON representation

Host: GitHub
URL: https://github.com/gah-code/haro-photo-website
Owner: gah-code
Created: 2024-11-15T10:47:12.000Z (about 1 month ago)
Default Branch: master
Last Pushed: 2024-11-26T09:33:44.000Z (30 days ago)
Last Synced: 2024-11-26T10:58:00.251Z (30 days ago)
Topics: design-system, image-processing, scss, vite
Language: SCSS
Homepage: https://haro-family-photography.com
Size: 5.46 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Family Photography 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 head ache lol. This website will inform interested clients about my prices, open dates and my personal photographic style from an editor's perspective.

## 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.

---

## 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.

### **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.

### Optimization

- **Vite** is used for build optimization and image processing, ensuring consistent load speeds for a content-heavy site.

### Deployment and Marketing

- **Netlify** is ideal for:
- Managing marketing campaigns.
- Handling forms.
- Optimizing SEO.
- Conducting A/B tests to refine user engagement.

### Asset Delivery

- **Cloudinary** will be used for efficient image and asset delivery to maintain high performance and visual quality.

### Design

- Figma

---

### Pre release versions

- 12/9/24

MORE COMING SOON THANK YOU!

Here’s an updated README file incorporating the recent updates:

---

# **Family Photography 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.

---

## **Showcase**

In addition to simple descriptions of my services, I'm thrilled to showcase a few standout images from previous sessions.

---

## **Target Campaign Date**

- **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.

---

### **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**

### **Accessibility**

---

### **Asset Delivery**

- **Cloudinary** ensures:
- Fast loading of high-quality images.
- Automated transformations for consistent performance.

---