projectexp.html

<!--Project Screen-->
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 33.3%;
  padding: 0px;
  border-style:solid;
}

.row{
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
  margin-top:-20px;
}

.divstuff{
	height:400px;
}

.rightstyle{
	width: calc(100% - 400px);
	float:right;
}

.titlecentered{
	text-align:center;
}

.bigerh3{
	font-weight:bold;
	font-size:27px;
}

.bottomh4{
	padding-bottom:15px;
}

.projectTbox{
	margin-top:-87px;
	z-index:100;
	position:relative;
	top:-150px;
	background-color:rgba(0,0,0,0.8);
	width:350px;
	border:solid;
	padding-top:10px;
	margin-left:auto;
	margin-right:auto;
	cursor:pointer;
}

.projectrightsidebg{
	background-color:black;
	opacity:0.95;
	border-style:solid;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	padding-bottom:20px;
}

.projectsecheader{
	margin-top:0px;
}

.blurbg{
	animation-name:blurthebg;
	animation-duration:.7s;
	animation-fill-mode:forwards;	
	cursor:pointer;
}

.centerimages{
	margin-left:auto;
	margin-right:auto;
	display:block;
}

@keyframes blurthebg{
	100%{filter:blur(8px);}
}
</style>

	<div class="initialhidden" id="projectpagediv">
		<h2 id="WorkExp" align="middle" class="title" style="padding-top:6%;padding-bottom:6%;">Projects</h2>
		<div style = "float:left;width:100%;" id="ProjAll">
		<div class="row">
		  <div id="ProjAhas" onclick="clickAhas()" onmouseover="moverAhas()" onmouseout="moutAhas()" class="column">
			<div id="ProjBGAhas" class="divstuff" style="background-size:contain;background:url('css/Images/projects/pawshrunk.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">AHAS</h2>
				<p>A Veterinarian Electronic Database</p>
			</div>
		  </div>
		  <div id="ProjUBER" onclick="clickUBER()" onmouseover="moverUBER()" onmouseout="moutUBER()" class="column">
			<div id="ProjBGUBER" class="divstuff" style="background-size:contain;background:url('css/Images/projects/uber.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">UBER(Lite)</h2>
				<p>Mobile Android App</p>
			</div>
		  </div>
		  <div id="ProjGit" onclick="clickGit()" onmouseover="moverGit()" onmouseout="moutGit()" class="column">
			<div id="ProjBGGit" class="divstuff" style="background-size:contain;background:url('css/Images/projects/android.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">Eric Hsueh Github.io</h2>
				<p>Personal Website</p>
			</div>
		  </div>
		</div>

		<div class="row">
		  <div id="ProjLife" onclick="clickLife()" onmouseover="moverLife()" onmouseout="moutLife()" class="column">
			<div id="ProjBGLife" class="divstuff" style="background-size:contain;background:url('css/Images/projects/roomba.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">Team Lifepoints</h2>
				<p>Roomba Programming</p>
			</div>
		  </div>
		  <div id="ProjFut" onclick="clickFut()" onmouseover="moverFut()" onmouseout="moutFut()" class="column">
			<div id="ProjBGFut" class="divstuff" style="background-size:contain;background:url('css/Images/projects/brain.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">Future Projects</h2>
				<p>Projects that are on the todo list</p>
			</div>
		  </div>
			<div id="ProjCon" onclick="clickCon()" onmouseover="moverCon()" onmouseout="moutCon()" class="column">
			<div id="ProjBGCon" class="divstuff" style="background-size:contain;background:url('css/Images/projects/convolutionnet.png');background-color:#aaa;background-position:center;opacity:0.95;">
			</div>
			<div align="center" class="projectTbox" style="">
				<h2 class="projectsecheader">Visual Recognition</h2>
				<p>Convolution Net</p>
			</div>
		  </div>
		</div>
		</div>
		<div id="DescriptionAhas" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">Alberta Helping Animals Society:</h3>
			<h4 class="titlecentered bottomh4">A Veterinarian Electronic Medical Database</h4>
			<p>Alberta Helping Animals Society (AHAS), is a non-profit veterinarian organization based in Alberta.
			AHAS as an organization wanted to make the switch from a Paper Medical Record System to a Electronic Medical Reccord System (EMR).
			Thus, "Vetter" was born. Vetter, the internal name for the app, is design to serve as a EMR in place of the old Paper system.
			This app allows users (in this case vets) to schedule appointments, store information about clients, patients, and record information about each visit.
			Five sprints over the course of 4 months designated to allow the completion of this application.
			</p><br>
			<h5>Sprint 1:</h5>
			<p>Created User Stories</p>
			<img style="width:80%;max-width:900px;margin-left:auto;margin-right:auto;display:block;" src="css/Images/AHAS/userstories.png" alt="user stories"> <br>
			<p>Created UI Design General Overview</p>
			<img style="width:100%" src="css/Images/AHAS/story.png" alt="user stories"><br><br>
			<p>Created Components Diagram to show how our program was going to function on each level.</p>
			<img class="centerimages" style="width:80%"src="css/Images/AHAS/ConnectedComponent.jpg" alt="user stories"> <br>
			<h5>Sprint 2:</h5>
			<p>UML diagrams of our program were created</p>
			<img class="centerimages" style="width:80%" src="css/Images/AHAS/AHASUML.jpg" alt="ahas uml"><br>
			<p>Created Sequence Diagram for all of the interactions between backend and frontend</p>
			<img class="centerimages" style="width:80%" src="css/Images/AHAS/SequenceDiagramClientList.jpg" alt="ahas sequence diagram"><br>
			<h5>Sprint 3-5:</h5>
			<p>Sprint 3-5 was mainly working on just the application itself now that all of the documentation was completed. The program was built with a Ruby on Rails backend and a Ember front end. We split the work in terms of two people on the backened, and three people on the front end. As you can see down below, the completed application was video taped and demo.
			<iframe style="width:100%;height:500px;"  src="https://www.youtube.com/embed/KQ8DwfqaT5Y"></iframe>
			
			<p>For further information please visit the two links down below</p>
			<a style="font-size:20px;" class="changecolor" href="https://github.com/CMPUT401/ahasClient" target="_blank">AHAS Client</a>
			<a style="font-size:20px;" class="changecolor" href="https://github.com/CMPUT401/ahasServer" target="_blank">AHAS Server</a>
		</div>
		
		<div id="DescriptionUBER" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">UBER Lite:</h3>
			<h4 class="titlecentered bottomh4">Taxi Hailing Mobile Application</h4>
			<p>Appy go Lucky as we called it was the first taste of project building in a team that all students at the U of A encounter. We were to use the scrum method, where in each meeting we would stand up and explain to the group what we did. We also followed the agile methodologies in order to complete the project. This was coded in Android studio, Java.</p> 
			<p>The first thing that was required of our group was to create a user interface mockup. As shown below, this was our rough markup of the user interface.</p>
			<img class="centerimages" style="width:80%" src="css/Images/appy/AppyGoLucky.png" alt="Uber Lite UI"><br>
			<p>The second thing that we needed to create was a rider storyboard. As in, how a user would be able to request rides, accepts rides, and then rate the driver.</p>
			<img class="centerimages" style="width:80%" src="css/Images/appy/AppyGoLuckyRiderStory.png" alt="Rider Story"><br>
			<p>As a team, we created a multitude of User Stories to split up for each teammate to do evenly. Each of the user stories has it own wiki page. For more information please visit: <a class="changecolor" href="https://github.com/erichsueh/CMPUT301F16T03-D01/wiki/Use-Cases" target="_blank">User Stories</a></p>
			<img class="centerimages" style="width:80%" src="css/Images/appy/Userstory.png" alt="User Stories"><br>
			
			<p>The final product is shown below in our demo:</p>
			<iframe style="width:100%;height:500px;"  src="https://www.youtube.com/embed/tidxoZpw4EM"></iframe>
			<p>For further information please visit the links down below</p>
			<a class="changecolor" href="https://github.com/erichsueh/CMPUT301F16T03-D01" target="_blank">UBER Lite Github</a>
		</div>
		<div id="DescriptionGit" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">GitHub Website:</h3>
			<h4 class="titlecentered bottomh4">Eric Hsueh Person Portfolio</h4>
			<p>A way to hone my skills whilst creating an advertising space for myself. This is the place you are in right now. There has been a lot of thought put into this website, and the idea originally started as a singular website with no load times. Therefore I built the website towards that idea. Essentially, this website is a singular webpage to cut out on loadtimes. Ironically this might not have been the best idea because it increases the loadtime at the beginning, and that would be an issue for lower bandwidth computers and mobile. It was a concept that I really wanted to try out so I did. The home page for the website was built to be simple, a nice background(Which is my computer desk right now) and buttons for people to navigate to and fro. The design choice of each page is simple, I wanted Experience, Projects, and About me page to look and feel as if they're a entire page on their own. But I wanted the contact and resume page to feel as if it's a pop up block from anywhere.</p><br><br>
			
			<p>About page:</p><br>
			The About page is just a little couple of blurbs about me, which idealy make people understand the man behind the code per say. A fairly casual yet professional outlook of who I am and what I stand for.
			<br>
			
			<img style="width:20%;float:left;max-width:250px;" src="css/Images/website/contact.png" alt="Contact Us Page">
			<p>Contact Page:
			<br>
			The Contact me page is simple, a small sidebar that reflects ways to contact me (mobile, email, links). Users are allowed to click anywhere outside of the contact bar to close it, or click on the arrow to close it. I wanted it to be easy and clean to understand and therefore a clean animation and a very simple page design was choosen.</p><br><br>
			
			<p>Experience Page:
			<br>
			I wanted this page to be easily navigated, so I included a side bar on the left side for super easy jumping between work experiences, I also wanted to group up my work experience and my Volunteering experiences together. That way its super easy to differentiate between the two. There's a couple sub-categories that I added in within each of the jobs, just like the carousel for Umbraco, that allows people to see different parts of the website I built.</p><br><br>
			
			<p>Projects Page</p>
			<br>
			For this page, I wanted to showcase all my personal projects in a easy menu for everyone to see, and I wanted this page to be different from all the other pages I've built previousally. Therefore I created a grid system that can be added to very easily.
			<br><br>
			<p>Resume</p>
			<br>
			This is a pretty self explanatory page I believe. 
			<br><br>
			
			<p>Part of me built this website to experiment with different website design element, to go through what works and what dosn't, the other part of me wanted some way for me to advertise myself further than what could be included on a resume. Therefore this website was born as a porfolio of sorts and as a advertising space. For the codebase, please visit the link below to take a look.</p>
			<a class="changecolor" href="https://github.com/erichsueh/erichsueh.github.io" target="_blank">Eric Hsueh.io Github</a>
			
			<p>Some takeaways of this project:
				I think I would have saved myself a lot of time if I built it mobile first instead of the other way around, for future projects, I would definetly do it mobile first then scale it up to desktop.
				That being said, there are probably some small bugs with mobile view that I havn't been able to catch due to a not very extensive testing for mobile. (This is also with an assumption that most people visiting this website would be viewing it on Desktop)
			</p>
		</div>
		<div id="DescriptionLife" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">Team Lifepoints:</h3>
			<h4 class="titlecentered bottomh4">Robotic Scription</h4>
			<p>Test Where thsi goes Life</p>
			<iframe style="width:100%;height:500px;"  src="https://www.youtube.com/embed/lUxzxe5--Vo"></iframe>
			<iframe style="width:100%;height:500px;"  src="https://www.youtube.com/embed/MjVHIKPOf8E"></iframe>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412" target="_blank">Comp 1: 1</a>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412-Comp1" target="_blank">Comp 1:2</a>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412-Comp2" target="_blank">Comp 2</a>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412-Comp3" target="_blank">Comp 3</a>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412-Comp4" target="_blank">Comp 4</a>
			<a class="changecolor" href="https://github.com/erichsueh/LifePoints-412-Comp5" target="_blank">Comp 5</a>
		</div>
		<div id="DescriptionFut" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">Future Projects:</h3>
			<h4 class="titlecentered bottomh4">Ideas in the brew</h4>
			<p>Test Where thsi goes Fut</p>
		</div>
		<div id="DescriptionCon" class="rightstyle projectrightsidebg">
			<h3 class="titlecentered bigerh3">Convolution Net:</h3>
			<h4 class="titlecentered bottomh4">Supervised Number Recognition</h4>
			<p>Test Where thsi goes Con</p>
			<a class="changecolor" href="https://github.com/RupehraChouhan/TeamConvolution" target="_blank">Team Convolution</a>
		</div>
	</div>
	
