aboutsummaryrefslogtreecommitdiff
path: root/resume/src
diff options
context:
space:
mode:
authorSyndamia <kamen.d.mladenov@protonmail.com>2021-03-02 16:01:20 +0200
committerSyndamia <kamen.d.mladenov@protonmail.com>2021-03-02 16:01:20 +0200
commita8552d77008894af2e9df0d196589b08e99ade1f (patch)
tree2da86f1cd8f53651cf43cd897eb57d301fcd7f0a /resume/src
parent9aeb5903e2ca9c01f68ef6f4ffe936cc6e377df6 (diff)
downloadcss-snippets-a8552d77008894af2e9df0d196589b08e99ade1f.tar
css-snippets-a8552d77008894af2e9df0d196589b08e99ade1f.tar.gz
css-snippets-a8552d77008894af2e9df0d196589b08e99ade1f.zip
Completely revamped resume. Made code simpler and handle better printing. Added better instructions and images to the resume README.
Diffstat (limited to 'resume/src')
-rw-r--r--resume/src/index.html169
-rw-r--r--resume/src/resume.html191
-rw-r--r--resume/src/sample-profile-picture.jpegbin0 -> 398276 bytes
-rw-r--r--resume/src/style.css (renamed from resume/src/styles.css)104
4 files changed, 262 insertions, 202 deletions
diff --git a/resume/src/index.html b/resume/src/index.html
deleted file mode 100644
index b03ac30..0000000
--- a/resume/src/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
- <meta charset="UTF-8">
- <meta name="author" content="Kamen Mladenov">
- <meta name="robots" content="index, follow">
- <meta name="theme-color" content="#ffffff">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="./styles.css">
- <title>My Resume</title>
-</head>
-
-<body>
- <div class="content a4-paper">
- <div id="about">
- <div id="data">
- <div id="name">
- Gosho Petrov
- </div>
- <div id="info">
- <div class="stacked-info">
- <b>Address</b><br>
- Gosho Street
- </div>
- <div class="stacked-info">
- <b>Phone</b><br>
- 1-800-Gosho
- </div>
- <div class="stacked-info">
- <b>Email</b><br>
- john.cena@ne-me-vijdash.gluplako
- </div>
- </div>
- </div>
- <div id="picture">
- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/John_Cena_July_2018.jpg/1024px-John_Cena_July_2018.jpg">
- </div>
- </div>
- <hr>
- <div class="info-section">
- <div class="card">
- <div class="card-title">
- PROFILE
- </div>
- <div class="card-content">
- Vikat mi, ela za malko, I POCHVAM DA BEGAM BATE
- </div>
- </div>
- <hr>
- <div class="card">
- <div class="card-title">
- EDUCATION
- </div>
- <div class="card-content">
- <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">
- <div class="card-title">
- 2004 - now
- </div>
- <div class="card-content">
- <div class="card-sub-title">
- The coolest university
- </div>
- What are you gonna do? Cry? Shit your pants maybe? Maybe shit and cum?
- </div>
- </div>
- </div>
- </div>
- </div>
- <hr>
- <div class="info-section">
- <div class="card">
- <div class="card-title">
- EXPERIENCE
- </div>
- <div class="card-content">
- <div class="card">
- <div class="card-title">
- 1990 - now
- </div>
- <div class="card-content">
- <div class="card-sub-title">
- Megamind Inc.
- </div>
- Got a problem? Yeah, that's what I though
- </div>
- </div>
- </div>
- </div>
- </div>
- <hr>
- <div class="info-section">
- <div class="card">
- <div class="card-title">
- PERSONAL PROJECTS
- </div>
- <div class="card-content">
- <div class="card">
- <div class="card-title">
- 1990 - now
- </div>
- <div class="card-content">
- <div class="card-sub-title">
- Do I even need to say it?
- </div>
- Like, I'm pretty sure you got the point
- </div>
- </div>
- </div>
- </div>
- <hr>
- <div class="card">
- <div class="card-title">
- SKILLS
- </div>
- <div class="card-content ratings">
- <div class="rating">
- <div class="rating-title">
- Dumb shit
- </div>
- <div class="rating-amount">
- ●●●●●●●●●●
- </div>
- </div>
- <div class="rating">
- <div class="rating-title">
- Making normal static content
- </div>
- <div class="rating-amount">
- ●○○○○○○○○○
- </div>
- </div>
- <div class="rating">
- <div class="rating-title">
- idk anymore
- </div>
- <div class="rating-amount">
- ●●●●●●●●○○
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</body>
-
-</html>
diff --git a/resume/src/resume.html b/resume/src/resume.html
new file mode 100644
index 0000000..77aa441
--- /dev/null
+++ b/resume/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/src/sample-profile-picture.jpeg b/resume/src/sample-profile-picture.jpeg
new file mode 100644
index 0000000..531c03b
--- /dev/null
+++ b/resume/src/sample-profile-picture.jpeg
Binary files differ
diff --git a/resume/src/styles.css b/resume/src/style.css
index 420c624..fb4927b 100644
--- a/resume/src/styles.css
+++ b/resume/src/style.css
@@ -1,18 +1,19 @@
:root {
--font-color: #444;
--padding: .25in;
+ --picture-size: 10em;
+ --page-margin: 5mm;
}
* {
font-size: 19px;
font-family: sans-serif;
- color: var(--font-color)
}
hr {
width: auto;
- border: 1px solid rgb(240, 240, 240);
- margin: 1.5em 0;
+ border: 1px solid rgb(210, 210, 210);
+ margin: .9em 0;
}
body {
@@ -22,16 +23,21 @@ body {
background-color: white;
}
-.a4-paper {
+/* The whole page */
+
+.page {
width: 210mm;
height: 297mm;
- margin: var(--padding) auto;
+ 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;
}
@@ -44,7 +50,7 @@ body {
border-color: var(--font-color);
}
-/* About */
+/* About/Summary */
#about {
display: flex;
@@ -55,39 +61,66 @@ body {
#data {
flex: 1;
+ height: var(--picture-size);
display: flex;
flex-direction: column;
}
#name {
- flex: 1;
- font-size: 3em;
+ font-size: 2.5em;
font-weight: bold;
+ margin-bottom: .2em;
}
-#info {
- font-size: .9em;
+#text-data {
+ font-size: .7em;
+ flex: 1;
+ display: flex;
+}
+
+.info {
+ flex: 1;
+ font-size: inherit;
display: flex;
+ flex-direction: column;
}
-#info > * {
+.info > * {
flex: 1;
}
.stacked-info {
- font-size: .95em;
+ font-size: inherit;
+ line-height: 1.3em;
+ margin-top: .8em;
border-left: 1px solid var(--font-color);
+ box-sizing: border-box;
padding: 0 1em;
}
-#picture {
- height: 10em;
- max-width: 10em;
+.stacked-info:first-child {
+ margin-top: 0;
+}
+
+.stacked-info > b {
+ font-size: inherit;
+}
+
+#picture-data {
+ height: var(--picture-size);
+ width: var(--picture-size);
}
-#picture > img {
- width: inherit;
- height: inherit;
+#picture-data > img {
+ width: var(--picture-size);
+ margin: auto 0;
+}
+
+/* Sections */
+
+.section-title {
+ font-weight: bold;
+ margin-bottom: .5em;
}
/* Card */
@@ -95,10 +128,11 @@ body {
.card {
width: 100%;
display: flex;
+ margin-bottom: 1em;
}
.card-title {
- width: 30%;
+ width: 20%;
font-weight: bold;
}
@@ -127,28 +161,32 @@ body {
margin-bottom: .3em;
}
+.end-card, .card:last-child {
+ margin-bottom: 0;
+}
+
/* Rating */
.ratings {
- flex-direction: row;
- flex-wrap: wrap;
+ width: 100%;
+ border: none;
+ table-layout: fixed;
+ border-collapse: colapse;
+ border-spacing: 0;
}
-.rating {
- flex: 1;
- min-width: 50%;
- display: flex;
- flex-direction: column;
- margin-bottom: 1em;
+.ratings td {
+ padding: 2px 0;
+ text-align: center;
+ vertical-align: middle;
}
-.rating-title {
- font-weight: bold;
- margin-right: .5em;
+.ratings td:nth-child(2n) {
+ border-right: 1px solid black;
}
-.rating-amount {
- flex: 1;
+.ratings td:last-child {
+ border-right-width: 0;
}
/* Proper printing */
@@ -158,7 +196,7 @@ body {
margin: 5mm;
}
@media print {
- html, body, .a4-paper {
+ html, body, .page, .content {
width: 100%;
height: 100%;
margin: 0;
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 17:55:51 +0000