alu/personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add photography

Browse Source
This commit is contained in:
Arthur Lu 2024-10-07 21:42:25 +00:00
parent ebcbc7b14e
commit 2a8f919cc0
57 changed files with 354 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
about.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Projects - Arthur Lu</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-label="Projects" href="index.html">PROJECTS</a>
<a aria-label="Photography" href="photography.html">PHOTOGRAPHY</a>
<a aria-current="page" aria-label="About Me" href="about.html">ABOUT ME</a>
<a aria-label="Notes" href="notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<p></p>
<img>
</main>
<footer>
</footer>
</body>
</html>

5
css/overlay.css
View File

@ -1,8 +1,7 @@
.overlay-container {
position: relative;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.overlay-container .image {

16
css/style.css
View File

@ -7,9 +7,15 @@ h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
}
body {
margin-left: 16px;
margin-right: 16px;
width: calc(100% - 16px - 16px);
min-height: 100vh;
max-width: 100vw;
display: grid;
grid-template-rows: auto 1fr auto;
}
main {
padding-left: 32px;
padding-right: 32px;
}
header {
@ -34,6 +40,6 @@ nav a {
font-size: larger;
}
main {
text-align: center;
nav a[aria-current="page"] {
text-decoration: underline;
}

33
index.html
View File

@ -7,19 +7,37 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="images/favicon.svg">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
<style>
.project {
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-current="page" aria-label="Projects" href="index.html">PROJECTS</a>
<a aria-label="Photography" href="photography.html">PHOTOGRAPHY</a>
<a aria-label="About Me" href="about.html">ABOUT ME</a>
<a aria-label="Notes" href="notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<figure class="overlay-container">
<img src="projects/pico_bmc.jpg" alt="" class="image">
<figure class="overlay-container project">
<img src="resources/projects/proxmoxaas.jpg" alt="" class="image">
<figcaption class="overlay-mask">
<a href="" class="overlay-content">
<h2>ProxmoxAAS</h2>
<p>User self-managed VPS platform based on Proxmox hypervisor.</p>
</a>
</figcaption>
</figure>
<figure class="overlay-container project">
<img src="resources/projects/pico_bmc.jpg" alt="" class="image">
<figcaption class="overlay-mask">
<a href="" class="overlay-content">
<h2>Pico BMC</h2>
@ -27,6 +45,15 @@
</a>
</figcaption>
</figure>
<figure class="overlay-container project">
<img src="resources/projects/wfajs.jpg" alt="" class="image">
<figcaption class="overlay-mask">
<a href="" class="overlay-content">
<h2>WFA-JS</h2>
<p>Implement Wavefront Alignment algorithm in JavaScript.</p>
</a>
</figcaption>
</figure>
</main>
<footer>
</footer>

64
notes.html
View File

@ -5,54 +5,70 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Notes - Arthur Lu</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="styles/style.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-label="Projects" href="index.html">PROJECTS</a>
<a aria-label="Photography" href="photography.html">PHOTOGRAPHY</a>
<a aria-label="About Me" href="about.html">ABOUT ME</a>
<a aria-current="page" aria-label="Notes" href="notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<h1>Class Notes</h1>
<section>
<h2>CSE</h2>
<ul>
<li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
<li><a href = "notes/CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li>
<li><a href = "notes/CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li>
<li><a href = "notes/CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li>
<li><a href = "notes/CSE 110.pdf" download>CSE 110 - Software Engineering</a></li>
<li><a href = "notes/CSE 120.pdf" download>CSE 120 - Principles of Computer Operating Systems</a></li>
<li><a href = "notes/CSE 127.pdf" download>CSE 127 - Intro to Computer Security</a></li>
<li><a href = "notes/CSE 134B.pdf" download>CSE 134B - Web Client Languages</a></li>
<li><a href = "notes/CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li>
<li><a href = "notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
<li><a href = "notes/CSE 167.pdf" download>CSE 167 - Computer Graphics</a></li>
<li><a href = "resources/notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
<li><a href = "resources/notes/CSE 21.pdf" download>CSE 21 - Mathematics for Algorithms and Systems</a></li>
<li><a href = "resources/notes/CSE 100.pdf" download>CSE 100 - Advanced Data Structures & C++</a></li>
<li><a href = "resources/notes/CSE 101.pdf" download>CSE 101 - Design and Analysis of Algorithms</a></li>
<li><a href = "resources/notes/CSE 110.pdf" download>CSE 110 - Software Engineering</a></li>
<li><a href = "resources/notes/CSE 120.pdf" download>CSE 120 - Principles of Computer Operating Systems</a></li>
<li><a href = "resources/notes/CSE 127.pdf" download>CSE 127 - Intro to Computer Security</a></li>
<li><a href = "resources/notes/CSE 134B.pdf" download>CSE 134B - Web Client Languages</a></li>
<li><a href = "resources/notes/CSE 140.pdf" download> CSE 140 - Components and Design Techniques for Digital Systems </a></li>
<li><a href = "resources/notes/CSE 141.pdf" download> CSE 141 - Introduction to Computer Architecture </a></li>
<li><a href = "resources/notes/CSE 151A.pdf" download> CSE 151A - Intro to Machine Learning </a></li>
<li><a href = "resources/notes/CSE 151B.pdf" download> CSE 151B - Deep Learning </a></li>
<li><a href = "resources/notes/CSE 152A.pdf" download> CSE 152A - Introduction to Computer Vision </a></li>
<li><a href = "resources/notes/CSE 158.pdf" download> CSE 158 - Recommender Systems </a></li>
<li><a href = "resources/notes/CSE 167.pdf" download>CSE 167 - Computer Graphics</a></li>
</ul>
</section>
<section>
<h2>ECE</h2>
<ul>
<li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
<li><a href = "notes/ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li>
<li><a href = "notes/ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li>
<li><a href = "notes/ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li>
<li><a href = "notes/ECE 109.pdf" download>ECE 109 - Engineering Probability and Statistics</a></li>
<li><a href = "notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
<li><a href = "resources/notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
<li><a href = "resources/notes/ECE 45.pdf" download>ECE 45 - Circuits & Systems</a></li>
<li><a href = "resources/notes/ECE 65.pdf" download>ECE 65 - Components & Circuits Laboratory</a></li>
<li><a href = "resources/notes/ECE 101.pdf" download>ECE 101 - Linear Systems Fundamentals</a></li>
<li><a href = "resources/notes/ECE 109.pdf" download>ECE 109 - Engineering Probability and Statistics</a></li>
<li><a href = "resources/notes/ECE 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
</ul>
</section>
<section>
<h2>MATH</h2>
<ul>
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
<li><a href = "notes/MatLab.pdf" download>MatLab for Math 18</a></li>
<li><a href = "notes/MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li>
<li><a href = "notes/MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
<li><a href = "resources/notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
<li><a href = "resources/notes/MatLab.pdf" download>MatLab for Math 18</a></li>
<li><a href = "resources/notes/MATH 20C.pdf" download>MATH 20C - Calculus and Analytic Geometry</a></li>
<li><a href = "resources/notes/MATH 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
</ul>
</section>
<section>
<h2>PHYS</h2>
<ul>
<li><a href = "notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
<li><a href = "resources/notes/PHYS 2C.pdf" download>PHYS 2C - Fluids, Waves, Thermodynamics, and Optics</a></li>
</ul>
</section>
</main>
<footer>&copy; 2023 - Arthur Lu</footer>
<footer>
</footer>
</body>
</html>

64
photography.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photography - Arthur Lu</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
<style>
#galleries-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
.gallery {
max-width: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-label="Projects" href="index.html">PROJECTS</a>
<a aria-current="page" aria-label="Photography" href="photography.html">PHOTOGRAPHY</a>
<a aria-label="About Me" href="about.html">ABOUT ME</a>
<a aria-label="Notes" href="notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<div id="galleries-container">
<figure class="overlay-container gallery">
<img src="resources/photography/nature/1.jpg" alt="" class="image">
<figcaption class="overlay-mask">
<a href="photography/nature.html" class="overlay-content">
<h2>Nature</h2>
<p>Classical nature photography.</p>
</a>
</figcaption>
</figure>
<figure class="overlay-container gallery">
<img src="resources/photography/nature2/1.jpg" alt="" class="image">
<figcaption class="overlay-mask">
<a href="photography/nature2.html" class="overlay-content">
<h2>Nature 2</h2>
<p>If nature is so good, why isn't there nature 2?</p>
</a>
</figcaption>
</figure>
</div>
</main>
<footer>
</footer>
</body>
</html>

1
photography/css Symbolic link
View File

@ -0,0 +1 @@
../css/

51
photography/nature.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photography - Arthur Lu</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
<script src="scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-label="Projects" href="../index.html">PROJECTS</a>
<a aria-current="page" aria-label="Photography" href="../photography.html">PHOTOGRAPHY</a>
<a aria-label="About Me" href="../about.html">ABOUT ME</a>
<a aria-label="Notes" href="../notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<div id="gallery-container">
<modal-image class="photo" src="resources/photography/nature/1.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature/2.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature/3.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature/4.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature/5.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature/6.jpg", alt=""></modal-image>
</div>
</main>
<footer>
</footer>
</body>
</html>

51
photography/nature2.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photography - Arthur Lu</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/overlay.css" type="text/css">
<link rel="icon" type="image/x-icon" href="resources/icon/favicon.svg">
<script src="scripts/ModalImage.js" type="module"></script>
<style>
#gallery-container {
display: grid;
grid-template-columns: auto auto;
column-gap: 16px;
row-gap: 16px;
margin-top: 1em;
margin-bottom: 1em;
}
#gallery-container modal-image {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<header>
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
<nav>
<a aria-label="Projects" href="../index.html">PROJECTS</a>
<a aria-current="page" aria-label="Photography" href="../photography.html">PHOTOGRAPHY</a>
<a aria-label="About Me" href="../about.html">ABOUT ME</a>
<a aria-label="Notes" href="../notes.html">CLASS NOTES</a>
</nav>
</header>
<main>
<div id="gallery-container">
<modal-image class="photo" src="resources/photography/nature2/1.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature2/2.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature2/3.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature2/4.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature2/5.jpg", alt=""></modal-image>
<modal-image class="photo" src="resources/photography/nature2/6.jpg", alt=""></modal-image>
</div>
</main>
<footer>
</footer>
</body>
</html>

1
photography/resources Symbolic link
View File

@ -0,0 +1 @@
../resources/

1
photography/scripts Symbolic link
View File

@ -0,0 +1 @@
../scripts/

BIN
projects/pico_bmc.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 427 KiB

1
resources/icon/email.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><path d="M0 1694.235h1920V226H0v1468.235zM112.941 376.664V338.94H1807.06v37.723L960 1111.233l-847.059-734.57zM1807.06 526.198v950.513l-351.134-438.89-88.32 70.475 378.353 472.998H174.042l378.353-472.998-88.32-70.475-351.134 438.89V526.198L960 1260.768l847.059-734.57z" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 385 B

1
resources/icon/favicon.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g fill="none" stroke="#000" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"><path d="M49.617 208S80 208 96 192M96 192s16 16 32 16M206.383 208S176 208 160 192M160 192s-16 16-32 16M128 48c32 0 48 16 48 64 0 40-32 64-48 64M128 48c-32 0-48 16-48 64 0 40 32 64 48 64M160 192l-7.416-27.677M96 192l7.416-27.677"/><circle cx="128" cy="128" r="111.999"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

1
resources/icon/github.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path fill="none" d="M0-192h1280v800H0z"/><path d="M32.029 8.345C18.759 8.345 8 19.104 8 32.378c0 10.617 6.885 19.624 16.435 22.803 1.202.22 1.64-.522 1.64-1.16 0-.569-.02-2.081-.032-4.086-6.685 1.452-8.095-3.222-8.095-3.222-1.093-2.775-2.669-3.514-2.669-3.514-2.182-1.492.165-1.462.165-1.462 2.412.171 3.681 2.477 3.681 2.477 2.144 3.672 5.625 2.611 6.994 1.997.219-1.553.838-2.612 1.526-3.213-5.336-.606-10.947-2.669-10.947-11.877 0-2.623.937-4.769 2.474-6.449-.247-.608-1.072-3.051.235-6.36 0 0 2.018-.646 6.609 2.464 1.917-.533 3.973-.8 6.016-.809 2.041.009 4.097.276 6.017.809 4.588-3.11 6.602-2.464 6.602-2.464 1.311 3.309.486 5.752.239 6.36 1.54 1.68 2.471 3.826 2.471 6.449 0 9.232-5.62 11.263-10.974 11.858.864.742 1.632 2.208 1.632 4.451 0 3.212-.029 5.804-.029 6.591 0 .644.432 1.392 1.652 1.157 9.542-3.185 16.421-12.186 16.421-22.8 0-13.274-10.76-24.033-24.034-24.033" fill="#010101"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
resources/notes/CSE 100.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 101.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 110.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 120.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 127.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 134B.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 140.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 141.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 151A.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 151B.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 152A.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 158.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 167.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 20.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/CSE 21.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 101.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 109.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 111.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 35.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 45.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/ECE 65.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/MATH 18.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/MATH 20C.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/MATH 20D.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/MatLab.pdf Normal file
View File

Binary file not shown.

BIN
resources/notes/PHYS 2C.pdf Normal file
View File

Binary file not shown.

BIN
resources/photography/nature/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB

BIN
resources/photography/nature/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 MiB

BIN
resources/photography/nature/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 MiB

BIN
resources/photography/nature/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 MiB

BIN
resources/photography/nature/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 MiB

BIN
resources/photography/nature/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 MiB

BIN
resources/photography/nature2/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 MiB

BIN
resources/photography/nature2/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 MiB

BIN
resources/photography/nature2/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 MiB

BIN
resources/photography/nature2/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB

BIN
resources/photography/nature2/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 MiB

BIN
resources/photography/nature2/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 MiB

BIN
resources/projects/pico_bmc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
resources/projects/proxmoxaas.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
resources/projects/wfajs.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

70
scripts/ModalImage.js Normal file
View File

@ -0,0 +1,70 @@
class ModalImage extends HTMLElement {
#src = null
#alt = null
#imgElem = null
constructor () {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
dialog {
border: none;
padding: 0;
background-color: rgba(0,0,0,0);
}
dialog img {
max-width: 100%;
max-height: 100%;
}
dialog #dialog-content {
max-width: 90%;
margin: auto;
background-color: white;
padding: 1em;
}
dialog #close {
cursor: pointer;
}
img {
max-width: 100%;
max-height: 100%;
}
</style>
<img>
`;
this.#imgElem = this.shadowRoot.querySelector("img");
this.#imgElem.onclick = this.modalZoom.bind(this);
}
connectedCallback() {
const src = this.getAttribute("src");
const alt = this.getAttribute("alt");
this.#src = src;
this.#alt = alt;
this.#imgElem.src = src;
this.#imgElem.alt = alt;
}
modalZoom () {
const modalBox = document.createElement("dialog");
modalBox.innerHTML = `
<div id="dialog-content">
<button id="close">&times;</button>
<img src="${this.#src}" alt="${this.#alt}">
<div>${this.#alt}</div>
<div>
`;
this.shadowRoot.appendChild(modalBox);
modalBox.showModal();
modalBox.querySelector("#close").onclick = (e) => {
e.preventDefault();
modalBox.close();
modalBox.parentElement.removeChild(modalBox)
}
}
}
customElements.define("modal-image", ModalImage);