forked from lvn/elvinyung.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
195 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> · <a href="#do">What I Do</a> · <a href="#done">What I've Done</a> · <a href="#doing">What I'm Doing</a> · <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> · <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> |