diff options
17 files changed, 236 insertions, 0 deletions
diff --git a/content/bikes/fogcutter.md b/content/bikes/fogcutter.md new file mode 100644 index 0000000..7ca46a0 --- /dev/null +++ b/content/bikes/fogcutter.md @@ -0,0 +1,66 @@ +--- +title: SOMA Fog Cutter +date: 2024-09-22 +template: orphan.html +--- + +A [SOMA](https://www.somafab.com/archives/product/fog-cutter-frame-set) [Fog Cutter](https://www.somafab.com/archives/product/fog-cutter-frame-set) road bike, build by [Blue Heron Bike](https://www.blueheronbikesberkeley.com/bike-accessories) in Berkeley. The size of the frame is 58cm and the color is blue. It comes with a carbon fork. + +**Asking price is $2800.** + +You can contact me <a href="mailto:franck@fcuny.net?subject=SOMA%20fog%20cutter">by email</a>. + +<div id="carousel-container"></div> + +<script> + // Specify the images for this carousel + const pageImages = [ + '/images/fogcutter/IMG_0988.jpeg', + '/images/fogcutter/IMG_0989.jpeg', + '/images/fogcutter/IMG_0990.jpeg', + '/images/fogcutter/IMG_0991.jpeg', + '/images/fogcutter/IMG_0992.jpeg', + '/images/fogcutter/IMG_0993.jpeg', + '/images/fogcutter/IMG_0994.jpeg', + '/images/fogcutter/IMG_0995.jpeg', + '/images/fogcutter/IMG_0996.jpeg', + '/images/fogcutter/IMG_0997.jpeg', + '/images/fogcutter/IMG_0998.jpeg', + '/images/fogcutter/IMG_0999.jpeg', + '/images/fogcutter/IMG_1001.jpeg', + '/images/fogcutter/IMG_1002.jpeg', + ]; + + // Check if the initializeCarousel function is available + if (typeof initializeCarousel === 'function') { + // Initialize the carousel + initializeCarousel('carousel-container', pageImages); + } else { + console.error('Carousel initialization function not found. Make sure carousel.js is properly loaded.'); + } +</script> + +## Part list + +| part | model | +|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| Frame | [SOMA Fog Cutter](https://www.somafab.com/archives/product/fog-cutter-frame-set) 58cm in blue | +| Fork | [Soma Fork Fog Cutter Carbon Cerulean Blue (Thru-Axle)](https://www.somafabshop.com/shop/231007-soma-fork-fog-cutter-carbon-cerulean-blue-thru-axle-5617?search=cerulean&product=product.template%285617%2C%29#attr=) | +| Headset | | +| Front and rear wheel | [DT Swiss XR 331 29 20 mm DB VI](https://www.dtswiss.com/en/support/product-support?matnr=RTXR3329N28S011223) | +| Tire | | +| Front hub | [SP dynamo PL7](https://www.sp-dynamo.com/series7-pl7) | +| Rear hub | [Shimano Tiagra rs740](https://bike.shimano.com/en-US/product/component/tiagra-4700/FH-RS470.html) | +| Rear derailleur | [Shimano Ultegra RX 11 speed](https://bike.shimano.com/en-US/product/component/ultegra-rx/RD-RX800-GS.html) | +| Front derailleur | [Shimano Metrea 2x11 speed](https://bike.shimano.com/en-US/product/component/metrea-u5000/FD-U5000-F.html) | +| Handlebar | [Zipp Service Course 70 Ergo Drop Handlebar 42cm](https://www.sram.com/en/zipp/models/hb-dbsc-7e-b2) | +| Brifter | [Shimano Dura Ace 9120](https://bike.shimano.com/en-US/product/component/duraace-r9100/ST-R9120-R.html) | +| Saddle | [Brooks C15 black](https://www.brooksengland.com/en_us/c15.html) | +| Seat post | [SIM Works Beatnik post (black)](https://www.sim.works/products/beatnik-post-1) | +| Front light | [Busch & Müller Lumotec IQ-X Headlamp](https://www.bumm.de/en/products/dynamo-scheinwerfer/produkt/164rtsndi-01-schwarz-164rtsndi-silber%20.html) | +| Brake | | +| Crank | [White Industries Square Taper road cranks](https://www.whiteind.com/product/square-taper-road-cranks/) | +| Chain ring | [White Industries 52/32](https://www.whiteind.com/product/vbc-chainring-sets/) | +| Pedal | | +| Bar tape | [Lizzard Skin (brown)](https://www.lizardskins.com/cycling) | +| Bottle cage | | diff --git a/static/css/carousel.css b/static/css/carousel.css new file mode 100644 index 0000000..d1505e1 --- /dev/null +++ b/static/css/carousel.css @@ -0,0 +1,48 @@ +/* File: carousel.css */ + +.carousel { + width: 100%; + max-width: 46rem; /* As per your specification */ + margin: 0 auto; +} + +.carousel-main-image { + width: 100%; + height: auto; + margin-bottom: 20px; +} + +.carousel-main-image img { + width: 100%; + height: auto; + display: block; +} + +.carousel-vignettes { + display: flex; + justify-content: center; + gap: 10px; + overflow-x: auto; + padding: 10px 0; +} + +.vignette { + cursor: pointer; + transition: opacity 0.3s ease; + flex: 0 0 auto; +} + +.vignette:hover { + opacity: 0.8; +} + +.vignette.active { + border: 2px solid #007bff; +} + +.vignette img { + display: block; + width: 120px; + height: 80px; + object-fit: cover; +} diff --git a/static/images/fogcutter/IMG_0988.jpeg b/static/images/fogcutter/IMG_0988.jpeg new file mode 100644 index 0000000..3efafd6 --- /dev/null +++ b/static/images/fogcutter/IMG_0988.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0989.jpeg b/static/images/fogcutter/IMG_0989.jpeg new file mode 100644 index 0000000..528c8a1 --- /dev/null +++ b/static/images/fogcutter/IMG_0989.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0990.jpeg b/static/images/fogcutter/IMG_0990.jpeg new file mode 100644 index 0000000..166b63f --- /dev/null +++ b/static/images/fogcutter/IMG_0990.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0991.jpeg b/static/images/fogcutter/IMG_0991.jpeg new file mode 100644 index 0000000..06b1294 --- /dev/null +++ b/static/images/fogcutter/IMG_0991.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0992.jpeg b/static/images/fogcutter/IMG_0992.jpeg new file mode 100644 index 0000000..e37329b --- /dev/null +++ b/static/images/fogcutter/IMG_0992.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0993.jpeg b/static/images/fogcutter/IMG_0993.jpeg new file mode 100644 index 0000000..76606a3 --- /dev/null +++ b/static/images/fogcutter/IMG_0993.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0994.jpeg b/static/images/fogcutter/IMG_0994.jpeg new file mode 100644 index 0000000..2cb0ebc --- /dev/null +++ b/static/images/fogcutter/IMG_0994.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0995.jpeg b/static/images/fogcutter/IMG_0995.jpeg new file mode 100644 index 0000000..0642afd --- /dev/null +++ b/static/images/fogcutter/IMG_0995.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0996.jpeg b/static/images/fogcutter/IMG_0996.jpeg new file mode 100644 index 0000000..dadc25e --- /dev/null +++ b/static/images/fogcutter/IMG_0996.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0997.jpeg b/static/images/fogcutter/IMG_0997.jpeg new file mode 100644 index 0000000..d601460 --- /dev/null +++ b/static/images/fogcutter/IMG_0997.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0998.jpeg b/static/images/fogcutter/IMG_0998.jpeg new file mode 100644 index 0000000..dc99cd9 --- /dev/null +++ b/static/images/fogcutter/IMG_0998.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_0999.jpeg b/static/images/fogcutter/IMG_0999.jpeg new file mode 100644 index 0000000..95bd086 --- /dev/null +++ b/static/images/fogcutter/IMG_0999.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_1001.jpeg b/static/images/fogcutter/IMG_1001.jpeg new file mode 100644 index 0000000..887e029 --- /dev/null +++ b/static/images/fogcutter/IMG_1001.jpeg Binary files differdiff --git a/static/images/fogcutter/IMG_1002.jpeg b/static/images/fogcutter/IMG_1002.jpeg new file mode 100644 index 0000000..72efefa --- /dev/null +++ b/static/images/fogcutter/IMG_1002.jpeg Binary files differdiff --git a/static/js/carousel.js b/static/js/carousel.js new file mode 100644 index 0000000..f30f934 --- /dev/null +++ b/static/js/carousel.js @@ -0,0 +1,122 @@ +function createCarousel(images) { + const carousel = document.createElement('div'); + carousel.className = 'carousel'; + let currentIndex = 0; + + // Create main image container + const mainImageContainer = document.createElement('div'); + mainImageContainer.className = 'carousel-main-image'; + carousel.appendChild(mainImageContainer); + + // Create vignette container + const vignetteContainer = document.createElement('div'); + vignetteContainer.className = 'carousel-vignettes'; + carousel.appendChild(vignetteContainer); + + // Function to update the main displayed image + function updateMainImage() { + mainImageContainer.innerHTML = ''; + const img = document.createElement('img'); + img.src = images[currentIndex]; + img.style.width = '100%'; + img.style.height = 'auto'; + mainImageContainer.appendChild(img); + } + + // Function to create vignettes + function createVignettes() { + vignetteContainer.innerHTML = ''; + const containerWidth = carousel.offsetWidth; + const vignetteWidth = 120; + const vignetteHeight = 80; + const vignetteMargin = 10; + const maxVignettes = Math.floor(containerWidth / (vignetteWidth + vignetteMargin)); + + const startIndex = Math.max(0, currentIndex - Math.floor(maxVignettes / 2)); + const endIndex = Math.min(images.length, startIndex + maxVignettes); + + for (let i = startIndex; i < endIndex; i++) { + const vignette = document.createElement('div'); + vignette.className = 'vignette'; + if (i === currentIndex) vignette.classList.add('active'); + + const img = document.createElement('img'); + img.src = images[i]; + img.style.width = vignetteWidth + 'px'; + img.style.height = vignetteHeight + 'px'; + img.style.objectFit = 'cover'; + + vignette.appendChild(img); + vignette.addEventListener('click', () => goToImage(i)); + vignetteContainer.appendChild(vignette); + } + } + + // Function to go to a specific image + function goToImage(index) { + currentIndex = index; + updateMainImage(); + createVignettes(); + } + + // Function to go to the next image + function nextImage() { + currentIndex = (currentIndex + 1) % images.length; + updateMainImage(); + createVignettes(); + } + + // Function to go to the previous image + function prevImage() { + currentIndex = (currentIndex - 1 + images.length) % images.length; + updateMainImage(); + createVignettes(); + } + + // Event listener for keyboard navigation + document.addEventListener('keydown', (e) => { + if (e.key === 'ArrowRight') nextImage(); + if (e.key === 'ArrowLeft') prevImage(); + }); + + // Initialize the carousel + updateMainImage(); + + // Use setTimeout to delay the initial creation of vignettes + setTimeout(() => { + createVignettes(); + }, 0); + + // Recalculate vignettes on window resize + window.addEventListener('resize', createVignettes); + + return carousel; +} + +// Function to initialize the carousel with specific images +function initializeCarousel(containerId, images) { + document.addEventListener('DOMContentLoaded', () => { + const container = document.getElementById(containerId); + if (container) { + const carouselElement = createCarousel(images); + container.appendChild(carouselElement); + + // Use ResizeObserver to detect when the carousel is fully rendered + const resizeObserver = new ResizeObserver(entries => { + for (let entry of entries) { + if (entry.target === carouselElement) { + createVignettes(); + resizeObserver.disconnect(); // Stop observing once vignettes are created + } + } + }); + + resizeObserver.observe(carouselElement); + } else { + console.error(`Container with id "${containerId}" not found.`); + } + }); +} + +// Make the initializeCarousel function globally available +window.initializeCarousel = initializeCarousel; |
