-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
74 lines (70 loc) · 3.88 KB
/
gallery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gallery</title>
<link href="styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<nav class="topnav" role="navigation">
<ul>
<li nav aria-current=page>
<a id="home" aria-haspopup="true" aria-expanded="false" href="index.html" tabindex="0">Home▽</a>
<ul id="home-pulldown" class="project-pulldown">
<li nav aria-current=page><a href="gallery.html">Art Gallery</a></li>
<li><a href="https://dl.acm.org/doi/10.1145/3494991">FaceBit Paper</a></li>
<li><a href="https://dl.acm.org/doi/10.1145/3560905.3568561">Protean Paper</a></li>
<li><a href="ppg.html">PPG Processing</a></li>
<li><a href="project2.html">JS Ray Tracer</a></li>
<li><a href="datavisualization.html">Data Visualization</a></li>
</ul>
</li>
<li><a href="resume.html">Resume</a></li>
<li><a href="biography.html">Biography</a></li>
<li><a id="contact" aria-haspopup="true" aria-expanded="false" tabindex="0">Contact▽</a>
<ul id="contact-pulldown" class="pulldown">
<li>jasonhuang2023[at]u[dot]northwestern[dot]edu</li>
<li><a href="https://github.com/jjh9397/">Github</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<article class="brick-container-container" aria-labelledby="gallery" role="article">
<h1 id="gallery">Art Gallery</h1>
<p>
This project lays out images in a visually appealing way to create an artwork gallery. I was searching for a way to present my
artwork in a minimal and visually appealing way, and created this web gallery using HTML and CSS to display my art.
This tool works by using flexbox display to resize and fit images into rows.
</p>
<p>
Beyond the HTML/CSS used to build this website, I hope that this small gallery also demonstrates the many skills I developed as I
taught myself art. Since I did not have a teacher or mentor, I had to search for and experiment with different methods of learning.
While I started the hobby just for fun, the experience of self guided learning made me better at finding and addressing my own weaknesses,
and has carried over into improving the way I learn everything else.
</p>
<div class="brick-container">
<figure class="brick"><img src="images/(3).png" alt="back anatomy sketches"></figure>
<figure class="brick"><img src="images/(5).png" alt="skeleton sketches, front and side view"></figure>
<figure class="brick"><img src="images/back.jpg" alt="back skeleton and muscle sketch"></figure>
<figure class="brick"><img src="images/03-28-2022.png" alt="painting of maid holding two swords">
</figure>
<figure class="brick"><img src="images/01-16-2022.png" alt="painting of elf wearing a red cloak">
</figure>
<figure class="brick"><img src="images/5-8-2021.jpg" alt="painting of old man"></figure>
<figure class="brick"><img src="images/05-24-2022.png" alt="sketch of two fencers"></figure>
<figure class="brick"><img src="images/5-27-2021.png" alt="portrait painting of a woman"></figure>
<figure class="brick"><img src="images/9-9-2021.jpg"
alt="painting of a woman holding a fan in a red chinese dress"></figure>
<figure class="brick"><img src="images/9-6-2021-2.jpg" alt="sketch of a figure playing a red guitar">
</figure>
<figure class="brick"><img src="images/8-23-21-2.png" alt="sketch of three figures conversing"></figure>
<figure class="brick"><img src="images/torsos.png"
alt="sketches of a torso rotated and drawn from various angles"></figure>
</div>
</article>
</main>
<script src="scripts/main.js"></script>
</body>
</html>