Skip to content
<section class="hero hero-slideshow">
<div class="hero-slides">
<div class="hero-slide active">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-1-800w.webp 800w, /img/optimized/hero-1-1200w.webp 1200w, /img/optimized/hero-1-1920w.webp 1920w" sizes="100vw">
<img src="/img/optimized/hero-1-1920w.jpeg" alt="Hero image 1" loading="eager" decoding="async" fetchpriority="high">
</picture>
</div>
<div class="hero-slide">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-2-800w.webp 800w, /img/optimized/hero-2-1179w.webp 1179w" sizes="100vw">
<img src="/img/optimized/hero-2-1179w.jpeg" alt="Hero image 2" loading="lazy" decoding="async">
</picture>
</div>
<div class="hero-slide">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-3-800w.webp 800w, /img/optimized/hero-3-1200w.webp 1200w, /img/optimized/hero-3-1920w.webp 1920w" sizes="100vw">
<img src="/img/optimized/hero-3-1920w.jpeg" alt="Hero image 3" loading="lazy" decoding="async">
</picture>
</div>
<div class="hero-slide">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-4-800w.webp 800w, /img/optimized/hero-4-1200w.webp 1200w, /img/optimized/hero-4-1920w.webp 1920w" sizes="100vw">
<img src="/img/optimized/hero-4-1920w.jpeg" alt="Hero image 4" loading="lazy" decoding="async">
</picture>
</div>
<div class="hero-slide">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-5-800w.webp 800w, /img/optimized/hero-5-1200w.webp 1200w, /img/optimized/hero-5-1920w.webp 1920w" sizes="100vw">
<img src="/img/optimized/hero-5-1920w.jpeg" alt="Hero image 5" loading="lazy" decoding="async">
</picture>
</div>
<div class="hero-slide">
<picture>
<source type="image/webp" srcset="/img/optimized/hero-6-800w.webp 800w, /img/optimized/hero-6-1200w.webp 1200w, /img/optimized/hero-6-1920w.webp 1920w" sizes="100vw">
<img src="/img/optimized/hero-6-1920w.jpeg" alt="Hero image 6" loading="lazy" decoding="async">
</picture>
</div>
</div>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title animate-fade-up">Malcolm Armstrong</h1>
<p class="hero-tagline animate-fade-up delay-1">Technologist & Creator</p>
<p class="hero-subtitle animate-fade-up delay-2">Laboratory</p>
<a href="#about" class="btn hero-cta animate-fade-up delay-3">Learn More</a>
</div>
<div class="hero-nav">
<button class="hero-nav-btn active" data-slide="0" aria-label="Slide 1"></button>
<button class="hero-nav-btn" data-slide="1" aria-label="Slide 2"></button>
<button class="hero-nav-btn" data-slide="2" aria-label="Slide 3"></button>
<button class="hero-nav-btn" data-slide="3" aria-label="Slide 4"></button>
<button class="hero-nav-btn" data-slide="4" aria-label="Slide 5"></button>
<button class="hero-nav-btn" data-slide="5" aria-label="Slide 6"></button>
</div>
<div class="scroll-indicator animate-bounce">
<span class="scroll-arrow" aria-hidden="true"></span>
<span class="visually-hidden">Scroll down</span>
</div>
</section>
<section id="projects" class="section work">
<div class="container">
<h2>Projects</h2>
<div class="project-grid">
</div>
</div>
</section>
<section id="gallery" class="section gallery-teaser">
<div class="container">
<h2>Gallery</h2>
<div class="gallery-grid">
<a href="/img/optimized/gallery/DSCF3710-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/DSCF3710-400w.webp 400w, /img/optimized/gallery/DSCF3710-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/DSCF3710-800w.jpeg" alt="Gallery image 1" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/IMG_20180321_194221-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/IMG_20180321_194221-400w.webp 400w, /img/optimized/gallery/IMG_20180321_194221-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/IMG_20180321_194221-800w.jpeg" alt="Gallery image 2" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/IMG_2193-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/IMG_2193-400w.webp 400w, /img/optimized/gallery/IMG_2193-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/IMG_2193-800w.jpeg" alt="Gallery image 3" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/IMG_8192-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/IMG_8192-400w.webp 400w, /img/optimized/gallery/IMG_8192-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/IMG_8192-800w.jpeg" alt="Gallery image 4" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/IMG_8242-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/IMG_8242-400w.webp 400w, /img/optimized/gallery/IMG_8242-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/IMG_8242-800w.jpeg" alt="Gallery image 5" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/IMG_8454-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/IMG_8454-400w.webp 400w, /img/optimized/gallery/IMG_8454-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/IMG_8454-800w.jpeg" alt="Gallery image 6" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/Marmstrong_20180620_152750-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/Marmstrong_20180620_152750-400w.webp 400w, /img/optimized/gallery/Marmstrong_20180620_152750-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/Marmstrong_20180620_152750-800w.jpeg" alt="Gallery image 7" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/PaintingMet-meRubensCIMG0033-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/PaintingMet-meRubensCIMG0033-400w.webp 400w, /img/optimized/gallery/PaintingMet-meRubensCIMG0033-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/PaintingMet-meRubensCIMG0033-800w.jpeg" alt="Gallery image 8" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/granacifinal930-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/granacifinal930-400w.webp 400w, /img/optimized/gallery/granacifinal930-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/granacifinal930-800w.jpeg" alt="Gallery image 9" loading="lazy" decoding="async">
</picture>
</a>
<a href="/img/optimized/gallery/headstudy-dancer-1200w.jpeg" class="gallery-item" data-lightbox="gallery">
<picture>
<source type="image/webp" srcset="/img/optimized/gallery/headstudy-dancer-400w.webp 400w, /img/optimized/gallery/headstudy-dancer-800w.webp 800w" sizes="(max-width: 600px) 50vw, 33vw">
<img src="/img/optimized/gallery/headstudy-dancer-800w.jpeg" alt="Gallery image 10" loading="lazy" decoding="async">
</picture>
</a>
</div>
<a href="/galleries/" class="btn btn-secondary">View All Galleries</a>
</div>
</section>
<section id="about" class="section about">
<div class="container">
<h2>About</h2>
<div class="about-content">
I am technologist and creator in digital and traditional mediums. This site is mostly just a container for thought, ideas, experiments and past projects.
</div>
<a href="#" class="back-to-top">↑ Back to Top</a>
</div>
</section>
<section id="journal" class="section journal-teaser">
<div class="container">
<h2>Journal</h2>
<ul class="blog-list">
<li class="blog-entry">
<a href="/journal/2026-07-31-productivity-how-a-full-time-lawyer-wrote-58-novels/" class="blog-title">Productivity - How a full time lawyer wrote 58 novels</a>
<div class="blog-meta">
<time datetime="2026-07-31">July 31, 2026</time>
<span class="blog-tags">
<a href="/journal/tag/productivity/" class="tag">productivity</a>
<a href="/journal/tag/creative-productivity/" class="tag">creative productivity</a>
</span>
</div>
<p>Productivity - How a full time lawyer wrote 58 novels
Originally published 2011</p>
</li>
<li class="blog-entry">
<a href="/journal/2026-07-22-what-to-draw-during-a-heat-wave/" class="blog-title">What To Draw During a Heat Wave</a>
<div class="blog-meta">
<time datetime="2026-07-04">July 4, 2026</time>
<span class="blog-tags">
<a href="/journal/tag/drawing/" class="tag">drawing</a>
</span>
</div>
<p></p>
</li>
<li class="blog-entry">
<a href="/journal/2026-03-28-unplug/" class="blog-title">Be Careful Of Your Metaphors</a>
<div class="blog-meta">
<time datetime="2026-03-28">March 28, 2026</time>
</div>
<p></p>
</li>
</ul>
<a href="/journal/" class="btn btn-secondary">View All Posts</a>
</div>
</section>
<section id="contact" class="section contact">
<div class="container">
<h2>Get in Touch</h2>
<p>Have a project in mind or just want to say hello? I'd love to hear from you.</p>
<form class="contact-form" action="https://formspree.io/f/xgoovnzv" method="POST">
<input type="hidden" name="_subject" value="New contact from portfolio site">
<input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" aria-hidden="true">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required autocomplete="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>