Skip to content

Commit

Permalink
redesign site
Browse files Browse the repository at this point in the history
  • Loading branch information
lvn committed Jan 7, 2015
1 parent 8901041 commit 4df71ca
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 0 deletions.
118 changes: 118 additions & 0 deletions site/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
@import url(https://fonts.googleapis.com/css?family=Rajdhani:300,400,500);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,300italic,700);

body {
padding: 0;
margin: 0;
font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
background-color: #34495e;
color: #ecf0f1;
}

h1, h2, h3, h4 {
font-weight: 400;
margin: 0;
}

p, li {
font-weight: 300;
}

p {
text-align: justify;
}

.thin {
font-weight: 300;
}

.thick {
font-weight: 400;
}

.superthick {
font-weight: 700;
}

.center-text {
text-align: center;
vertical-align: middle;
}

.top-bar {
margin: 0;
width: 100%;
height: 20%;
padding-top: 10px;
padding-bottom: 10px;
min-height: 100px;
background-color: #2c3e50;
vertical-align: middle;
}

.slide {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
width: auto;

}

.tall-slide {
padding-top: 30px;
padding-bottom: 30px;
}

.infobox-container {
display: flex;
justify-content: center;
align-items: flex-start;
}

.infobox {
padding: 15px;
margin: 10px;
background-color: #fbfcfc;
color: #474747;
}

.one-third {
max-width: 33%;
}

.one-half {
max-width: 50%;
}

a {
color: #cccccc;
}

a:hover {
color: #666666;
}

a:visited {
color: #444444;
}

.infobox a {
color: #666666;
}

@media (max-width: 768px) {
.infobox-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.infobox {
padding: 15px;
margin: 10px;
max-width: 100%;
}
}
77 changes: 77 additions & 0 deletions site/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>I am Elvin Yung.</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top-bar center-text">
<h1>Elvin Yung</h1>
<h4><i class="thin">Full Stack Wizard (in Training)</i></h4>
<h4><a href="#am">Who I Am</a> &middot; <a href="#do">What I Do</a> &middot; <a href="#done">What I've Done</a> &middot; <a href="#doing">What I'm Doing</a> &middot; <a href="#talk">Let's Talk</a></h4>
</div>
<div class="slide tall-slide center-text">
<h1>Hi. I'm Elvin Yung.</h1>
<h2 class="thin">I try to write as little code as possible.</h2>
</div>
<div class="slide center-text" id="am">
<h2>Who I Am</h2>
<p>I'm an <del>aspiring</del> software developer.</p>
<p>I currently attend the <a href="https://uwaterloo.ca/">University of Waterloo</a>, in Waterloo, Ontario, Canada, in the middle of the sophomore year of an Honours Computer Science Co-op program.</p>
<div class="infobox-container">
<div class="infobox">
<h3>EventMobi</h3>
<h4>Software Developer Intern</h4>
<ul>
<li>Developed backend infrastructure for a cross-platform Amazon SNS backed push notifications system with Flask and SQLAlchemy</li>
</ul>
</div>
</div>
</div>
<div class="slide center-text" id="do">
<h2>What I Do</h2>
<p>I build software.</p>
<div class="infobox-container">
<div class="infobox">
<h3>EventMobi</h3>
<h4>Software Developer Intern</h4>
<ul>
<li>Developed backend infrastructure for a cross-platform Amazon SNS backed push notifications system with Flask and SQLAlchemy</li>
</ul>
</div>
</div>
</div>
<div class="slide center-text" id="done">
<h2>What I've Done</h2>
<div class="infobox-container">
<div class="infobox one-third">
<h3>Uberman</h3>
<a href="https://www.npmjs.com/package/uberman">NPM</a> &middot; <a href="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/elvinyung/uberman">Github</a>
<p>Uberman is a framework for building pure RESTful hypermedia-driven data interfaces. It is written in Node.js, using Express as a middleware framework and MongoDB as a datastore.</p>
<p>I was mainly inspired by the <a href="https://martinfowler.com/articles/richardsonMaturityModel.html">Richardson Maturity Model</a>, and wanted to build a tool that could create arbitrary RESTful data APIs that are simultaneously compliant with the various RFC specifications, as well as Roy Fielding's <a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm">original dissertation</a>.</p>
<p>The result is a full-featured REST API framework for CRUD data operations, fully utilizing HATEOAS to create discoverable APIs.</p>
</div>
<div class="infobox one-third">
<h3>Pypress</h3>
<p>Pypress is a web framework written in Python. It started off as an attempt to emulate request routing powered by middleware stacking (à la Express, Sinatra, Martini, etc.) in Python.</p>
</div>
<div class="infobox one-third">
<h3>Catacombs of Chaos</h3>
<p>Catacombs of Chaos is a roguelike roleplaying game written in C# with XNA. It uses procedural generation to create infinitely replayable content.</p>
</div>
</div>
</div>
<div class="slide center-text" id="doing">
<h2>What I'm Doing</h2>
<p>I'm currently trying to learn these things:</p>
<ul>
<li>Clojure - because transducers are cool.</li>
<li>Erlang - because pattern matching is cool.</li>
</ul>
</div>
<div class="slide center-text" id="talk">
<h2>Let's Talk</h2>
<p>You can reach me via <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</body>
</html>

0 comments on commit 4df71ca

Please sign in to comment.