Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add project page, update index page #5

Merged
merged 1 commit into from
Feb 24, 2025
Merged

add project page, update index page #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added imgs/projects/cbir/cbir1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/projects/cbir/cbir2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/projects/cbir/cbir3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/projects/cbir/cbir4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 20 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@
<div id="ascii-art2" align="center">
<pre>

███▄▄▄▄ ▄████████ ▄█ █▄ ▄████████ ▄████████
███▀▀▀██▄ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ █▀ ███ ███ ███ █▀ ███ ███
███ ███ ███ ▄███▄▄▄▄███▄▄ ▄███▄▄▄ ▄███▄▄▄▄██▀
███ ███ ▀███████████ ▀▀███▀▀▀▀███▀ ▀▀███▀▀▀ ▀▀███▀▀▀▀▀
███ ███ ███ ███ ███ ███ █▄ ▀███████████
███ ███ ▄█ ███ ███ ███ ███ ███ ███ ███
▀█ █▀ ▄████████▀ ███ █▀ ██████████ ███ ███
███ ███

▄█ ▄██████▄ ▄████████ ▄█ █▄ ▄██████▄ ▄█ ▄▄▄▄███▄▄▄▄ ▄████████ ███▄▄▄▄
███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███▀▀▀██▄
███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▄███▄▄▄ ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▀▀███▀▀▀ ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ███ ▀███████████ ███ ███
███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ███ ███ ███ ███ ███ ███ ███▌ ▄ ███ ███ ███ ███ ███ ███ ███
█▄ ▄███ ▀██████▀ ██████████ ███ █▀ ▀██████▀ █████▄▄██ ▀█ ███ █▀ ███ █▀ ▀█ █▀
▀▀▀▀▀▀ ▀

</pre
>
</div>
Expand All @@ -39,15 +41,20 @@
<div class="parent-container">
<div class="bulletin" align="center">
<p>
***** ***** ***** *****<br /> <br>
***** ***** ***** *****<br />
{Joe Holman}<br />
17 JANUARY 2025

</p>
</div>
<div class="bulletin2" align="center">
<div class="bulletin2">
<i>֍ Full-stack devolper, ML, GenAI</i>
<br> <br><a href="/photos" target="_blank">> Photos 2016>>Ongoing<i> </a><br>
<a href="/photos" target="_blank">> Projects<i> </a><br><br>
<br><br><b>Contact:</b><br>
josepholman2k@gmail.com <br>

<br> <br><a href="/projects" target="_blank">> Projects<i> </a><br>
<a href="photos.html" target="_blank">> Photos 2016>>Ongoing</a><br>

</div>
</div>
<script src="/src/stars.js"></script>
Expand Down
84 changes: 84 additions & 0 deletions photos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>Photos - Joe Holman</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<a href="index.html" style="text-decoration: none; color: inherit">
<div id="ascii-art2" align="center">
<pre>
▄█ ▄██████▄ ▄████████ ▄█ █▄ ▄██████▄ ▄█ ▄▄▄▄███▄▄▄▄ ▄████████ ███▄▄▄▄
███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███▀▀▀██▄
███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▄███▄▄▄ ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▀▀███▀▀▀ ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ███ ▀███████████ ███ ███
███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ███ ███ ███ ███ ███ ███ ███▌ ▄ ███ ███ ███ ███ ███ ███ ███
█▄ ▄███ ▀██████▀ ██████████ ███ █▀ ▀██████▀ █████▄▄██ ▀█ ███ █▀ ███ █▀ ▀█ █▀
▀▀▀▀▀▀ ▀

</pre
>
</div>
</a>
</header>

<div class="gallery">
<img src="photos/page1/photo1.jpg" alt="Photo 1" class="gallery-image" />
<img src="photos/page1/photo2.jpg" alt="Photo 2" class="gallery-image" />
<img src="photos/page1/photo3.jpg" alt="Photo 3" class="gallery-image" />
<!-- Add more images as needed -->
</div>

<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01" />
<div id="caption"></div>
</div>

<div class="pagination-links">
<a href="photos.html">« </a>
<a href="photos.html">1 </a>| <a href="photos2.html">2</a> |
<a href="photos3.html">3</a> | <a href="photos4.html">4</a> |
<a href="photos5.html">5</a> | <a href="photos6.html">6</a> |
<a href="photos7.html">7</a> | <a href="photos8.html">8</a> |
<a href="photos9.html">9</a>
<a href="photos2.html"> »</a>
</div>

<script src="/src/stars.js"></script>
<script>
// Modal functionality
const modal = document.getElementById('myModal');
const modalImg = document.getElementById('img01');
const captionText = document.getElementById('caption');
const images = document.getElementsByClassName('gallery-image');
const span = document.getElementsByClassName('close')[0];

Array.from(images).forEach((img) => {
img.onclick = function () {
modal.style.display = 'flex';
modalImg.src = this.src;
captionText.innerHTML = this.alt;
};
});

span.onclick = function () {
modal.style.display = 'none';
};

