# Portfolio Site: [brinsleymorrison.com](https://brinsleymorrison.com)


This repository contains the source code for my portfolio website.
<p align="center">
  <a href="https://brinsleymorrison.com" target="_blank">
    <img 
      src="https://github.com/user-attachments/assets/87353ec0-6aaf-4726-b929-b3256d5122c3"
      alt="website preview"
      style="display:inline-block; width:57%;"
    >
  </a>
</p>
<br>
<p align="center">
 
 <a href="https://github.com/brinsleym/website/blob/master/LICENSE">
  <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg?style=flat-square" alt="MIT License">
 </a>&nbsp;&nbsp;&nbsp;
  <a href="https://gohugo.io">
  <img src="https://img.shields.io/badge/hugo-v0.158.0%2B-blue?logo=hugo&style=flat-square" alt="Hugo v0.158.0+">
  </a>&nbsp;&nbsp;&nbsp;
 <a href="https://www.jsdelivr.com/package/gh/Brinsleym/website">
  <img src="https://data.jsdelivr.com/v1/package/gh/Brinsleym/website/badge" alt="JSDelivr">
 </a>
 
</p>

## About

This site is forked from the [Vonge Hugo Bookshop Template](https://github.com/CloudCannon/vonge-hugo-bookshop-template) by CloudCannon. It has been significantly modified including the addition of:

### Core Features

- **Full Multilingual Support** & language switcher menu for English, Japanese and Chinese (Simplified) using i18n configs.
- **Hugo Bookshop Component System** for modular, reusable content blocks

### Audio Features

- **Custom SoundCloud Player** with playlist functionality using SoundCloud API
  - Advanced error handling and detection of privacy-blocking extensions
  - iOS Safari audio playback policy compliance with automatic initialization
  - Custom background image support for enhanced visual presentation
  - Touch and mouse drag support for progress and volume controls
  - Visual feedback for volume controls and loading states
  - Accessibility features with proper ARIA labels
  - Privacy extension detection with user-friendly error messaging

### Content Management & Structure

- **Portfolio Sections**: Projects, compositions, and testimonials with rich media support
- **Contact Section**: Replaced the original contact form section with a simpler 'copy email address' container  
- **CV/Resume Embedding** via browser iframe
- **Copy-to-Clipboard Email Functionality** with clipboard API detection and fallback support
- **Bookshop Components**: Blog cards, hero sections, testimonial cards, project cards, and more

### Performance & User Experience

- **Asset Provisioning** through JSDelivr's CDN for optimized global delivery
- **JavaScript Lazy Image Loading** with Lightense image viewer integration
- **Image Optimization** with WebP format and responsive sizing
- **Responsive Video Embeds** using reframe.js
- **Smooth Scrolling** with polyfill for cross-browser compatibility
- **Typewriter Effects** using iTyped library for dynamic text displays

### Server-side Features

- **Cloudflare DNS & Proxy** with worker support to automatically detect user language and serve the relevant page
- **Snapshot Caching** at `archive.org`, to show a recent snapshot of the page in the event of a server failure

### Technical Improvements

- **Ionicons v7** with modern icon support
- **Advanced CSS/SCSS Structure** with component-based styling
- **Tiny Slider Integration** for responsive carousels and galleries
- **Mobile-Optimized Design** with extensive CSS improvements for mobile devices
- **Hugo Build System** with optimized static site generation

## Development

### Prerequisites

- [Hugo](https://gohugo.io/installation/) (v0.158.0 or later, extended edition)
- Git for version control

### Local Development Setup

1. **Clone the repository**:
   ```bash
   git clone https://github.com/Brinsleym/website.git
   cd website
   ```

2. **Start the development server**:
   ```bash
   make dev
   ```
   (Or run ```hugo server -D```). `hugo server` uses the development environment, which applies `config/development/` on top of `config/_default/` to serve assets locally with hot reloading.

3. **Other Makefile commands**:

   ```make deploy```: *(hugo --environment production)*  
   ```make clean```: *(rm -rf public/)*  
   ```make build```: *(clean deploy)*  

### Build Process

The site uses Hugo's built-in build process:

1. **Hugo Build**: Generates static site files
2. **Asset Processing**: Optimizes CSS and JavaScript assets
3. **Static Generation**: Creates production-ready site files


## Technical Stack

### Core Technologies
- **[Hugo](https://gohugo.io)** - Static site generator (v0.158.0+)
- **[Hugo Bookshop](https://github.com/CloudCannon/bookshop)** - Component-based content management

### Frontend Libraries
- **[Ionicons v7](https://ionic.io/ionicons)** - Modern icon library
- **[Lightense Images](https://github.com/sparanoid/lightense-images)** - Responsive image lightbox
- **[Tiny Slider](https://github.com/ganlanyuan/tiny-slider)** - Lightweight carousel/slider
- **[iTyped](https://github.com/luisvinicius167/ityped)** - Typewriter effect animations
- **[reframe.js](https://github.com/yowainwright/reframe.js)** - Responsive video embeds
- **Smooth Scroll Polyfill** - Cross-browser smooth scrolling

### Audio Integration
- **SoundCloud Widget API** - Custom audio player implementation
- **Advanced Error Handling** - Privacy extension detection and iOS compatibility

### Performance & Optimization
- **[JSDelivr CDN](https://www.jsdelivr.com/)** - Global asset delivery
- **WebP Image Format** - Modern image optimization
- **Lazy Loading** - Progressive image loading
- **CSS/SCSS Modules** - Component-based styling

### Deployment & Infrastructure
- **[Cloudflare](https://cloudflare.com)** - DNS, proxy, and workers
- **[Archive.org](https://archive.org)** - Backup snapshots
- **Automated Builds** - CI/CD integration

## Site Metrics

  <a href="https://brinsleymorrison.com">
    <img src="https://cdn.jsdelivr.net/gh/Brinsleym/brinsleym@master/metrics.plugin.pagespeed.screenshot.svg" alt="Site Metrics" style="display:inline-block; width:50%;">
  </a>
 
## Future to-do

- Enhance accessibility features with keyboard navigation improvements

---

## License

Please refer to the original template's licensing terms for usage guidelines.