Skip to content

played around with resume styling #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edwinyung wants to merge 1 commit into
base: master
Choose a base branch
from
Open

played around with resume styling #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
311 changes: 262 additions & 49 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,80 +1,293 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Viking CSS Garden</title>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
</head>
<body>

<!-- Main Header -->
<header id="main-header">
<h1 class="site-title">Viking CSS Garden</h1>
<h2 class="tagline">A place for your styling creativity to grow</h2>
</header>

</head>

<!-- Main Content -->
<main id="main-content">
<section class="main-content-section">
<h2 class="section-title">Growing Your Garden</h2>
<body>
<section id="main">

<article class="section-content">
<p>The Viking CSS Garden is a place for you to take raw potential and turn it into something beautiful with the power of CSS. Take the seeds that are this HTML file and plant them. Water and feed them with nurishing styles, colors and images. Watch them evolve into a stunning display.</p>
</article>
</section>
<header id="title">
<h1>John Doe</h1>
<span class="subtitle">Plaintiff, defendant &amp; witness</span>
</header>

<section class="main-content-section">
<h2 class="section-title">Norse mythology</h2>
<section class="main-block">
<h2>
<i class="fa fa-suitcase"></i> Experiences
</h2>
<section class="blocks">
<div class="date">
<span>XX</span><span>XX</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Some Position</h3>
<span class="place">Some Workplace</span>
<span class="location">(remote)</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>XX</span><span>XX</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Another Position</h3>
<span class="place">Some Workplace</span>
<span class="location">Some City, Some Country</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>2013</span><span>2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Yet Another Job Position</h3>
<span class="place">Some Workplace</span>
<span class="location">Some City, Some Country</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
</ul>
</div>
</div>
</section>
</section>
<section class="main-block">
<h2>
<i class="fa fa-folder-open"></i> Selected Projects
</h2>
<section class="blocks">
<div class="date">
<span>XX</span><span>XX</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Some Project 1</h3>
<span class="place">Some workplace</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>XX</span><span>XX</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Some Project 2</h3>
<span class="place">Some workplace</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio. Vestibulum dapibus pharetra odio, egestas ullamcorper ipsum congue ac. Maecenas viverra tortor eget convallis vestibulum. Donec pulvinar venenatis est, non sollicitudin metus laoreet sed. Fusce tincidunt felis nec neque aliquet porttitor</li>
</ul>
</div>
</div>
</section>
<section class="blocks">
<div class="date">
<span>2014</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Some Project 3</h3>
<span class="place">Some workplace</span>
</header>
<div>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec mi ante. Etiam odio eros, placerat eu metus id, gravida eleifend odio</li>
</ul>
</div>
</div>
</section>
</section>

<article class="section-content">
<p>Norse mythology is the body of mythology of the North Germanic people stemming from Norse paganism and continuing after the Christianization of Scandinavia and into the Scandinavian folklore of the modern period. The northernmost extension of Germanic mythology, Norse mythology consists of tales of various deities, beings, and heroes derived from numerous sources from both before and after the pagan period, including medieval manuscripts, archaeological representations, and folk tradition.</p>

<p>Numerous gods are mentioned in the source texts such as the hammer-wielding, humanity-protecting god Thor, who relentlessly fights his foes; the one-eyed, raven-flanked god Odin, who craftily pursues knowledge throughout the worlds and bestowed among humanity the runic alphabet; the beautiful, seiðr-working, feathered cloak-clad goddess Freyja who rides to battle to choose among the slain; the vengeful, skiing goddess Skaði, who prefers the wolf howls of the winter mountains to the seashore; the powerful god Njörðr, who may calm both sea and fire and grant wealth and land; the god Freyr, whose weather and farming associations bring peace and pleasure to humanity; the goddess Iðunn, who keeps apples that grant eternal youthfulness; the mysterious god Heimdallr, who is born of nine mothers, can hear grass grow, has gold teeth, and possesses a resounding horn; the jötunn Loki, who brings tragedy to the gods by engineering the death of the goddess Frigg's beautiful son Baldr; and numerous other deities.</p>
<section class="main-block concise">
<h2>
<i class="fa fa-graduation-cap"></i> Education
</h2>

