annasjiang.github.io/design.html at main · annasjiang/annasjiang.github.io · GitHub

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="design">

<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="traditional">
	<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><a href="digital.html">DIGITAL</a></li>
                        <li class="uk-active"><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><a href="digital.html">DIGITAL</a></li>
                                <li class="uk-active"><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>DESIGN</h5>
			<p>In high school, I was a part of multiple design teams. I
				created special features and ads for my school yearbook and was asked to design apparel for multiple clubs. I've also done some design work to help support local businesses in my hometown! Now, I try to take at least one design class a semester as my major is more code focused, but I'm still really passionate about design. The first few links in the gallery will lead you to some of my larger design projects with detailed explanations on the process and works!</p>
		</div>
		<div class="gallery">
            <div class="row">
                <div class="column">
                    <a href="dsgn266.html"><img src="images/design/8th-climate-thumb.png"></a>
                    <a href="invis-cities.html"><img src="images/design/invis-cities-thumb.png"></a>
                    <a href="gestalt.html"><img src="images/design/gestalt-thumb.png"></a>
                </div>
            </div>
            <div uk-lightbox>
			<div class="row">
				<div class="column">
                    <a href="images/design/spec-dsgn.png" data-caption="Speculative Design Manual - This manual was meant to mimic Ikea manuals and be a speculative instruction guide for an object/tool that solves a future problem. This device would collect clean water by condensing clouds.">
                      <img src="images/design/spec-dsgn-thumb.png" alt=""></a>

                    <a href="images/design/Friendship%20Ad%20-%20The%20Bees.jpg" data-caption="Friendship Ad [The Bees] - Friendship ad designed for yearbook to commemorate different friend groups. This ad had a retro-neon and Burt's Bees theme, where every member had a custom chapstick flavor icon next to their name">
                      <img src="images/design/Friendship%20Ad%20-%20The%20Bees-thumb.png" alt=""></a>

                    <a href="images/design/Friendship%20Ad%20-%20Weather%20Watchers.jpg" data-caption="Friendship Ad [Weather Watchers] - Friendship ad designed for yearbook to commemorate different friend groups. This ad had a weather theme, as the group ran recreationally together and would always check the weather beforehand">
                      <img src="images/design/Friendship%20Ad%20-%20Weather%20Watchers-thumb.png" alt=""></a>
				</div>
				<div class="column">
                    <a href="images/design/Junior%20Feature%20-%20Driving.png" data-caption="Yearbook Feature [Parking] - A feature in the school yearbook that illustrated the struggles of parking at my high school">
                      <img src="images/design/Junior%20Feature%20-%20Driving.png" alt=""></a>

                    <a href="images/design/Hanging%20Out%20Special%20Feature.jpg" data-caption="Yearbook Feature [Hanging Out] - A feature in the school yearbook that illustrated how people would hang out after school in my town">
                      <img src="images/design/Hanging%20Out%20Special%20Feature.jpg" alt=""></a>

                    <a href="images/design/Sophomore%20Feature%20-%20Sweet%2016.png" data-caption="Yearbook Feature [Sweet 16] - A feature in the school yearbook that included a quote from a sophomore about her Sweet 16">
                      <img src="images/design/Sophomore%20Feature%20-%20Sweet%2016.png" alt=""></a>
				</div>
				<div class="column">
                    <a href="images/design/logo%20square.png" data-caption="Logo - After debating over how I should sign my initials on paintings, I decided to digitize my initials and design my own logo">
                      <img src="images/design/logo%20square.png" alt=""></a>

                    <a href="images/design/Zhang%20Arts%20Logo.jpg" data-caption="Qi Zhang Art Logo - The logo design for my local art studio">
                      <img src="images/design/Zhang%20Arts%20Logo.jpg" alt=""></a>

                    <a href="images/design/AE2%20Learning%20Brochure.png" data-caption="AE2 Learning Brochure - Collaborated with friend, Kennice Pan, to create a brochure to advertise for a local tutoring company">
                      <img src="images/design/AE2%20Learning%20Brochure-thumb.png" alt=""></a>
				</div>
				<div class="column">
                    <a href="images/design/Robotics%20Shirt.png" data-caption="Robotics Shirt Design - A design for the JPS Robotics club apparel">
                      <img src="images/design/Robotics%20Shirt.png" alt=""></a>

                    <a href="images/design/merci%20mes%20cherries.jpg" data-caption="French Alliance Shirt Design - A design for the JPS French Alliance Club apparel">
                      <img src="images/design/merci%20mes%20cherries.jpg" alt=""></a>

                    <a href="images/design/Sci%20Oly%20Shirt%20Grey.png" data-caption="A design for the JPS Science Olympiad apparel and logo for the year">
                      <img src="images/design/Sci%20Oly%20Shirt%20Grey.png" alt=""></a>
				</div>
			</div>
            </div>
		</div>
        <br><br>
	</div>


	<footer>
		<h4>
			<a href="mailto: annashijiang@gmail.com" target="_blank">EMAIL</a>
			&nbsp; &#8226; &nbsp;
			<a href="https://www.linkedin.com/in/annasjiang/" target="_blank">LINKEDIN</a>
			&nbsp; &#8226; &nbsp;
			<a href="https://github.com/annasjiang">CODE</a>
		</h4>
	</footer>
	<script src="scriptittyscript.js"></script>
</body>
</html>