hwilliams/hwilliams-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated projects display; simplified for mobile

Browse Source
This commit is contained in:
Hunter W.
2026-06-02 16:16:50 -04:00
parent 3f17cf9094
commit 39a056db25
6 changed files with 170 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/SimpleGallery.tsx
View File

@@ -1,6 +1,8 @@
import Image from "next/image";
import { useState, useEffect, useRef, useCallback } from "react";
import { createPortal } from "react-dom";
import '@/styles/gallery.css';
type Props = {
images: string[];
@@ -32,7 +34,6 @@ export default function SimpleGallery({
function handleEnlarge() {
if (enlargeLevel === 0) {
setEnlargeLevel(1);
} else if (enlargeLevel === 1) {
setEnlargeLevel(2);
}
@@ -57,26 +58,13 @@ export default function SimpleGallery({
function expandButton() {
return (
<button
onClick={handleEnlarge}
title="Enlarge image"
className="gallery-action-button"
style={{
position: "absolute",
bottom: 8,
right: 8,
width: 28,
height: 28,
borderRadius: 4,
border: "none",
background: "rgba(0,0,0,0.55)",
color: "#fff",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
backdropFilter: "blur(4px)",
transition: "background 0.15s ease",
}}
top: 8,
right: 8
}}
onClick={handleEnlarge}
title="Enlarge image"
onMouseEnter={(e) =>
(e.currentTarget.style.background = "rgba(0,0,0,0.8)")
}
@@ -97,27 +85,13 @@ export default function SimpleGallery({
function shrinkButton() {
return (
<button
onClick={handleShrink}
title="Shrink image"
className="gallery-action-button"
style={{
position: "absolute",
top: 8,
right: 8,
width: 28,
height: 28,
borderRadius: 4,
border: "none",
background: "rgba(0,0,0,0.55)",
color: "#fff",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
backdropFilter: "blur(4px)",
zIndex: 1001,
transition: "background 0.15s ease",
bottom: 8,
right: 8
}}
onClick={handleShrink}
title="Shrink image"
onMouseEnter={(e) =>
(e.currentTarget.style.background = "rgba(0,0,0,0.8)")
}