To display a photo anywhere on your site, you must first upload it to your web server assets using the GitHub App.

With Option A: Automated Cloud Optimization, you do not need to resize or compress your photos beforehand! You can upload full-resolution photos directly from your phone’s high-definition camera, and Render will process them for you.

How to Upload from Your Phone:

1. Open the GitHub App on your phone.
2. Select your repository: tjbrady/bradyclan.
3. Tap on the Files list at the bottom or browse the repository files.
4. Navigate to the directory: public ➔ images.
5. In the top-right corner, tap the + (Add) icon.
6. Select “Upload file” or “Upload photo/video” from the menu.
7. Choose the photo(s) directly from your phone’s camera roll or gallery.
8. Tap Commit (or Save) and confirm sending the changes directly to the main branch with a simple commit message (e.g., “Upload Florence travel photo”).
9. Note the exact filename: Your uploaded image can now be referenced in any markdown page as ![Caption](/images/filename.jpg).

How the Automated Cloud Magic Works Behind the Scenes:

• The Problem: Mobile cameras capture beautiful but extremely heavy photos (often 5MB to 12MB each), which can slow down page loading speeds for visitors.
• The Cloud Solution: The moment you commit your upload, Render detects the change and triggers your site’s deployment.
• Build-Time Compression: Before compiling the final pages, Render automatically executes our customized optimise-images.js script in the cloud. This script leverages the powerful, server-grade sharp compression engine to automatically sweep your public/images/ directory, detect your new high-res upload, and downsize its dimensions to a responsive web-standard 1100px width with progressive JPEG compression.
• The Result: Your giant 12MB photo is instantly and invisibly shrunk to a light 400KB file in production, ensuring lightning-fast load times for your family and friends—completely automatically and 100% free of charge!

Tip: Keep your uploaded filenames unique, lowercase, and simple (e.g., my-florence-trip-01.jpg).

Stories live inside the folder src/content/stories/.

How to Add a New Story:

1. Open the GitHub App, select your repository, and navigate to src ➔ content ➔ stories.
2. Tap the + (Add) icon in the top-right corner and choose “Create new file”.
3. Name the file: Give it a simple, lowercase name ending in .md (e.g., my-new-story.md).
4. Paste & fill the YAML frontmatter header:

   ---
   title: "My New Story"
   date: 2026-09-29
   type: "stories"
   author: "TJB"
   ---

5. Write your story narrative directly below the triple-dashed header.
6. If this is a chapter inside a larger book (e.g. Kevin’s Story), add the parentId: "kevins-story" line to the header to automatically link them.
7. Tap Commit to save directly to the main branch.

How to Edit an Existing Story:

1. In the GitHub App, go to src/content/stories/ and tap the story file you want to edit.
2. Tap the Edit (pencil icon).
3. Modify your text or correct typos.
4. Tap Commit!

Poems live inside the folder src/content/poems/.

How to Add a New Poem:

1. Open the GitHub App, select your repository, and navigate to src ➔ content ➔ poems.
2. Tap the + (Add) icon and choose “Create new file”.
3. Name your file ending in .md (e.g., my-autumn-poem.md).
4. Paste & fill the header:

   ---
   title: "My Autumn Poem"
   date: 2026-09-29
   type: "poems"
   author: "TJB"
   ---

5. Type your poem below.
6. Formatting Tip: Markdown automatically collapses single line-breaks when converting to static pages. To ensure your poem stanzas remain separated on the reader screen, insert an entire blank line between each stanza block.
7. Tap Commit!

TimeLapse journals live inside the folder src/content/timelapses/.

How to Add/Edit a TimeLapse:

1. Open the GitHub App, select your repository, and navigate to src ➔ content ➔ timelapses.
2. Tap the + (Add) icon to “Create new file” (or tap an existing timelapse stop file and select the pencil icon to edit).
3. Ensure the YAML header includes a title, date, and a brief description excerpt:

   ---
   title: "Dublin, Italy & France 2026"
   date: 2026-03-24
   type: "timelapses"
   excerpt: "A beautiful spring journey through Italy's historic landscapes and France's serene borders."
   ---

