Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
first commit
  • Loading branch information
@yuh19027
yuh19027 committed Nov 5, 2020
0 parents commit 1a4d43c
Show file tree
Hide file tree
Showing 89 changed files with 11,481 additions and 0 deletions.
Binary file added .DS_Store
Binary file not shown.
62 changes: 62 additions & 0 deletions 404.html
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Page Not Found</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
line-height: 1.2;
margin: 0;
}

html {
color: #888;
display: table;
font-family: sans-serif;
height: 100%;
text-align: center;
width: 100%;
}

body {
display: table-cell;
vertical-align: middle;
margin: 2em auto;
}

h1 {
color: #555;
font-size: 2em;
font-weight: 400;
}

p {
margin: 0 auto;
width: 280px;
}

@media only screen and (max-width: 280px) {

body,
p {
width: 95%;
}

h1 {
font-size: 1.5em;
margin: 0 0 0.3em;
}

}
</style>
</head>

<body>
<h1>Page Not Found</h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
</body>

</html>
<!-- IE needs 512+ bytes: https://docs.microsoft.com/archive/blogs/ieinternals/friendly-http-error-pages -->
19 changes: 19 additions & 0 deletions LICENSE.txt
@@ -0,0 +1,19 @@
Copyright (c) HTML5 Boilerplate

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
122 changes: 122 additions & 0 deletions ar-pokemon.html
@@ -0,0 +1,122 @@
<!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>
12 changes: 12 additions & 0 deletions browserconfig.xml
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="tile.png"/>
<square150x150logo src="tile.png"/>
<wide310x150logo src="tile-wide.png"/>
<square310x310logo src="tile.png"/>
</tile>
</msapplication>
</browserconfig>
Binary file added complete-module-study.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
110 changes: 110 additions & 0 deletions creative coding.html
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title></title>
<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="">

<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>Creative Coding</title>

<meta name="theme-color" content="#fafafa">
</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>

<section class="intro">
<br><br>
<header>Creative Coding.</header>
<br>
</section>
<br><br><br><br>
<section class="navbar">
<nav>
<div class="worknav" style="font-size: 1.2em;">
<a id="work-nav" href="ui-ux.html" class="hvr-fade" style="text-decoration:none;">UI/UX</a>
<a id="work-nav" href="web-design.html" class="hvr-fade" style="text-decoration:none;">Web Design</a>
<a id="work-nav" href="motion.html" class="hvr-fade" style="text-decoration:none;">Motion</a>
<a id="work-nav" href="visual.html" class="hvr-fade" style="text-decoration:none;">Visual</a>
<a id="work-nav" href="creative coding.html" class="hvr-fade" style="background-color: #9BD19A; color: white; text-decoration:none;">Creative Coding</a>
</div>
</nav>
</section>
<br><br><br>
<section class="wrapper2">
<div>
<img class="hvr-grow-shadow" src="img/spine-cover.gif" style="width:100%">
<h2 style="padding-top: 1em; font-size: 2em;">Spine</h2>
<p style="margin-top: 0.4em; font-size: 1.4em; line-height: 1.2em;">A medical app that helps people manage chronic low back pain.</p>
<p style=" font-size: 1.2em; margin-top: 0.4em; color:gray">UX&UI | Mobile | May 2020</p>
</div>
<div>
<img class="hvr-grow-shadow" src="img/pet-nest-cover.jpg" style="width:100%">
<h2 style="padding-top: 1em; font-size: 2em; ">Pet Nest</h2>
<p style="margin-top: 0.4em; font-size: 1.4em; line-height: 1.2em;">A rescue platform which aims to improve the living environment of stray animals.</p>
<p style=" font-size: 1.2em; margin-top: 0.4em; color:gray">UX&UI | Mobile | Dec 2020</p></div>
<div>
<img class="hvr-grow-shadow" src="img/collector_cover.jpg" style="width:100%">
<h2 style="padding-top: 1em; font-size: 2em; ">Collector</h2>
<p style="margin-top: 0.4em; font-size: 1.4em; line-height: 1.2em;">An interaction design for visitors to better immersive in the museum context and customize their touring experience in Nanjing Museum.</p>
<p style=" font-size: 1.2em; margin-top: 0.4em; color:gray">UX&UI | Interactive Digital Signage | Mobile | Sep 2019</p>
</div>
<div>
<img class="hvr-grow-shadow" src="img/trolley.jpg" style="width:100%">
<h2 style="padding-top: 1em; font-size: 2em; ">E-Screen</h2>
<p style="margin-top: 0.4em; font-size: 1.4em; line-height: 1.2em;">A digital screen applicable for various styles of airport trolleys which can realize online check-in, flight query and indoor navigation.</p>
<p style=" font-size: 1.2em; margin-top: 0.4em; color:gray">Product Design | UX&UI | Sep 2019</p>

</div>
</section>
<section class="footer">
<div>
<!-- <p style=" text-align:center">View all projects</p> -->
<br>
</div>
<br><br><br>
<footer class="footer">
<div class="back-to-top">
<div>
<p style="font-size: 1.8em; position: relative; bottom: -12px; font-weight: bold; margin: 0">Let's Chat :)</p>
<div class="line"><hr class="greenline"></div>
</div >
<div><a href="#" class="to-top"><img src="img/up-arrow.svg" height=40px></a></div>
</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>
</footer>
</section>
</div>
</body>
</html>

0 comments on commit 1a4d43c

Please sign in to comment.