-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdigital.html
More file actions
171 lines (148 loc) · 9.76 KB
/
digital.html
File metadata and controls
171 lines (148 loc) · 9.76 KB
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html id="digital">
<head>
<!-- TAB SHIT -->
<link rel="shortcut icon" href="images/aj.png?v=2">
<title>Anna Jiang</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="uikit-3.5.7/css/uikit.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.7/dist/js/uikit-icons.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page"> -->
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&family=Mukta&display=swap" rel="stylesheet">
</head>
<body id="digital">
<header>
<!-- DESKTOP NAV -->
<div id="navbar-desktop">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li>
<a href="index.html#portfolio">PORTFOLIO</a>
<div class="uk-navbar-dropdown" uk-drop="animation: uk-animation-slide-top-small; duration: 500;">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li class="uk-active"><a href="digital.html">DIGITAL</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- MOBILE NAV -->
<div id="navbar-mobile">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar="mode: click; boundary-align: true; align: center; dropbar: true">
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="index.html">HOME</a></li>
<li><a href="index.html#about">ABOUT</a></li>
<li><a href="index.html#demo-reel">DEMO REEL</a></li>
<li><a href="index.html#portfolio">PORTFOLIO</a></li>
<li class="uk-nav-divider"></li>
<div class = "sublink">
<li><a href="traditional.html">TRADITIONAL</a></li>
<li class="uk-active"><a href="digital.html">DIGITAL</a></li>
<li><a href="design.html">DESIGN</a></li>
<li><a href="modeling.html">3D MODELING</a></li>
<li><a href="animation.html">ANIMATION</a></li>
<li><a href="labs.html">PENN LABS (UI/UX)</a></li>
<li><a href="fun.html">JUST FOR FUN!</a></li>
</div>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="main">
<div class="artabout">
<h5>DIGITAL ART</h5>
<p>In middle school, I created an Instagram account dedicated to my digital art. I started off by using a basic photo editing app,but I have since mastered Adobe Photoshop on my own and started creating more conceptual pieces for my AP Art Portfolio.</p>
</div>
<div class="gallery">
<div uk-lightbox>
<div class="row">
<div class="column">
<a href="images/digital/Nostalgia.jpg" data-caption="Nostalgia - [Desire Series 1/12] In a photoseries that explores the evolution of human desires over time, this piece focuses on imagination and the feeling of nostalgia for simpler times">
<img src="images/digital/Nostalgia.jpg" alt=""></a>
<a href="images/digital/Power.jpg" data-caption="Power - [Desire Series 2/12] As children, we often have outlandish desires, such as supernatural powers">
<img src="images/digital/Power.jpg" alt=""></a>
<a href="images/digital/Riches.jpg" data-caption="Riches - [Desire Series 3/12] Greed and materialism settle in at a young age, where we begin to believe that money is power">
<img src="images/digital/Riches.jpg" alt=""></a>
</div>
<div class="column">
<a href="images/digital/Acceptance.jpg" data-caption="Acceptance - [Desire Series 4/12] Ultimately, we just want to be accepted for who we are, as depicted by the gold stars commonly associated with excellence and the golden hands intimately embracing the face">
<img src="images/digital/Acceptance-thumb.png" alt=""></a>
<a href="images/digital/Entertainment.jpg" data-caption="Entertainment - [Desire Series 5/12] In this piece, I depicted the human desire of entertainment. We crave to be entertained by others, but also to be considered as entertaining. The popcorn represents the need to be entertained and the TV represents the need to be entertaining">
<img src="images/digital/Entertainment-thumb.png" alt=""></a>
<a href="images/digital/Thrill.jpg" data-caption="Thrill - [Desire Series 6/12] In our adolescence, we often seek the rush of thrill and the highs of adrenaline, prompting us to take risks, to walk the line between life and death">
<img src="images/digital/Thrill-thumb.png" alt=""></a>
</div>
<div class="column">
<a href="images/digital/Serenity.jpg" data-caption="Serenity - [Desire Series 7/12] During our tumultuous teenage years, some may simply seek sleep and tranquility. Amidst the wild woods within our minds, we all hope to find peace and serenity">
<img src="images/digital/Serenity-thumb.png" alt=""></a>
<a href="images/digital/Touch.jpg" data-caption="Touch - [Desire Series 8/12] While others seek time alone, some may turn to human contact and begin to crave physical touch">
<img src="images/digital/Touch.jpg" alt=""></a>
<a href="images/digital/Fixed.jpg" data-caption="Fixed - [Desire Series 9/12] This piece deals with the desire to fix everything and the want for everything to fit perfectly, like a puzzle. Yet, even then, there are still countless solutions to the problem which leads to the dilemma of choosing the best solution. It's the endless cycle of issues that generates the desire to fix things">
<img src="images/digital/Fixed-thumb.png" alt=""></a>
</div>
<div class="column">
<a href="images/digital/Balance.jpg" data-caption="Balance - [Desire Series 10/12] Upon entering adulthood, life often gets out of hand, leading one to seek peace and balance, as represented by the yin and yang formed by the koi fish">
<img src="images/digital/Balance-thumb.png" alt=""></a>
<a href="images/digital/Control.jpg" data-caption="Control - [Desire Series 11/12] As life we begin to chase the idea of control, as seen with the girlcontrolling how the world spins">
<img src="images/digital/Control.jpg" alt=""></a>
<a href="images/digital/Vanity.jpg" data-caption="Vanity - [Desire Series 12/12] As we grow older, we grow nostalgicfor our youth and would trade anything to be young again. Time starts to crawl and you're left wondering what could have been if you were young again and could remake your life">
<img src="images/digital/Vanity-thumb.png" alt=""></a>
</div>
<div class="column">
<a href="images/digital/City%20Above%20the%20Clouds.jpg" data-caption="City Above The Clouds">
<img src="images/digital/City%20Above%20the%20Clouds-thumb.png" alt=""></a>
<a href="images/digital/Bird%20Face.jpg" data-caption="Bird Face">
<img src="images/digital/Bird%20Face.jpg" alt=""></a>
<a href="images/digital/Night%20At%20the%20Museum.jpg" data-caption="Night At The Museum">
<img src="images/digital/Night%20At%20the%20Museum-thumb.png" alt=""></a>
</div>
</div>
</div>
</div>
<br><br>
</div>
<footer>
<h4>
<a href="mailto: annashijiang@gmail.com" target="_blank">EMAIL</a>
•
<a href="https://www.linkedin.com/in/annasjiang/" target="_blank">LINKEDIN</a>
•
<a href="https://github.com/annasjiang">CODE</a>
</h4>
</footer>
<script src="script.js"></script>
</body>
</html>