NickMarkerDesign/index.html at main · ncmarker/NickMarkerDesign · 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Innovative student designer with a vision to create the next immersive interface at the intersection of contemporary technology and digital marketing.">
	  	<meta name="keywords" content="Nick Marker, Design, UI/UX, USC">
	  	<meta name="author" content="Nick Marker">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!--GOOGLE FONTS-->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap" rel="stylesheet">

		<!--INTER FONT-->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">

		<!--PERMANENT MARKER FONT-->
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">

		<!--CSS STYLESHEET-->
		<link rel="stylesheet" href="style.css">

		<!--JQUERY FOR RESPONSIVE NAVBAR-->
		<!-- <script src="/path/to/cdn/jquery.slim.min.js"></script> -->

		<!--FAVICON-->
		<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
		<link rel="manifest" href="/site.webmanifest">

		<title>Nick Marker | Projects</title>

		<style>
			#changeText {
				display: inline-block;
				opacity: 1;
			  	transition: opacity .4s ease;
			}

			#changeText.fadeOut {
			  opacity: 0;
			  transition: opacity .4s ease;
			}
		</style>
	</head>
	<body>
		<!--NAVBAR-->
		<div class="nav">
			<div class="nav-container">
				<img src="img/NMDesignLogo.png" alt="NMDesign Logo">
				<a class="active" href="projects.html">Projects</a>
				<a href="about.html">About</a>
				<a href="resume.html">Resume</a>
				<div class='clear'></div>
			</div>
		</div>
		<!--NAVBAR END-->

		<!--RESPONSIVE NAVBAR-->
		<div class='responsive-navigation'>
			<header class="res-nav">
			  <img src="img/NMDesignLogo.png" alt="NMDesign Logo">
			  <!-- Side Nav -->
			  <div id="js-nav" class="side-nav">
			    <ul class="list">
			      <li><a class="active" href="projects.html">Projects</a></li>
			      <li><a href="about.html">About</a></li>
			      <li><a href="resume.html">Resume</a></li>
			    </ul>
			  </div>
			  <!-- Hamburger Button -->
			  <div id="js-hamburger" class="hamburger button">
			    <span id="js-top-line" class="top-line"></span>
			    <span id="js-center-line" class="center-line"></span>
			    <span id="js-bottom-line" class="bottom-line"></span>
			  </div>
			  <div class='clear'></div>
			</header>
		</div>
		<!--RESPONSIVE NAVBAR END-->

		<!--HEADER-->
		<div class="header">
			<div class="container">
				<div class="words">
					<h2>Hello, my name is</h2>
					<br>
					<h1>Nick Marker</h1>
					<br>
					<h2>Innovative student <strong><div id='changeText'>designer</div> </strong>with a vision to create the next immersive interface at the intersection of contemporary technology and software development.</h2>
				</div>
				<br>
				<div class="doodleanimation">
					<img id="gif" src="">
					<script>document.getElementById('gif').src="img/DoodleAnimationTrimmed.gif?a="+Math.random()</script>
				</div>
				<br>
				<div class="scrollanimation"><img src="img/ScrollDown.gif" alt="Scroll Down"></div>
			</div>
		</div>
		<hr>
		<!--HEADER END-->

		<!--PROJECTS START-->
		<div class="sections">
			<div class="content">

				<h3>Programming</h3>

				<br>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/ekko.png" alt="Ekko"></div>
					<h4>Ekko<br>Personalized chat bot</h4>
					<p>Elevate your foreign language fluency with tailored guidance and individualized verbal conversation practice on Ekko. Check out our Devpost to test our demo.</p>
					<a href="https://devpost.com/software/ekko-v9wkgy" target=_blank><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/desy.png" alt="DESY Logo"></div>
					<h4>DESY<br>Figma Plugin</h4>
					<p>Founded and developed a Figma plugin, DESY, to streamline design system compliance for both deign teams and engineering teams, while facilitating design to engineer handoff.</p>
					<a href="https://www.usedesy.com" target=_blank><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/Blackjack.jpg" alt="Blackjack Game Logo"></div>
					<h4>Blackjack━Can you beat the dealer?</h4>
					<p>Modified version of the traditional Blackjack Casino game. Makes use of React, JavaScript, HTML, CSS, and jQuery, in addition to API manipulation. Check out the project to play.</p>
					<a href="https://stackblitz.com/edit/react-rvfhqs?embed=1&file=src/index.js&view=preview" target=_blank><div class="seeproject"><p>See Project -></p></div></a>
				</div>

				<h3>UI/UX Design</h3>
				<br>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/w2w.png" alt="When To Work Thumbnail"></div>
					<h4>W2W Mobile App Redesign</h4>
					<p>A modernized redesign of an employee scheduling app. Reducing the repetitive aspects across the app's pages and condensing the app's various tasks make this redesign more user-friendly.</p>
					<a href="w2wAccordion.html"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/ritas.png" alt="Ritas Italian Ice Thumbnail"></div>
					<h4>Rita's Italian Ice Site Redesign</h4>
					<p>A sleek redesign focusing on responsiveness across devices of differing screen sizes. A newly modernized landing page that maintains the color palette and essential features of the original site.</p>
					<a href="ritasAccordion.html"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/qober.png" alt="Qober Thumbnail"></div>
					<h4>Qober Branding and Site Design</h4>
					<p>A complete branding of a modern clothing company while working within specific client restraints. Includes logo creation and website design, with a marketing focus on the digital interests of generation Z.</p>
					<a href="qoberAccordion.html"><div class="seeproject"><p>See Project -></p></div></a>
				</div>

				<h3>Architecture</h3>
				<br>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/LA28.jpg" alt="LA28 Olympics Project"></div>
					<h4>LA28 Olympic Media Branch</h4>
					<p>Architectural design of a concession stand and media hub/library with a focus on the upcoming LA28 Olympic Games. Focus on structural design theory and material use.</p>
					<a href="https://drive.google.com/file/d/1kOB0Tnt570dYPf64EAFaJ-47ixvnYyRs/view?usp=sharing" target="_blank"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/hexatron2.png" alt="3DAPARTMENT Logo"></div>
					<h4>Hexatron━The Future of Living</h4>
					<p>Visual descriptions of the company's primary design components, including fonts, color schemes, and mood boards, to establish a consistent media image for the company across multiple platforms.</p>
					<a href="https://drive.google.com/file/d/1UD-yVSp4qaxgE-QcjBX86YJt7AbnVf9O/view?usp=sharing" target="_blank"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/alleyway.png" alt="Alleyway Project"></div>
					<h4>Paintball World Championship</h4>
					<p>Abstract architectural design within the constraints of a narrow Downtown, LA alleyway. Geometric analysis of common spaces to create inhabitable forms through a programtic narrative.</p>
					<a href="https://drive.google.com/file/d/1q0BmD30Gfsk0ib89hHtz6pxugwv3sA2j/view?usp=sharing" target="_blank"><div class="seeproject"><p>See Project -></p></div></a>
				</div>

				<h3>Graphic Design</h3>
				<br>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/3dapartment.png" alt="3DAPARTMENT Logo"></div>
					<h4>3DAPARTMENT Design Work</h4>
					<p>Visual descriptions of the company's primary design components, including fonts, color schemes, and mood boards, to establish a consistent media image for the company across multiple platforms.</p>
					<a href="3dapartment.html"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card">
					<div class="thumbnail"><img src="img/thumbnails/amata.png" alt="Amata Agency Logo"></div>
					<h4>Amata Agency Design Work</h4>
					<p>A collage of my work done while serving as an intern with Amata Marketing Agency. Graphics and wireframes were created for over three different client companies and were posted across various social platforms.</p>
					<a href="amataagency.html"><div class="seeproject"><p>See Project -></p></div></a>
				</div>
				<div class="card" id="comingsoon">
					<div class="thumbnail"><img src="img/thumbnails/ritas.png" alt="Ritas Italian Ice Thumbnail"></div>
					<h4>This project is coming soon</h4>
					<p>A sleek redesign focusing on responsiveness across devices of differing screen sizes. A newly modernized landing page that maintains the color palette and essential features of the original site.</p>
					<a href="comingsoon.html"><div class="seeproject"><p>Not Available</p></div></a>
				</div>
			</div>
		</div>
		<!--PROJECTS END-->

		<!--FOOTER ANIMATION START-->
		<div class="footeranimation">
			<div class="figure" id="f1"><img src="img/walkingman.gif" alt="Walking Stick Man"></div>
			<div class="bubble"><p>Thanks for visiting!</p></div>
		</div>
		<!--FOOTER ANIMATION END-->

		<!--FOOTER START-->
		<div class="footer">
			<p><a class="navfoot" href="projects.html">PROJECTS</a> | <a class="navfoot" href="about.html">ABOUT</a> | <a class="navfoot" href="resume.html">RESUME</a></p>
			<a href="tel:484-365-3437"><img class="icon" src="img/Phone.png" alt="Call Me"></a>
			<a href="mailto:ncmarker@usc.edu"><img class="icon" src="img/Mail.png" alt="Email Me"></a>
			<a href="https://www.linkedin.com/in/nickmarker" target="_blank"><img class="icon" src="img/Linkedin.png" alt="Linkedin Profile"></a>
			<br>
			<img id="logo" src="img/NMDesignLogo.png" alt="Nick Marker Design Logo">
			<p id="copyright">Designed and Developed by Nick Marker &copy; 2022</p>
		</div>
		<!--FOOTER END-->

	<script>

		/*--NAVBAR SLIDE IN/OUT--*/
		const hamburgerBtn = document.getElementById("js-hamburger");
		const topLine = document.getElementById("js-top-line");
		const centerLine = document.getElementById("js-center-line");
		const bottomLine = document.getElementById("js-bottom-line");
		const nav = document.getElementById("js-nav");

		hamburgerBtn.addEventListener("click", () => {
		  topLine.classList.toggle("active");
		  centerLine.classList.toggle("active");
		  bottomLine.classList.toggle("active");
		  nav.classList.toggle("show");
		});

		// $("#js-hamburger").click(function () {
		// $("#js-top-line").toggleClass("active");
		// $("#js-center-line").toggleClass("active");
		// $("#js-bottom-line").toggleClass("active");
		// $("#js-nav").toggleClass("show");
		// });

		/*--WORD FLIPPER IN HEADER--*/
		window.onload = function () {

		  'use strict';

		  var words = [
		    'designer',
		    'developer',
		    'programmer',
		    'intern'
		  ],
		      i = 0,
		      wordChanger = document.querySelector('#changeText');

		  setInterval(function () {
		    wordChanger.classList.add('fadeOut');

		    // timeout equal to transition duration
		    setTimeout(function () {
		      wordChanger.textContent = words[ (i === words.length - 1) ? i = 0 : i += 1];
		      wordChanger.classList.remove('fadeOut');
		    }, 400);

		  }, 3000);
		};


	</script>

	</body>
</html>