Portfolio Site: brinsleymorrison.com
This repository contains the source code for my portfolio website.
This site is forked from the Vonge Hugo Bookshop Template by CloudCannon. It has been significantly modified including the addition of:
- Full Multilingual Support & language switcher menu for English, Japanese and Chinese (Simplified) using i18n configs.
- Hugo Bookshop Component System for modular, reusable content blocks
- 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
- 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
- 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
- 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
- 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
- Hugo (v0.158.0 or later, extended edition)
- Git for version control
-
Clone the repository:
git clone https://github.com/Brinsleym/website.git cd website -
Start the development server:
make dev
(Or run
hugo server -D).hugo serveruses the development environment, which appliesconfig/development/on top ofconfig/_default/to serve assets locally with hot reloading. -
Other Makefile commands:
make deploy: (hugo --environment production)
make clean: (rm -rf public/)
make build: (clean deploy)
The site uses Hugo's built-in build process:
- Hugo Build: Generates static site files
- Asset Processing: Optimizes CSS and JavaScript assets
- Static Generation: Creates production-ready site files
- Hugo - Static site generator (v0.158.0+)
- Hugo Bookshop - Component-based content management
- Ionicons v7 - Modern icon library
- Lightense Images - Responsive image lightbox
- Tiny Slider - Lightweight carousel/slider
- iTyped - Typewriter effect animations
- reframe.js - Responsive video embeds
- Smooth Scroll Polyfill - Cross-browser smooth scrolling
- SoundCloud Widget API - Custom audio player implementation
- Advanced Error Handling - Privacy extension detection and iOS compatibility
- JSDelivr CDN - Global asset delivery
- WebP Image Format - Modern image optimization
- Lazy Loading - Progressive image loading
- CSS/SCSS Modules - Component-based styling
- Cloudflare - DNS, proxy, and workers
- Archive.org - Backup snapshots
- Automated Builds - CI/CD integration
- Enhance accessibility features with keyboard navigation improvements
Please refer to the original template's licensing terms for usage guidelines.