Add screenshots.

1 files changed, 113 insertions, 34 deletions

diff --git a/src/screenshots/index.html b/src/screenshots/index.html
index d1c975b..cfabb18 100644
--- a/src/screenshots/index.html
+++ b/src/screenshots/index.html
@@ -51,98 +51,177 @@ __HEADER__
 					<ul>
 						<li class="active" data-filter="*">All</li>
 						<li data-filter=".category-1">Productivity</li>
-						<li data-filter=".category-2">Data Science</li>
-						<li data-filter=".category-3">Retro Computing</li>
+						<li data-filter=".category-2">Entertainment</li>
+						<li data-filter=".category-3">Data Science</li>
+						<li data-filter=".category-4">Retro Computing</li>
 					</ul>
 				</div>
 				<!-- end Portfolio filter -->
 				<div class="row portfolio-wrapper spacing-10 border-radius-025">
-					<!-- Portfolio box 1 -->
 					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
-						<div class="portfolio-box">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-win10.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-win10.webp" alt=""><!-- Image source -->
 							</div>
-							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">Virtualize Windows 10</h5>
+									<span>Productivity</span>
 								</div>
 							</div>
 						</div>
 					</div>
-					<!-- Portfolio box 2 -->
 					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
-						<div class="portfolio-box">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-bunny.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-bunny.webp" alt=""><!-- Image source -->
 							</div>
 							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">Watch Big Buck Bunny</h5>
+									<span>Entertainment</span>
 								</div>
 							</div>
 						</div>
 					</div>
-					<!-- Portfolio box 3 -->
-					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-3">
-						<div class="portfolio-box">
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-4">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-g3.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-g3.webp" alt=""><!-- Image source -->
 							</div>
 							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">Time Travel on a 1999 iMac G3</h5>
+									<span>Retro Computing</span>
 								</div>
 							</div>
 						</div>
 					</div>
-					<!-- Portfolio box 4 -->
 					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
-						<div class="portfolio-box">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-horizon.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-horizon.webp" alt=""><!-- Image source -->
 							</div>
 							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">Develop Applications</h5>
+									<span>Productivity</span>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-3">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-stars.png">
+							<div class="portfolio-img">
+								<img src="adelie-stars.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">Explore the Stars</h5>
+									<span>Data Science</span>
 								</div>
 							</div>
 						</div>
 					</div>
-					<!-- Portfolio box 5 -->
 					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
-						<div class="portfolio-box">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-spotify.png">
+							<div class="portfolio-img">
+								<img src="adelie-spotify.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">Stream Your Music</h5>
+									<span>Entertainment</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-kde-browser.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-kde-browser.webp" alt=""><!-- Image source -->
 							</div>
 							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">Internet Relay Chat</h5>
+									<span>Productivity</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-4">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-lynx.png">
+							<div class="portfolio-img">
+								<img src="adelie-lynx.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">Off the Grid:<br />Solar + LTE + Raspberry Pi</h5>
+									<span>Retro Computing</span>
 								</div>
 							</div>
 						</div>
 					</div>
-					<!-- Portfolio box 6 -->
 					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-3">
-						<div class="portfolio-box">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-java.png">
+							<div class="portfolio-img">
+								<img src="adelie-java.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">NASA's World in Java</h5>
+									<span>Data Science</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-4">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-compaq.png">
+							<div class="portfolio-img">
+								<img src="adelie-compaq.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">Intel Pentium III</h5>
+									<span>Retro Computing</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-4">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-ibook.png">
+							<div class="portfolio-img">
+								<img src="adelie-ibook.webp" alt=""><!-- Image source -->
+							</div>
+							<a href="#"></a><!-- Portfolio Single link -->
+							<div class="portfolio-title">
+								<div>
+									<h5 class="font-weight-normal">iBook G3</h5>
+									<span>Retro Computing</span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-12 col-md-6 col-lg-4 portfolio-item category-4">
+						<div class="portfolio-box lightbox-image-box" href="/assets/images/screenshots/adelie-imac.png">
 							<div class="portfolio-img">
-								<img src="/assets/images/col-2.jpg" alt=""><!-- Image source -->
+								<img src="adelie-imac.webp" alt=""><!-- Image source -->
 							</div>
 							<a href="#"></a><!-- Portfolio Single link -->
 							<div class="portfolio-title">
 								<div>
-									<h5 class="font-weight-normal">Project Title</h5>
-									<span>Category</span>
+									<h5 class="font-weight-normal">iMac G4</h5>
+									<span>Retro Computing</span>
 								</div>
 							</div>
 						</div>