<?php
session_start();
if (!isset($_SESSION['portfolio_auth'])) {
    header('Location: /enter.php?redirect=' . urlencode($_SERVER['REQUEST_URI']));
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
	<head>
	    <!-- Required meta tags -->
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	    <!-- Custon CSS -->
	    <link href="styles/style-projects.css" rel="stylesheet" type="text/css">

	    <title>OnYou Kang</title>
	</head>

	<body>
		<div class="my-container project-page classic">
			<div class="content">
			    <div class="intro">
					<div class="intro-image">
						<img src="images/classic.jpg" alt="classic. project">
					</div>
					<div class="intro-text">
						<p class="title">classic.</p>
						<p class="mockup-button" id="button">View Final Product</p>
					</div>
				</div>
				<div class="intro-meta">
					<p class="subtitle">classic. is a set of cards and packaging for the cards that highlights my penchant for classic objects.</p>
					<p class="roles">User Research | Wireframing | Prototyping</p>
				</div>

			    <div class="main">
			    	<p class="heading2">Objective</p>
			    	<p class="heading3-bottom">The goal of the project was to create a set of cards that epitomizes what I adore and what I am devoted to. In order to figure out the overall theme, I put together a mood board composed of 50 images of things that I am fond of, inspired by, and care of.</p>

			    	<p class="heading2">Research</p>
			    	<p class="heading3-bottom">After a thorough review of the mood board, I ended up with the conclusion that “I like stuff that are classic” — I like classic designs, typefaces, products, ads, etc. The reason behind my obsession of such an idea is that what is categorized as classic has not changed for a long while — not because people were idle but because the quality of what is classic does not change over time. Being classic means being timeless.</p>

			    	<div class="img-container">
				    	<img class="img-inline img-left" src="images/classic-process-1.jpg" data-group="process" loading="lazy">
				    	<img class="img-inline" src="images/classic-process-2.jpg" data-group="process" loading="lazy">
				    </div>

				    <p class="heading3">In order to portray my idea on a set of cards, I decided to use one of the most classic objects to represent what is classic: jeans. On each card, one side displays an ad of jeans, ranging from the ones from the 1940s to ones from the 2010s. The other side displays a picture of a pair of jeans from the respective time period.</p><br>
				    <p class="heading3">If you only look at the side that displays an image of jeans, you cannot possibly tell from what decade they are from. Yet, if you look at the side that displays an ad, you can make a reasonable guess of the time period in which it was released. The first clue is color. Ads from the early 20th century have a limited color palette — sometimes even black and white. The next clue is the demographics of the models. The older the ads ads are, the less diverse the models are in terms of gender, race, and sexuality. Also, the older ads seem to have stricter beauty standards compared to the ads from the late 1990s to 2000s. </p><br>
				    <p class="heading3-bottom">Thus, one side of the card represents the pass of time, while the other side represents the never-failing quality and timelessness of classic objects.</p>

				    <p class="heading2" id="myDiv">Final Product</p>
				    <img class="mid-image margin-right" src="images/classic-1.jpg" data-group="final" loading="lazy">
				    <img class="mid-image" src="images/classic-2.jpg" data-group="final" loading="lazy">
				    <img class="big-image margin-right" src="images/classic-3.jpg" data-group="final" loading="lazy">
				    <img class="small-image" src="images/classic-4.jpg" data-group="final" loading="lazy">
				    <img class="small-image" src="images/classic-5.jpg" data-group="final" loading="lazy">
				    <img class="small-image" src="images/classic-6.jpg" data-group="final" loading="lazy">
				    <img class="small-image" src="images/classic-7.jpg" data-group="final" loading="lazy">

			    </div>

			</div>

			<div class="two-lines next-project">
				<p class="next">Next Project:</p>
				<p class="next-bold">Student Organization Homepage Case Study</p>
				<a href="student-organization-case-study.php"><img class="next-img" src="images/gallery-4.png"></a>


				<a href="where-are-you-from.php"><img class="arrow-left" src="images/w-arrow-left.png"></a>
				<a href="where-are-you-from.php"><p class="previous">Previous</p></a>
			    <a href="student-organization-case-study.php"><img class="arrow-right" src="images/w-arrow-right.png"></a>
			</div>

		</div>

	    <script src="scripts/nav.js"></script>
	    <script src="scripts/lightbox.js"></script>
	    <script>
	    	// Scroll to final product (classic.html specific)
	    	document.getElementById('button').addEventListener('click', function () {
	    		var target = document.getElementById('myDiv');
	    		var top = target.getBoundingClientRect().top + window.scrollY - 50;
	    		window.scrollTo({ top: top, behavior: 'smooth' });
	    	});
	    </script>

	</body>
</html>