window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = 'none';
}
};
</script>
</body>
</html>
149 changes: 149 additions & 0 deletions projects.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<title>t-2</title>
<link rel="stylesheet" href="/src/styles.css" />
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.161.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.161.0/examples/jsm/"
}
}
</script>
</head>
<body>
<header>
<a href="index.html" style="text-decoration: none; color: inherit">
<div id="ascii-art2" align="center">
<pre>


▄█ ▄██████▄ ▄████████ ▄█ █▄ ▄██████▄ ▄█ ▄▄▄▄███▄▄▄▄ ▄████████ ███▄▄▄▄
███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███ ███▀▀▀██▄
███ ███ ███ ███ █▀ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▄███▄▄▄ ▄███▄▄▄▄███▄▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ▀▀███▀▀▀ ▀▀███▀▀▀▀███▀ ███ ███ ███ ███ ███ ███ ▀███████████ ███ ███
███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ ███ ███ ███ ███ ███ ███ ███▌ ▄ ███ ███ ███ ███ ███ ███ ███
█▄ ▄███ ▀██████▀ ██████████ ███ █▀ ▀██████▀ █████▄▄██ ▀█ ███ █▀ ███ █▀ ▀█ █▀
▀▀▀▀▀▀ ▀

</pre
>
</div>
</a>
</header>

<script type="module" src="/src/main.js"></script>

<!-- <div class="bulletin2">
<div class="subtitle">Projects</div> -->

<!-- Project 1 -->
<div class="project">
<h2 class="project-title">Content Based Image Retrival System</h2>
<div class="gallery">
<img
src="/imgs/projects/cbir/cbir1.jpg"
alt="Project 1 Image 1"
class="gallery-image"
/>
<img
src="/imgs/projects/cbir/cbir2.jpg"
alt="Project 1 Image 2"
class="gallery-image"
/>
<img
src="/imgs/projects/cbir/cbir3.jpg"
alt="Project 1 Image 3"
class="gallery-image"
/>
<img
src="/imgs/projects/cbir/cbir4.jpg"
alt="Project 1 Image 4"
class="gallery-image"
/>
</div>
<div class="project-description">
<p>This Content-Based Image Retrieval (CBIR) system was developed to explore different techniques for finding similar images based on their visual content rather than metadata. The system implements three different models for image retrieval, each exploring different feature extraction techniques and methodologies.</p>

<p>The first model utilizes a combination of HSV Histograms, Dominant Colours, Gabor Features, and Haralick Features for image analysis. Each feature vector is processed using Euclidean distance calculations to identify similarities between images. The second model builds on this foundation with improved feature extraction methods, including HSV Histograms, Gabor Features, Haralick Features, and HoG Features, originally adapted from a Bag of Words (BoW) approach.</p>

<p>The third and most advanced model leverages the VGG-16 deep learning architecture for feature extraction, demonstrating significantly improved retrieval accuracy over the traditional computer vision approaches. The interface was built using PySimpleGUI, allowing for intuitive selection of models, query images, and parameter adjustments.</p>

<p>This project expanded on concepts explored in my dissertation, particularly focusing on optimization of feature extraction techniques and the integration of deep learning methods for content-based image retrieval.</p>

<p><a href="https://github.com/y2kr/CBIRS" target="_blank">View project on GitHub</a></p>
</div>
</div>

<!-- Project 2 (with no images) -->
<div class="project">
<h2 class="project-title">Project Name 2</h2>
<div class="project-description">
<p>
This is an example of a project without any images. The
description takes up the full width and can be as detailed as
necessary to explain your work.
</p>
<p>
You could include information about the technologies used, your
approach to solving problems, and the impact of your solution.
Even without visual elements, you can effectively communicate the
significance of your project.
</p>
</div>
</div>

<!-- Project 3 -->
<div class="project">
<h2 class="project-title">Project Name 3</h2>
<div class="gallery">
<img
src="/path/to/project3-image1.jpg"
alt="Project 3 Image 1"
class="gallery-image"
/>
<img
src="/path/to/project3-image2.jpg"
alt="Project 3 Image 2"
class="gallery-image"
/>
<img
src="/path/to/project3-image3.jpg"
alt="Project 3 Image 3"
class="gallery-image"
/>
</div>
<div class="project-description">
<p>
Description of Project 3. This could be a brief overview or a more
detailed explanation depending on the complexity and significance
of the project.
</p>
</div>
</div>

<!-- Back to home link -->
<br />
<a href="index.html">> Back to Home</a>
</div>
</div>

<!-- Modal for displaying full-size images -->
<div id="imageModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImg" />
</div>

<script src="/src/modal.js"></script>

<script src="/src/stars.js"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions src/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// Get all gallery images
const images = document.querySelectorAll('.gallery-image');
const modal = document.getElementById('imageModal');
const modalImg = document.getElementById('modalImg');
const closeBtn = document.querySelector('.close');

// Add click event to all images
images.forEach((img) => {
img.addEventListener('click', function () {
modal.style.display = 'flex';
modalImg.src = this.src;

modalImg.style.width = '';
modalImg.style.height = '';
});
});

closeBtn.addEventListener('click', function () {
modal.style.display = 'none';
});

window.addEventListener('click', function (event) {
if (event.target == modal) {
modal.style.display = 'none';
}
});
Loading