Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

portfolio-website/ar-pokemon.html

Go to file
 
 
Cannot retrieve contributors at this time
122 lines (112 sloc) 6.79 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta name="theme-color" content="#fafafa">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bree+Serif&family=Source+Sans+Pro&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<title>AR Pokemon</title>
</head>
<body>
<div class="canvas">
<section class="navbar">
<nav>
<a href="index.html"><img src="img/yucheng-logo-v1.png" alt="personal logo" height= "72px"></a>
<div class="nav" style="font-size: 1.2em;">
<a href="" class="hvr-underline-from-left" style="font-weight: 600">Work</a>
<a href="" class="hvr-underline-from-left" style="font-weight: 600">About</a>
<a href=""class="hvr-underline-from-left" style="font-weight: 600">Resume</a>
</div>
</nav>
</section>
<div class="content">
<br><br><br>
<section class="ar-pokemon-banner">
<!-- <img style="width: 1080px" src="img/ar-pokemon-cover.gif" alt="banner"> -->
</section>
<br><br>
<section>
<h1 style="font-weight:700">AR POKEMON</h1>
<br>
<div class="spine-intro">
<div class="spine-intro-item1">
<h2>Overview</h2>
<p>The AR Pokemon project is a marker tracking Augmented Reality experience which is based on the web. It integrates AR.JS and A-frame. </p>
<p>When the camera recognizes a marker, the website shows the 3D model of each pokemon character on top of the marker. Users are allowed to interact with 5 pokemon characters by rotating and zooming in and out.</p>
</div>
<div class="spine-intro-item2">
<h2>Role</h2>
<p>WebAR, Web design</p>
<br>
<h2>Team</h2>
<p>Individual Work</p>
<br>
<h2>Tool</h2>
<p>AR.JS, A-frame, Javascript</p>
</div>
</div>
</section>
<br><br>
<br><br>
<hr>
<section class="prototype">
<br><br>
<h1>PLEASE USE THE LINK BELOW TO EXPERIENCE</h1>
<div>
<iframe id="3ebc7b29-34f1-43f9-b73c-58c31bdd2d4a" src="https://www.vectary.com/viewer/v1/?model=3ebc7b29-34f1-43f9-b73c-58c31bdd2d4a&env=studio3" frameborder="0" width="100%" height="580"></iframe>
<p><a href="https://github.uconn.edu/pages/yuh19027/dmd3475_scripting/final-project/ar-pokemon/index.html" target="_blank" rel="noopener noreferrer" style="font-size: 1.3em;">Explore the website by yourself!</a></p>
</div>
</section>
<br><br><br><br>
<section >
<hr><br><br>
<h1>LITTLE THOUGHTS</h1>
<section>
<p>This project is a little attempt at WebAR. As a web concertation graduate student, I believe the future of the web would be creating immersive experiences and the future of AR would be exploring more accessible interaction mediums. Therefore, WebAR has great potential.</p>
<p>Over the years, augmented reality has flourished. It has applied to many areas, from gaming and entertainment to medicine, education and business. However, there is a big limitation. No matter what experiences the customers achieve, it requires a specific software application or Mobile App downloaded, which creates a big hurdle.</p>
<p>However, WebAR enables augmented reality experiences that are accessed through a web browser rather than an app. This means all you need is your smartphone or tablet and an internet connection. This feature will extremely optimize the continuity of user experience and help extend the wide applications of AR.</p>
<p>I will keep exploring this area in the future! ✊✊✊</p>
<br>
</section>
<br><br><br><br><hr><br><br>
<div><a href="#" style="display: block; float:right"><img src="img/up-arrow.svg" height=40px></a></div>
<section>
<br><br>
<div><p style="text-align: center; font-weight: 600; font-size: 1.5em; position: relative; bottom: -12px; ">All Works</p></div>
<div class="line1"><hr class="green-line-1"></div>
<br>
<div class="bottom-nav">
<p>UI/UX</p>
<p>Web Design</p>
<p>Motion</p>
<p>Visual</p>
<P>Creative Coding</P>
</div>
<br><br><br><br>
<div class="contact">
<div class="footer-item">
<a><img class="footer-item-image" src="img/linkedin.svg" alt="linkedin logo" height= 45px></a>
<a><img class="footer-item-image" src="img/github.svg" alt="github logo" height= 45px></a>
<a><img class="footer-item-image" src="img/email.svg" alt="email logo" height= 45px></a>
</div>
</div>
<p style=" text-align:center">&copy; Designed by Yucheng Hang</p>
</section>
</div>
</div>
</body>
</html>