<script>


//AHAS SCRIPTS
function moverAhas(){
	var bgahas = document.getElementById("ProjBGAhas");
	bgahas.classList.add("blurbg");
}

function moutAhas(){
	var bgahas = document.getElementById("ProjBGAhas");
	bgahas.classList.remove("blurbg");
}

function clickAhas(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionAhas");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}


//UBER SCRIPTS
function moverUBER(){
	var bgahas = document.getElementById("ProjBGUBER");
	bgahas.classList.add("blurbg");
}

function moutUBER(){
	var bgahas = document.getElementById("ProjBGUBER");
	bgahas.classList.remove("blurbg");
}

function clickUBER(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionUBER");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}

//GITSCRIPTS
function moverGit(){
	var bgahas = document.getElementById("ProjBGGit");
	bgahas.classList.add("blurbg");
}

function moutGit(){
	var bgahas = document.getElementById("ProjBGGit");
	bgahas.classList.remove("blurbg");
}

function clickGit(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionGit");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}

//Lifepoints
function moverLife(){
	var bgahas = document.getElementById("ProjBGLife");
	bgahas.classList.add("blurbg");
}

function moutLife(){
	var bgahas = document.getElementById("ProjBGLife");
	bgahas.classList.remove("blurbg");
}

function clickLife(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionLife");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}


//FutureProjects
function moverFut(){
	var bgahas = document.getElementById("ProjBGFut");
	bgahas.classList.add("blurbg");
}

function moutFut(){
	var bgahas = document.getElementById("ProjBGFut");
	bgahas.classList.remove("blurbg");
}

function clickFut(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionFut");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}

//Convolution Net
function moverCon(){
	var bgahas = document.getElementById("ProjBGCon");
	bgahas.classList.add("blurbg");
}

function moutCon(){
	var bgahas = document.getElementById("ProjBGCon");
	bgahas.classList.remove("blurbg");
}

function clickCon(){
	//console.log("CLICKED HAHAHS");
	var sideview = document.getElementById("DescriptionCon");
	if("none"==sideview.style.display){
		gotolistView();
		closeDisplay();
		sideview.style.display = "inline"
		sideview.scrollIntoView();
	}
	else{
		gotogridView();
		closeDisplay();
	}
}

function closeDisplay(){
	//removes all views
	document.getElementById("DescriptionAhas").style.display = "none";
	document.getElementById("DescriptionUBER").style.display = "none";
	document.getElementById("DescriptionGit").style.display = "none";
	document.getElementById("DescriptionLife").style.display = "none";
	document.getElementById("DescriptionFut").style.display = "none";
	document.getElementById("DescriptionCon").style.display = "none";
}



closeDisplay();
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;

// List View
function gotolistView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%";
  }
  document.getElementById("ProjAll").style.width ="400px";
  //console.log("listview");
}

// Grid View
function gotogridView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "33.3%";
  }
  document.getElementById("ProjAll").style.width ="100%";
  //console.log("gridview");
}

/* Optional: Add active class to the current button (highlight it) */
var container = document.getElementById("btnContainer");
var btns = container.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>