<p>Most of the surviving mythology centers on the plights of the gods and their interaction with various other beings, such as humanity and the jötnar, beings who may be friends, lovers, foes and/or family members of the gods. The cosmos in Norse mythology consists of Nine Worlds that flank a central cosmological tree, Yggdrasil. Units of time and elements of the cosmology are personified as deities or beings. Various forms of a creation myth are recounted, where the world is created from the flesh of the primordial being Ymir, and the first two humans are Ask and Embla. These worlds are foretold to be reborn after the events of Ragnarök, when an immense battle occurs between the gods and their enemies, and the world is enveloped in flames, only to be reborn anew. There the surviving gods will meet, and the land will be fertile and green, and two humans will repopulate the world.</p>
<section class="blocks">
<div class="date">
<span>2009</span><span>2015</span>
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>B.A. in Economics and Government (Double Major))</h3>
<span class="place">Dartmouth College</span>
<span class="location">Hanover, NH</span>
</header>
<div>Scholarship</div>
</div>
</section>

<p>Norse mythology has been the subject of scholarly discourse since the 17th century, when key texts were brought to the attention of the intellectual circles of Europe. By way of comparative mythology and historical linguistics, scholars have identified elements of Germanic mythology reaching as far back as Proto-Indo-European mythology. In the modern period, the Romanticist Viking revival re-awoke an interest in the subject matter, and references to Norse mythology may now be found throughout modern popular culture. The myths have further been revived in a religious context among adherents of Germanic Neopaganism.</p>
</article>
<section class="blocks">
<div class="date">
</div>
<div class="decorator">
</div>
<div class="details">
<header>
<h3>Massive Online Fee&ndash;Required Course (selective list)</h3>
</header>
<div class="concise">
<ul>
<li>lorem ipsum</li>
</ul>
</div>
</div>
</section>
</section>
</section>

<cite class="citation">- From <a href="https://en.wikipedia.org/wiki/Norse_mythology">Norse Mythology</a></cite>
</section>
</main>
<!-- Sidebar -->
<aside id="sidebar">

<nav class="side-block" id="contact">
<h1>
Contact Info
</h1>
<ul class="nav-link">
<li class="nav-link-list-item">
<a class="nav-link" href="mailto:edwinyung@edwinyung.com">Email</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://www.linkedin.com/in/eyung">linkedin.com/in/eyung</a>
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://www.edwinyung.com">edwinyung.com</a>
</li>
<p>New York City Metro Area</p>
</li>
</ul>
</nav>

<!-- Sidebar -->
<aside id="sidebar">
<h2 class="section-title">Other Gardens</h2>
<nav class="side-block" id="skills">
<h1>
Skills &amp; Competencies
</h1>
<ul class="nav-link">
<li class="nav-link-list-item">
HTML/CSS/LATEX Markup
</li>
<li class="nav-link-list-item">
Javascript/JQuery
</li>
<li class="nav-link-list-item">
Python
</li>
<li class="nav-link-list-item">
Java
</li>
<li class="nav-link-list-item">
Financial Modeling
</li>
<li class="nav-link-list-item">
Sales and Marketing
</li>
</nav>

<nav class="sidebar-nav">
<ul class="nav-links">
<nav class="side-block" id="interests">
<h1>
Awards &amp; Accomplishments
</h1>
<ul class="nav-link">
<li class="nav-link-list-item">
Math and Statistics for Data
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Chinese_garden">Chinese Garden</a>
Politics and History
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Dutch_garden">Dutch Garden</a>
Endurance Running
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/English_gardens">English Gardens</a>
Weightraining
</li>
</nav>

<nav class="side-block" id="interests">
<h1>
Personal Activities
</h1>
<ul class="nav-link">
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Greek_gardens">Greek Gardens</a>
Math and Statistics for Data
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Italian_gardens">Italian Gardens</a>
Politics and History
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Japanese_gardens">Japanese Gardens</a>
Endurance Running
</li>
<li class="nav-link-list-item">
<a class="nav-link" href="https://en.wikipedia.org/wiki/Spanish_gardens">Spanish Gardens</a>
Weightraining
</li>
</ul>
</nav>
</aside>
</body>
</html>

<nav class="side-block" id="interests">
<h1>
Interests
</h1>
<ul class="nav-link">
<li class="nav-link-list-item">
Math and Statistics for Data
</li>
<li class="nav-link-list-item">
Politics and History
</li>
<li class="nav-link-list-item">
Endurance Running
</li>
<li class="nav-link-list-item">
Weightraining
</li>
</nav>
</aside>

</body>
</html>
Loading