iona_portfolio

commit 22ad43b645ad6a27ddbc5e7d4678a3d32f737cc5
parent 53c57d0cc3b7dc756387e5b7c7b928e6d06be313
Author: Jo Young <>
Date:   Mon, 16 Feb 2026 14:19:28 +0000

- Added zoom animation to images on hover
- Made image view reset when changing tabs
- Fixed nav-items not changing class when loading in for first time

Diffstat:
M
script.js
 | 
21
++++++++++++++++++---
M
stylesheet.css
 | 
8
++++++--

2 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/script.js b/script.js
@@ -29,10 +29,19 @@ function setDefaultParam(target) {
 	params.append('default', target)
 	window.history.pushState('N', 'N', url+'?'+params)
 }
-function openTab(evt, target, useHistory=true) {
+
+function unfocusImage() {
+	var image = document.getElementsByClassName('view-full')[0];
+	if (image) {
+		image.parentElement.click();
+	}
+}
+
+function openTab(evt, target, useHistory=true, unfocus=true) {
 	var tabcontent,tablinks;
 
 	if (useHistory == true) { setDefaultParam(target); }
+	if (unfocus == true) { unfocusImage(); }
 
 	tabcontent=document.getElementsByClassName("tabcontent");
 	for (var i=0;i<tabcontent.length;i++){
@@ -45,14 +54,20 @@ function openTab(evt, target, useHistory=true) {
 	}
 
 	document.getElementById(target).style.display = "grid";
-	if (evt != null) { evt.currentTarget.className+=" nav-item-active"; }
+	if (evt != null) {
+		if (typeof evt == "string") {
+			document.getElementById("nav-item-"+evt).className += " nav-item-active";
+		} else {
+			evt.currentTarget.className+=" nav-item-active";
+		}
+	}
 }
 
 var defaultTab;
 function loadDefault() {
 	defaultTab=new URLSearchParams(window.location.search).get('default');
 	if (!(['about','animals','people','sketches'].includes(defaultTab))){defaultTab='about';}
-	openTab(null, defaultTab, false);
+	openTab(defaultTab, defaultTab, false, false);
 	/*document.getElementById("nav-item-".concat(defaultTab)).click();*/
 }
 window.onpopstate = loadDefault;
diff --git a/stylesheet.css b/stylesheet.css
@@ -11,7 +11,7 @@ body {
 	padding-right: 30px;
 } .nav {
 	margin: auto;
-	width 80vw;
+	width: 80vw;
 	display: flex;
 	flex-direction: row;
 } .nav-item {
@@ -39,10 +39,14 @@ body {
 	height: 400px;
 	max-width: 75vw;
 	max-height: 75vw;
-	image-rendering: pixelated;
 	max-width: 75vw;
 	padding: 10px;
 	object-fit: cover;
+
+	transition: transform .2s;
+	transform: scale(1.0);
+} .view-small:hover {
+	transform: scale(1.1);
 } .view-full {
 	width: 100%;
 	object-fit: fill;