aboutsummaryrefslogtreecommitdiff
path: root/resume-v1/src
diff options
context:
space:
mode:
authorSyndamia <kamen.d.mladenov@protonmail.com>2021-08-19 13:52:27 +0300
committerSyndamia <kamen.d.mladenov@protonmail.com>2021-08-19 13:52:27 +0300
commitab1215fb6367c1d4b4e11aba672d992147451644 (patch)
tree6bd41bf100b5c3715078c2e716e1cbea4b3c696f /resume-v1/src
parentd7fad2b6019eea264c3bd33b7098ba27b95cdcf8 (diff)
downloadcss-snippets-main.tar
css-snippets-main.tar.gz
css-snippets-main.zip
Renamed resume to resume-v1 and added resume-v1.1HEADmain
Diffstat (limited to 'resume-v1/src')
-rw-r--r--resume-v1/src/resume.html191
-rw-r--r--resume-v1/src/sample-profile-picture.jpegbin0 -> 398276 bytes
-rw-r--r--resume-v1/src/style.css204
3 files changed, 395 insertions, 0 deletions
diff --git a/resume-v1/src/resume.html b/resume-v1/src/resume.html
new file mode 100644
index 0000000..77aa441
--- /dev/null
+++ b/resume-v1/src/resume.html
@@ -0,0 +1,191 @@
+<!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">
+ Gosho Petrov
+ </div>
+ <div id="text-data">
+ <div class="info">
+ <div class="stacked-info">
+ <b>Date of birth</b><br>
+ 6.9.420
+ </div>
+ <div class="stacked-info">
+ <b>Address</b><br>
+ Gosho Street
+ </div>
+ <div class="stacked-info">
+ <b>Phone Number</b><br>
+ 1-800-Gosho
+ </div>
+ </div>
+ <div class="info">
+ <div class="stacked-info">
+ <b>Email</b><br>
+ gosho@ne-me-vijdash.pich
+ </div>
+ <div class="stacked-info">
+ <b>GitHub account</b><br>
+ github.com/adfadfadfasdga
+ </div>
+ <div class="stacked-info">
+ <b>LinkedIn profile</b><br>
+ linkedin.com/in/asdagadggw
+ </div>
+ </div>
+ </div>
+ </div>
+ <img id="picture-data" src="./sample-profile-picture.jpeg">
+ </div>
+ </summary>
+ <hr>
+ <section class="info-section">
+ <div class="card">
+ <div class="card-title section-title">
+ ║ PROFILE ║
+ </div>
+ <div class="card-content">
+ Vikat mi ela za malko, I POCHVAM DA BEGAM BATE
+ </div>
+ </div>
+ </section>
+ <hr>
+ <section class="info-section">
+ <div class="section-title">
+ ║ EDUCATION ║
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1990 - 1994
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Joe University
+ </div>
+ Mi, nema kvo da kaja
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1994 - 2004
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Cool University
+ </div>
+ Yep, it's true. What are you gonna do about it?
+ </div>
+ </div>
+ <div class="card end-card">
+ <div class="card-title">
+ 1994 - 2004
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ The coolest university
+ </div>
+ I'll have you know, I gratuated top of my class.
+ </div>
+ </div>
+ <hr>
+ <div class="section-title">
+ ║ EXPERIENCE ║
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1990 - now
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Megamind Inc.
+ </div>
+ Bachkam, kvo da kaja
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1890 - 1990
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Intergalatical Time Federation
+ </div>
+ Learned how to control time.
+ </div>
+ </div>
+
+ </section>
+ <hr>
+ <section class="info-section">
+ <div class="section-title">
+ ║ PROJECTS ║
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1990 - now
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Yo mama
+ </div>
+ HA, goteem
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1989 - 1999
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Crime
+ </div>
+ </div>
+ </div>
+ <hr>
+ <div class="card">
+ <div class="card-title section-title">
+ ║ SKILLS ║
+ </div>
+ <div class="card-content">
+ <table class="ratings">
+ <tr>
+ <td>Dumb Shit</td>
+ <td>●●●●●</td>
+ <td>Other Shit</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>Programming</td>
+ <td>●●●●●</td>
+ <td>Programming</td>
+ <td>●○○○○</td>
+ </tr>
+ </table>
+ </div>
+ </section>
+ </article>
+ </main>
+</body>
+
+</html>
diff --git a/resume-v1/src/sample-profile-picture.jpeg b/resume-v1/src/sample-profile-picture.jpeg
new file mode 100644
index 0000000..531c03b
--- /dev/null
+++ b/resume-v1/src/sample-profile-picture.jpeg
Binary files differ
diff --git a/resume-v1/src/style.css b/resume-v1/src/style.css
new file mode 100644
index 0000000..fb4927b
--- /dev/null
+++ b/resume-v1/src/style.css
@@ -0,0 +1,204 @@
+:root {
+ --font-color: #444;
+ --padding: .25in;
+ --picture-size: 10em;
+ --page-margin: 5mm;
+}
+
+* {
+ font-size: 19px;
+ font-family: sans-serif;
+}
+
+hr {
+ width: auto;
+ border: 1px solid rgb(210, 210, 210);
+ margin: .9em 0;
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: white;
+}
+
+/* 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%;
+}
+
+.content > hr {
+ border-color: var(--font-color);
+}
+
+/* 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-title {
+ font-weight: bold;
+ margin-bottom: .5em;
+}
+
+/* Card */
+
+.card {
+ width: 100%;
+ display: flex;
+ margin-bottom: 1em;
+}
+
+.card-title {
+ width: 20%;
+ font-weight: bold;
+}
+
+.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: 2px 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;
+ }
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 16:16:13 +0000