add photography
This commit is contained in:
parent
ebcbc7b14e
commit
2a8f919cc0
29
about.html
Normal file
29
about.html
Normal 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>
|
||||||
@ -1,8 +1,7 @@
|
|||||||
.overlay-container {
|
.overlay-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 1080px;
|
text-align: center;
|
||||||
margin-left: auto;
|
width: 100%;
|
||||||
margin-right: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay-container .image {
|
.overlay-container .image {
|
||||||
|
|||||||
@ -7,9 +7,15 @@ h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin-left: 16px;
|
min-height: 100vh;
|
||||||
margin-right: 16px;
|
max-width: 100vw;
|
||||||
width: calc(100% - 16px - 16px);
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding-left: 32px;
|
||||||
|
padding-right: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@ -34,6 +40,6 @@ nav a {
|
|||||||
font-size: larger;
|
font-size: larger;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
nav a[aria-current="page"] {
|
||||||
text-align: center;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
33
index.html
33
index.html
@ -7,19 +7,37 @@
|
|||||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
<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/style.css" type="text/css">
|
||||||
<link rel="stylesheet" href="css/overlay.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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
|
<h1><b><a aria-label="Arthur Lu" href="https://root.tronnet.net" class="site-header">ARTHUR LU</a></b></h1>
|
||||||
<nav>
|
<nav>
|
||||||
<a aria-current="page" aria-label="Projects" href="index.html">PROJECTS</a>
|
<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="About Me" href="about.html">ABOUT ME</a>
|
||||||
|
<a aria-label="Notes" href="notes.html">CLASS NOTES</a>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<figure class="overlay-container">
|
<figure class="overlay-container project">
|
||||||
<img src="projects/pico_bmc.jpg" alt="" class="image">
|
<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">
|
<figcaption class="overlay-mask">
|
||||||
<a href="" class="overlay-content">
|
<a href="" class="overlay-content">
|
||||||
<h2>Pico BMC</h2>
|
<h2>Pico BMC</h2>
|
||||||
@ -27,6 +45,15 @@
|
|||||||
</a>
|
</a>
|
||||||
</figcaption>
|
</figcaption>
|
||||||
</figure>
|
</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>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
64
notes.html
64
notes.html
@ -5,54 +5,70 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Class Notes - Arthur Lu</title>
|
<title>Class Notes - Arthur Lu</title>
|
||||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
<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>
|
</head>
|
||||||
<body>
|
<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>
|
<main>
|
||||||
<h1>Class Notes</h1>
|
<h1>Class Notes</h1>
|
||||||
<section>
|
<section>
|
||||||
<h2>CSE</h2>
|
<h2>CSE</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/CSE 20.pdf" download>CSE 20 - Discrete Mathematics</a></li>
|
<li><a href = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 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>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>ECE</h2>
|
<h2>ECE</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/ECE 35.pdf" download>ECE 35 - Introduction to Analog Design</a></li>
|
<li><a href = "resources/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 = "resources/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 = "resources/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 = "resources/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 = "resources/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 111.pdf" download>ECE 111 - Advanced Digital Design Project</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>MATH</h2>
|
<h2>MATH</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href = "notes/MATH 18.pdf" download>MATH 18 - Linear Algebra</a></li>
|
<li><a href = "resources/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 = "resources/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 = "resources/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 20D.pdf" download>MATH 20D - Introduction to Differential Equations</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>PHYS</h2>
|
<h2>PHYS</h2>
|
||||||
<ul>
|
<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>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer>© 2023 - Arthur Lu</footer>
|
<footer>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
64
photography.html
Normal file
64
photography.html
Normal 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
1
photography/css
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../css/
|
||||||
51
photography/nature.html
Normal file
51
photography/nature.html
Normal 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
51
photography/nature2.html
Normal 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
1
photography/resources
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../resources/
|
||||||
1
photography/scripts
Symbolic link
1
photography/scripts
Symbolic link
@ -0,0 +1 @@
|
|||||||
|
../scripts/
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 427 KiB |
1
resources/icon/email.svg
Normal file
1
resources/icon/email.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 385 B |
1
resources/icon/favicon.svg
Normal file
1
resources/icon/favicon.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 438 B |
1
resources/icon/github.svg
Normal file
1
resources/icon/github.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
resources/notes/CSE 100.pdf
Normal file
BIN
resources/notes/CSE 100.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 101.pdf
Normal file
BIN
resources/notes/CSE 101.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 110.pdf
Normal file
BIN
resources/notes/CSE 110.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 120.pdf
Normal file
BIN
resources/notes/CSE 120.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 127.pdf
Normal file
BIN
resources/notes/CSE 127.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 134B.pdf
Normal file
BIN
resources/notes/CSE 134B.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 140.pdf
Normal file
BIN
resources/notes/CSE 140.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 141.pdf
Normal file
BIN
resources/notes/CSE 141.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 151A.pdf
Normal file
BIN
resources/notes/CSE 151A.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 151B.pdf
Normal file
BIN
resources/notes/CSE 151B.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 152A.pdf
Normal file
BIN
resources/notes/CSE 152A.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 158.pdf
Normal file
BIN
resources/notes/CSE 158.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 167.pdf
Normal file
BIN
resources/notes/CSE 167.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 20.pdf
Normal file
BIN
resources/notes/CSE 20.pdf
Normal file
Binary file not shown.
BIN
resources/notes/CSE 21.pdf
Normal file
BIN
resources/notes/CSE 21.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 101.pdf
Normal file
BIN
resources/notes/ECE 101.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 109.pdf
Normal file
BIN
resources/notes/ECE 109.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 111.pdf
Normal file
BIN
resources/notes/ECE 111.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 35.pdf
Normal file
BIN
resources/notes/ECE 35.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 45.pdf
Normal file
BIN
resources/notes/ECE 45.pdf
Normal file
Binary file not shown.
BIN
resources/notes/ECE 65.pdf
Normal file
BIN
resources/notes/ECE 65.pdf
Normal file
Binary file not shown.
BIN
resources/notes/MATH 18.pdf
Normal file
BIN
resources/notes/MATH 18.pdf
Normal file
Binary file not shown.
BIN
resources/notes/MATH 20C.pdf
Normal file
BIN
resources/notes/MATH 20C.pdf
Normal file
Binary file not shown.
BIN
resources/notes/MATH 20D.pdf
Normal file
BIN
resources/notes/MATH 20D.pdf
Normal file
Binary file not shown.
BIN
resources/notes/MatLab.pdf
Normal file
BIN
resources/notes/MatLab.pdf
Normal file
Binary file not shown.
BIN
resources/notes/PHYS 2C.pdf
Normal file
BIN
resources/notes/PHYS 2C.pdf
Normal file
Binary file not shown.
BIN
resources/photography/nature/1.jpg
Normal file
BIN
resources/photography/nature/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
BIN
resources/photography/nature/2.jpg
Normal file
BIN
resources/photography/nature/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 MiB |
BIN
resources/photography/nature/3.jpg
Normal file
BIN
resources/photography/nature/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
BIN
resources/photography/nature/4.jpg
Normal file
BIN
resources/photography/nature/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 MiB |
BIN
resources/photography/nature/5.jpg
Normal file
BIN
resources/photography/nature/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 MiB |
BIN
resources/photography/nature/6.jpg
Normal file
BIN
resources/photography/nature/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
BIN
resources/photography/nature2/1.jpg
Normal file
BIN
resources/photography/nature2/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 MiB |
BIN
resources/photography/nature2/2.jpg
Normal file
BIN
resources/photography/nature2/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 MiB |
BIN
resources/photography/nature2/3.jpg
Normal file
BIN
resources/photography/nature2/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
BIN
resources/photography/nature2/4.jpg
Normal file
BIN
resources/photography/nature2/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
resources/photography/nature2/5.jpg
Normal file
BIN
resources/photography/nature2/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
BIN
resources/photography/nature2/6.jpg
Normal file
BIN
resources/photography/nature2/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 MiB |
BIN
resources/projects/pico_bmc.jpg
Normal file
BIN
resources/projects/pico_bmc.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
resources/projects/proxmoxaas.jpg
Normal file
BIN
resources/projects/proxmoxaas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
resources/projects/wfajs.jpg
Normal file
BIN
resources/projects/wfajs.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
70
scripts/ModalImage.js
Normal file
70
scripts/ModalImage.js
Normal 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">×</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);
|
||||||
Loading…
Reference in New Issue
Block a user