diff options
Diffstat (limited to 'resume-v1.1/src')
| -rw-r--r-- | resume-v1.1/src/resume.html | 210 | ||||
| -rw-r--r-- | resume-v1.1/src/sample-profile-picture.jpeg | bin | 0 -> 432231 bytes | |||
| -rw-r--r-- | resume-v1.1/src/style.css | 217 |
3 files changed, 427 insertions, 0 deletions
diff --git a/resume-v1.1/src/resume.html b/resume-v1.1/src/resume.html new file mode 100644 index 0000000..56aec74 --- /dev/null +++ b/resume-v1.1/src/resume.html @@ -0,0 +1,210 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="./style.css"> + <title>Resume - Gosho Petrov</title> +</head> + +<body> + <main class="page"> + <article class="content"> + <summary id="about"> + <div id="data"> + <div id="name"> + Ivan Mishov + </div> + <div id="text-data"> + <div class="info"> + <div class="stacked-info"> + <b>Date of birth</b><br> + 06.11.1998 + </div> + <div class="stacked-info"> + <b>Address</b><br> + <a href="https://goo.gl/maps/wz1R2DsZEVcGhEkw7" target="_blank"> + Tupac Lane, Las Vegas, USA + </a> + </div> + <div class="stacked-info"> + <b>Phone Number</b><br> + <a href="tel:(999)888-8888"> + (999)888-8888 + </a> + </div> + </div> + <div class="info"> + <div class="stacked-info"> + <b>Email</b><br> + <a href="mailto:bill.gates@microsoft.com" target="_blank"> + im@dumbass.com + </a> + </div> + <div class="stacked-info"> + <b>GitHub account</b><br> + <a href="https://github.com/torvalds" target="_blank"> + github.com/im + </a> + </div> + <div class="stacked-info"> + <b>LinkedIn profile</b><br> + <a href="https://www.linkedin.com/in/wozniaksteve/"> + linkedin.com/im + </a> + </div> + </div> + </div> + </div> + <img id="picture-data" src="./sample-profile-picture.jpeg"> + </div> + </summary> + <section class="info-section"> + <div class="section-head"> + <div class="section-title"> + Profile + </div> + <hr> + </div> + <div class="card end-card"> + <div class="card-content"> + “Some quotations," said Zellaby, "are greatly improved by lack of context.” + </div> + </div> + </section> + <section class="info-section"> + <div class="section-head"> + <div class="section-title"> + Education + </div> + <hr> + </div> + <div class="card"> + <div class="card-title"> + 2000<br>↦ 2004 + </div> + <div class="card-content"> + <div class="card-sub-title"> + <a href="https://memeuniversity.lol/" target="_blank">Meme University</a> - More value than Harvard online + </div> + Go from Meme Newbie to a Meme Lord! + </div> + </div> + <div class="card"> + <div class="card-title"> + 1994<br>↦ 2004 + </div> + <div class="card-content"> + <div class="card-sub-title"> + Imaginary University + </div> + Yep, it's true. + </div> + </div> + <div class="card end-card"> + <div class="card-title"> + 1994<br>↦ 2004 + </div> + <div class="card-content"> + <div class="card-sub-title"> + <a href="https://www.nipissingu.ca/" target="_blank">The coolest university</a> + </div> + I'll have you know, I gratuated top of my class. + </div> + </div> + <div class="section-head"> + <div class="section-title"> + Experience + </div> + <hr> + </div> + <div class="card"> + <div class="card-title"> + 1990<br>↦ now + </div> + <div class="card-content"> + <div class="card-sub-title"> + <a href="https://en.wikipedia.org/wiki/Megamind" target="_blank">Megamind Inc.</a> + </div> + We put the Mega inside your mind + </div> + </div> + <div class="card end-card"> + <div class="card-title"> + 1890<br>↦ 1990 + </div> + <div class="card-content"> + <div class="card-sub-title"> + Intergalatical Time Federation + </div> + Learned how to control time. + </div> + </div> + </section> + <section class="info-section"> + <div class="section-head"> + <div class="section-title"> + Projects + </div> + <hr> + </div> + <div class="card"> + <div class="card-title"> + 1990<br>↦ now + </div> + <div class="card-content"> + <div class="card-sub-title"> + Yo mama + </div> + HA, goteem + </div> + </div> + <div class="card end-card"> + <div class="card-title"> + 1989<br>↦ 1999 + </div> + <div class="card-content"> + <div class="card-sub-title"> + Crime + </div> + </div> + </div> + <div class="section-head"> + <div class="section-title"> + Skills + </div> + <hr> + </div> + <div class="card"> + <div class="card-content"> + <table class="ratings"> + <tr> + <td>Dumb</td> + <td>●●●●●</td> + <td>Other, Idk</td> + <td>●●●○○</td> + </tr> + <tr> + <td>Making normal static content</td> + <td>○○○○○</td> + <td>Writing</td> + <td>○○○○○</td> + </tr> + </table> + <br> + <table class="ratings"> + <tr> + <td>Alzheimer</td> + <td>●●●●●</td> + <td>Alzheimer</td> + <td>●○○○○</td> + </tr> + </table> + </div> + </section> + </article> + </main> +</body> + +</html> diff --git a/resume-v1.1/src/sample-profile-picture.jpeg b/resume-v1.1/src/sample-profile-picture.jpeg Binary files differnew file mode 100644 index 0000000..1aa4565 --- /dev/null +++ b/resume-v1.1/src/sample-profile-picture.jpeg diff --git a/resume-v1.1/src/style.css b/resume-v1.1/src/style.css new file mode 100644 index 0000000..82c6e1c --- /dev/null +++ b/resume-v1.1/src/style.css @@ -0,0 +1,217 @@ + +:root { + --font-color: #444; + --padding: .24in; + --picture-size: 10em; + --page-margin: 5mm; +} + +* { + font-size: 19px; + font-family: sans-serif; +} + +hr { + width: auto; + border: 1px solid var(--font-color); + margin: .9em 0; +} + +body { + width: 100%; + height: 100%; + margin: 0; + background-color: white; +} + +a, a:visited { + font-size: inherit; + color: #004080; +} + +/* The whole page */ + +.page { + width: 210mm; + height: 297mm; + margin: 0 auto; +} + +.content { + width: calc(100% - 2 * var(--page-margin)); + height: calc(100% - 2 * var(--page-margin)); + border: 3px solid var(--font-color); + box-sizing: border-box; + padding: var(--padding); + margin: var(--page-margin); + display: flex; + flex-direction: column; +} + +.content > * { + width: 100%; +} + +/* About/Summary */ + +#about { + display: flex; + width: 100%; + height: fit-content; + position: relative; +} + +#data { + flex: 1; + height: var(--picture-size); + display: flex; + flex-direction: column; +} + +#name { + font-size: 2.5em; + font-weight: bold; + margin-bottom: .2em; +} + +#text-data { + font-size: .7em; + flex: 1; + display: flex; +} + +.info { + flex: 1; + font-size: inherit; + display: flex; + flex-direction: column; +} + +.info > * { + flex: 1; +} + +.stacked-info { + font-size: inherit; + line-height: 1.3em; + margin-top: .8em; + border-left: 1px solid var(--font-color); + box-sizing: border-box; + padding: 0 1em; +} + +.stacked-info:first-child { + margin-top: 0; +} + +.stacked-info > b { + font-size: inherit; +} + +#picture-data { + height: var(--picture-size); + width: var(--picture-size); +} + +#picture-data > img { + width: var(--picture-size); + margin: auto 0; +} + +/* Sections */ + +.section-head { + margin: 0.5em 0; + display: flex; + align-items: center; +} + +.section-title { + font-weight: bold; + text-transform: uppercase; +} + +.section-head > hr { + flex: 1; + margin-left: 0.5em; +} + +/* Card */ + +.card { + width: 100%; + display: flex; + margin-bottom: 1em; +} + +.card-title { + width: 15%; + padding-right: 0.5em; +} + +.card-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.card-content > .card { + margin-top: 1em; +} + +.card-content > .card > .card-title { + width: 24%; +} + +.card-content > .card:first-child { + margin-top: 0; +} + +.card-sub-title { + border-left: 3px solid var(--font-color); + padding-left: .5em; + font-weight: bold; + margin-bottom: .3em; +} + +.end-card, .card:last-child { + margin-bottom: 0; +} + +/* Rating */ + +.ratings { + width: 100%; + border: none; + table-layout: fixed; + border-collapse: colapse; + border-spacing: 0; +} + +.ratings td { + padding: 2px 0; + text-align: center; + vertical-align: middle; +} + +.ratings td:nth-child(2n) { + border-right: 1px solid black; +} + +.ratings td:last-child { + border-right-width: 0; +} + +/* Proper printing */ + +@page { + size: A4; + margin: 5mm; +} +@media print { + html, body, .page, .content { + width: 100%; + height: 100%; + margin: 0; + } +} |
