commit 09b13fcdc3e2ed8ea41ebf9ddae8e2094c574bac
parent 89e4ea41f37f9855ececd84c514246bbf3f579ef
Author: Jo Young <>
Date: Sun, 15 Feb 2026 21:37:00 +0000
Added image viewing mode
Diffstat:
14 files changed, 82 insertions(+), 17 deletions(-)
diff --git a/img/animals1.avif b/img/animals1.avif
Binary files differ.
diff --git a/img/animals2.avif b/img/animals2.avif
Binary files differ.
diff --git a/img/animals3.avif b/img/animals3.avif
Binary files differ.
diff --git a/img/animals4.avif b/img/animals4.avif
Binary files differ.
diff --git a/img/people1.avif b/img/people1.avif
Binary files differ.
diff --git a/img/people2.avif b/img/people2.avif
Binary files differ.
diff --git a/img/people3.avif b/img/people3.avif
Binary files differ.
diff --git a/img/people4.avif b/img/people4.avif
Binary files differ.
diff --git a/placeholder.avif b/img/placeholder.avif
Binary files differ.
diff --git a/img/profile.avif b/img/profile.avif
Binary files differ.
diff --git a/img/profile_base.avif b/img/profile_base.avif
Binary files differ.
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
</nav>
<main>
<div class=tabcontent id=about>
- <img class=profile-image src="placeholder.avif" width=200 height=200>
+ <img class=profile-image src="img/profile.avif" width=200 height=200>
<p class=about>
I'd just like to interject for a moment. What you're refering to as Linux, is in fact, GNU/Linux, or as I've recently taken to calling it, GNU plus Linux. Linux is not an operating system unto itself, but rather another free component of a fully functioning GNU system made useful by the GNU corelibs, shell utilities and vital system components comprising a full OS as defined by POSIX.<br>Many computer users run a modified version of the GNU system every day, without realizing it. Through a peculiar turn of events, the version of GNU which is widely used today is often called Linux, and many of its users are not aware that it is basically the GNU system, developed by the GNU Project.<br>There really is a Linux, and these people are using it, but it is just a part of the system they use. Linux is the kernel: the program in the system that allocates the machine's resources to the other programs that you run. The kernel is an essential part of an operating system, but useless by itself; it can only function in the context of a complete operating system. Linux is normally used in combination with the GNU operating system: the whole system is basically GNU with Linux added, or GNU/Linux. All the so-called Linux distributions are really distributions of GNU/Linux!
@@ -33,26 +33,62 @@
</div>
<div class=tabcontent id=animals>
<div class=art-grid>
- <img src=img/civ_001.avif>
- <img src=img/gun.avif>
- <img src=img/operetka.avif>
- <img src=img/boris_grishenko.avif>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/animals1.avif>
+ <p class=hidden><b>Frogs</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/animals2.avif>
+ <p class=hidden><b>Mice</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/animals3.avif>
+ <p class=hidden><b>Sleeping cat</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/animals4.avif>
+ <p class=hidden><b>Mouse</b><br>*/*/26</p>
+ </a>
</div>
</div>
<div class=tabcontent id=people>
<div class=art-grid>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/people1.avif>
+ <p class=hidden><b>Fairy?</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/people2.avif>
+ <p class=hidden><b>Raincoat person</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/people3.avif>
+ <p class=hidden><b>Fancy person</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/people4.avif>
+ <p class=hidden><b>Dancing person</b><br>*/*/26</p>
+ </a>
</div>
</div>
<div class=tabcontent id=sketches>
<div class=art-grid>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
- <img src=placeholder.avif>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/placeholder.avif>
+ <p class=hidden><b>Placeholder</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/placeholder.avif>
+ <p class=hidden><b>Placeholder</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/placeholder.avif>
+ <p class=hidden><b>Placeholder</b><br>*/*/26</p>
+ </a>
+ <a onclick="artView(event)" class=art-image>
+ <img class=view-small src=img/placeholder.avif>
+ <p class=hidden><b>Placeholder</b><br>*/*/26</p>
+ </a>
</div>
</div>
</main>
diff --git a/script.js b/script.js
@@ -1,5 +1,29 @@
+function artView(evt) {
+ evt.currentTarget.onclick = function() { artReturn(event) };
+ evt.currentTarget.getElementsByTagName('img')[0].className = "view-full";
+ evt.currentTarget.getElementsByTagName('p')[0].className = "";
+ var images = evt.currentTarget.parentElement.children;
+ for (var i=0;i<images.length;i++) {
+ if (images[i] != evt.currentTarget) {
+ images[i].className = "hidden";
+ }
+ }
+}
+function artReturn(evt) {
+ evt.currentTarget.onclick = function() { artView(event) };
+ evt.currentTarget.getElementsByTagName('img')[0].className = "view-small";
+ evt.currentTarget.getElementsByTagName('p')[0].className = "hidden";
+ var images = evt.currentTarget.parentElement.children;
+ for (var i=0;i<images.length;i++) {
+ if (images[i] != evt.currentTarget) {
+ images[i].className = "view-small";
+ /*console.log(images[i].src);*/
+ }
+ }
+}
+
function openTab(evt, target) {
- var i,tabcontent,tablinks;
+ var tabcontent,tablinks;
var url = location.pathname;
var params=new URLSearchParams(window.location.search);
@@ -8,12 +32,12 @@ function openTab(evt, target) {
window.history.pushState('N', 'N', url+'?'+params)
tabcontent=document.getElementsByClassName("tabcontent");
- for (i=0;i<tabcontent.length;i++){
+ for (var i=0;i<tabcontent.length;i++){
tabcontent[i].style.display="none";
}
tablinks=document.getElementsByClassName("nav-item");
- for (i=0;i<tablinks.length;i++){
+ for (var i=0;i<tablinks.length;i++){
tablinks[i].className="nav-item";
}
diff --git a/stylesheet.css b/stylesheet.css
@@ -34,7 +34,7 @@ body {
width: max(80vw, 100px);
} .art-grid {
text-align: center;
-} .art-grid img {
+} .art-grid .view-small {
width: 400px;
height: 400px;
max-width: 75vw;
@@ -43,6 +43,11 @@ body {
max-width: 75vw;
padding: 10px;
object-fit: cover;
+} .view-full {
+ width: 100%;
+ object-fit: fill;
+} .hidden {
+ display: none;
} footer {
padding: 5px;
background-color: var(--primary-bg-color);