4. Inside the body, declare each chronological geographical stop using double-hash headings (##), followed by the geocoded date and photo link:

   ## Florence, Italy
   24th March 2026
   
   A spectacular walk along the Arno River at sunset.
   
   ![Arno River sunset](/images/my-florence-trip-01.jpg)

5. Tap Commit!

Technical Projects live inside the folder src/content/projects/.

How to Add/Edit a Project:

1. Navigate in the GitHub App to src ➔ content ➔ projects.
2. Create a new markdown file or edit an existing one.
3. Configure the requisite YAML header:

   ---
   title: "My Custom Spreadsheet Tool"
   date: 2026-09-29
   type: "projects"
   ---

4. Write the description of your system architecture below the header.
5. To offer file downloads (such as Excel spreadsheets or custom macro sheet files), upload them to your repo’s /public/downloads/ folder using your phone or Mac, and link to them using standard Markdown: [Download the Tool](/downloads/my-tool.xlsm)
6. Tap Commit!

Songs live inside the folder src/content/songs/.

How to Add/Edit a Song:

1. Navigate in the GitHub App to src ➔ content ➔ songs.
2. Create a new file or edit an existing file.
3. Configure the YAML header:

   ---
   title: "The Autumn Breeze"
   date: 2026-09-29
   type: "songs"
   author: "TJB"
   ---

4. Type the lyrics below the header.
5. Tap Commit!

DIY projects live inside the folder src/content/diy/.

How to Add/Edit a DIY Gallery:

1. Navigate in the GitHub App to src ➔ content ➔ diy.
2. Create a new file or edit an existing file.
3. Configure the YAML header:

   ---
   title: "My Workshop Renovation"
   date: 2026-09-29
   type: "diy"
   ---

4. DIY galleries display photos chronologically stacked vertically. Add headings for each construction step, accompanied by the images you uploaded to public/images/:

   ### Clearing the Workspace
   25.09.2026
   
   Here is the starting point.
   ![](/images/workshop-empty.jpg)

5. Tap Commit!

Films do not use Markdown. They are defined in a static Javascript array inside the cinema layout.

How to Add a Video to the Cinema Grid:

1. Upload your video clip to YouTube and copy its 11-character Video ID (e.g. for https://youtu.be/uCx3oN9jc94, the ID is uCx3oN9jc94).
2. Open the GitHub App, select your repository, and navigate to src ➔ pages ➔ films.astro.
3. Tap the Edit (pencil icon).
4. Scroll to the videos array near the top of the file (lines 4-40) and append a new structured video block:

   { 
       id: "uCx3oN9jc94", 
       title: "Assessing Levels Speeds", 
       description: "A short walk-through demonstrating levels progression." 
   },

5. Tap Commit to save!

To prevent layout breaks, always ensure static files are uploaded or saved in the correct locations:

• Photos & Images: Upload to public/images/. Filenames should be lowercase, unique, and hyphen-separated (e.g., grand-canyon-2026.jpg). Reference them as /images/grand-canyon-2026.jpg.
• Playable Videos: Upload to public/videos/ (must remain under 100 MB). Reference them as /videos/filename.mp4.
• Spreadsheets & Downloads: Upload to public/downloads/. Reference them as /downloads/my-sheet.xlsm.

If you are on your laptop, you can completely bypass manual Markdown formatting by running your automated command-line curation assistant!

1. Open your Mac’s Terminal in the project root.
2. Run: node asset-manager.js
3. This program will automatically compress massive mobile photos down to a fast web-standard 400KB, lookup physical GPS coordinates instantly via geocoding, transcode high-resolution videos, and pre-configure your markdown files automatically!

Wix is a notoriously closed, proprietary “walled-garden” platform. It provides zero native database backup formats, zero markdown exporters, and completely blocks users from downloading their uploaded media files in a bulk zip.

To liberate your travel archives and family chronicles from Wix, we engineered a custom static extraction pipeline:

1. Media CDN URL Scraping

While the Wix interface hides raw image file paths, Wix’s public servers are forced to serve assets to browsers via their global media CDN: static.wixstatic.com/media/.

• The Extraction: We scraped and parsed your Wix site sitemaps and XML page structures to extract the unique cryptographic filenames of your original uploads.
• The Download: We ran automated, high-speed curl downloading loops to query the CDN directly, pulling down original, uncompressed JPEGs and PNGs in bulk, completely bypassing the Wix admin dashboard paywall.

2. Semantic HTML Translation

Wix pages are built using thousands of nested, absolutely positioned div tags with dynamic inline styles, making the raw HTML completely unreadable and incompatible with modern SEO.

• The Translation: We stripped away the dynamic Wix Javascript bloat, extracted the core text copy, and translated the absolute-positioned dynamic sections into semantic, lightweight Markdown content collections and responsive, modern CSS grid components.

To launch your new website at bradyclan.co.uk without paying monthly WordPress hosting subscription fees, we had to systematically wrest DNS management away from WordPress.com and point it to Render.

1. The Legacy Nameserver Lock

Originally, the domain bradyclan.co.uk (purchased via registrar 123-reg) had its DNS Nameservers set to WordPress’s servers:

• ns1.wordpress.com
• ns2.wordpress.com
• ns3.wordpress.com

This meant WordPress had absolute authority over your domain’s routing records, forcing any visitor of bradyclan.co.uk to load their slower, database-driven server page.

2. The Liberation Protocol

To safely transition without domain downtime:

1. Restoring Registrar Authority: We logged into your domain registrar account at 123-reg and updated the Domain Nameserver settings. We deleted the three WordPress nameservers and restored authority to 123-reg’s default nameservers.
2. Configuring Load-Balanced A Records: On the newly active 123-reg DNS dashboard, we configured custom static IP routing:
   • A Record (Apex @): Pointed to Render’s load-balanced global static IP 216.24.57.1.
3. CNAME Subdomain Alignment: We set up subdomain routing to ensure full web-traffic coverage:
   • CNAME Record (www): Pointed directly to bradyclan-site.onrender.com..
4. Automatic SSL Handshake: Once global DNS servers propagated these updates, Render’s servers automatically executed a secure Let’s Encrypt validation handshake, enabling HTTPS lock safety on all modern browsers with zero configuration.

The following table compares a Dynamic Database CMS (WordPress & Wix) with your new Modern Git-Backed Static Site (Astro on Render):

1. Breathtaking Bespoke Curation (Ultimate UI/UX)

Your new website is completely bespoke and tailored precisely to your family archives. We have designed and engineered high-fidelity, interactive components that are entirely impossible to build in WordPress or Wix without paying expensive subscription fees:

• Bespoke Predictor Sub-Site: A complete athletic scoring software and historical tournament platform, engineered as a lightweight static app with custom error forms, macro workbooks, and Google Sheet integration!
• Lazy-Mount Accordion Grid Loads: Travel stops open with smooth CSS-grid animations, dynamically mounting image and video sources only when expanded—shrinking your page’s initial load weight from 500MB to a lightning-fast 0 MB on startup!
• Cinema YouTube Theatre Grid: A stunning cinematic preview grid featuring high-resolution previews and fullscreen responsive lightbox modal overlays.
• Seamless Lightbox Modal: Fullscreen photo and video viewing equipped with smooth touch navigation, keyboard arrow controls, and live geocoded captions.

2. Unlimited High-Definition Media Archive

While WordPress and Wix cap your storage and block you from uploading raw video clips unless you upgrade, your new Astro site offers unlimited, free storage for your archives. You can upload gigabytes of playable .mp4 video clips and optimized JPEGs without ever hitting a limit or receiving a bill.

3. Absolute Security, Integrity & Longevity

A WordPress site left unmaintained for six months will inevitably accumulate spam, break due to core updates, or get hacked. Because Astro compiles your site into pure static HTML and CSS:

• There is no active database or server-side PHP code to exploit.
• The website is completely maintenance-free. You can walk away from this website for ten years, and it will remain 100% live, fully functional, and completely secure on Render, costing you nothing.

1. Local Curation Workflow

Because a static site does not run a server-side database to compress and process files, media files must be curated locally before they are pushed live. This local curation step is exactly why we built your bespoke Curation Asset Manager (asset-manager.js)!

The Asset Manager serves as your private, local control center:

• Auto-Downsizing Engine: Automatically scans and compresses giant 12MB smartphone JPEGs down to a crisp, high-definition 400KB width using macOS’s native sips utility on startup.
• Universal Geocoder: Resolves physical GPS coordinates instantly using OpenStreetMap Nominatim to display towns, cities, and countries, automatically pre-populating suggested filenames and timeline dropdowns.
• On-Demand Video Optimizer: Provides an interactive button to downscale heavy 4K or non-standard HEVC videos to web-compliant, smoothly playable 1080p H.264 formats on disk.
• Spacious Annotation Textareas: Vertical-resizable text areas to comfortably write and edit detailed travel stories or poem descriptions.
• Multi-Collection Curation: Automatically sweeps and maps reference links into your Timelapses, DIY, Stories, Projects, Songs, and Poems Markdown files.

2. The Git Push Cycle

To make your curated local changes live to the world, you execute a quick Git Sync:

1. Add and commit your local changes: git add . && git commit -m "Curate files"
2. Push to GitHub using your secure SSH keys: GIT_SSH_COMMAND="ssh" git push origin main
3. Render automatically detects the push, recompiles the site, and deploys it live to bradyclan.co.uk in under 30 seconds.