Renamed resume to resume-v1 and added resume-v1.1HEADmain

21 files changed, 533 insertions, 0 deletions

diff --git a/resume-v1.1/README.md b/resume-v1.1/README.md
new file mode 100644
index 0000000..f9977ae
--- /dev/null
+++ b/resume-v1.1/README.md
@@ -0,0 +1,106 @@
+This is a small template for making resumes. Edit the HTML and CSS with your values and then print it to a PDF file **(WITH AN A4 SIZE OF PAPER)**. What you see should be the same as what you get after printing (open an issue if you've found a discrpetancy!).
+
+![](./screenshots/preview.png)
+*The sample profile picture is taken from [thispersondoesnotexist.com](https://thispersondoesnotexist.com/)*
+
+# CSS classes
+
+In the following sections you'll get explanations and examples about the main styling classes.
+
+## section-head
+
+Each part of a page should be divided into sections. Each section has a section-head and [cards](#card). You'll need to have a `section-head` div, and inside a `section-title` and `hr` element.
+
+Sample usage:
+```html
+<div class="section-head">
+	<div class="section-title">
+		Profile
+	</div>
+	<hr>
+</div>
+```
+![](./screenshots/sample-section-head.png)
+
+## stacked-info
+
+It's used for the content, beside your profile picture. It just shows text with a line to left. You can add a bold title by wraping the title text in `<b>` and then adding a line break (`<br>`). It's usually inside an `info` class.
+
+Sample usage:
+```html
+<div class="stacked-info">
+	<b>Date of birth</b><br>
+	01.01.1992
+</div>
+```
+![](./screenshots/sample-stacked-info.png)
+
+## card
+
+Cards are the main type of element. Each card is as wide as it can be and it contains it's title to the left, which is bold, and it's content to the right.
+
+Sample usage:
+```html
+<div class="card">
+	<div class="card-title">
+		About Me
+	</div>
+	<div class="card-content">
+		I'm a person
+	</div>
+</div>
+```
+![](./screenshots/sample-card.png)
+
+### card-sub-title
+
+You can also add a special title inside the content part of a card. It will be bold and have a line to the left of it (similar to [stacked-info](#stacked-info)). The actual contents should be below it.
+
+Sample usage:
+```html
+<div class="card">
+	<div class="card-title">
+		About Me
+	</div>
+	<div class="card-content">
+		<div class="card-sub-title">
+			I'm a person
+		</div>
+		Yep, it's true.
+	</div>
+</div>
+```
+![](./screenshots/sample-card-sub-title.png)
+
+## ratings
+
+Only tables **must** have the `ratings` class. It's a special type of table, where you're meant to add a title and then add some sort of text that indicates how good you are at it. Every two columns are separated by a border. All columns have the same width.
+
+Sample usage:
+```html
+<table class="ratings">
+	<tr>
+		<td>C#</td>
+		<td>●●●●●</td>
+		<td>F#</td>
+		<td>●○○○○</td>
+	</tr>
+	<tr>
+		<td>C++</td>
+		<td>●●●○○</td>
+		<td>C</td>
+		<td>●●●●○</td>
+	</tr>
+</table>
+```
+![](./screenshots/sample-ratings.png)
+
+**Note:** obviously, you can use whatever text you want for the rating values, I just like the circles
+
+# Special styling
+
+Some stuff have some caveats to how and when they are styled.
+
+## page
+
+The `page` class, in which each page is stored, centers it in the screen, but while printing there is a specific margin.
diff --git a/resume-v1.1/output.pdf b/resume-v1.1/output.pdf
new file mode 100644
index 0000000..9a63e64
--- /dev/null
+++ b/resume-v1.1/output.pdf
diff --git a/resume-v1.1/screenshots/preview.png b/resume-v1.1/screenshots/preview.png
new file mode 100644
index 0000000..7b8ca2d
--- /dev/null
+++ b/resume-v1.1/screenshots/preview.png
diff --git a/resume/screenshots/sample-card-sub-title.png b/resume-v1.1/screenshots/sample-card-sub-title.png
index 4f005c2..4f005c2 100644
--- a/resume/screenshots/sample-card-sub-title.png
+++ b/resume-v1.1/screenshots/sample-card-sub-title.png
diff --git a/resume/screenshots/sample-card.png b/resume-v1.1/screenshots/sample-card.png
index d37486b..d37486b 100644
--- a/resume/screenshots/sample-card.png
+++ b/resume-v1.1/screenshots/sample-card.png
diff --git a/resume/screenshots/sample-ratings.png b/resume-v1.1/screenshots/sample-ratings.png
index 56a8833..56a8833 100644
--- a/resume/screenshots/sample-ratings.png
+++ b/resume-v1.1/screenshots/sample-ratings.png
diff --git a/resume-v1.1/screenshots/sample-section-head.png b/resume-v1.1/screenshots/sample-section-head.png
new file mode 100644
index 0000000..2073cfe
--- /dev/null
+++ b/resume-v1.1/screenshots/sample-section-head.png
diff --git a/resume/screenshots/sample-stacked-info.png b/resume-v1.1/screenshots/sample-stacked-info.png
index 644b93e..644b93e 100644
--- a/resume/screenshots/sample-stacked-info.png
+++ b/resume-v1.1/screenshots/sample-stacked-info.png
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
new 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;
+  }
+}
diff --git a/resume/README.md b/resume-v1/README.md
index 602f813..602f813 100644
--- a/resume/README.md
+++ b/resume-v1/README.md
diff --git a/resume/output.pdf b/resume-v1/output.pdf
index a349bb7..a349bb7 100644
--- a/resume/output.pdf
+++ b/resume-v1/output.pdf
diff --git a/resume/screenshots/preview.png b/resume-v1/screenshots/preview.png
index 5a0f446..5a0f446 100644
--- a/resume/screenshots/preview.png
+++ b/resume-v1/screenshots/preview.png
diff --git a/resume-v1/screenshots/sample-card-sub-title.png b/resume-v1/screenshots/sample-card-sub-title.png
new file mode 100644
index 0000000..4f005c2
--- /dev/null
+++ b/resume-v1/screenshots/sample-card-sub-title.png
diff --git a/resume-v1/screenshots/sample-card.png b/resume-v1/screenshots/sample-card.png
new file mode 100644
index 0000000..d37486b
--- /dev/null
+++ b/resume-v1/screenshots/sample-card.png
diff --git a/resume-v1/screenshots/sample-ratings.png b/resume-v1/screenshots/sample-ratings.png
new file mode 100644
index 0000000..56a8833
--- /dev/null
+++ b/resume-v1/screenshots/sample-ratings.png
diff --git a/resume-v1/screenshots/sample-stacked-info.png b/resume-v1/screenshots/sample-stacked-info.png
new file mode 100644
index 0000000..644b93e
--- /dev/null
+++ b/resume-v1/screenshots/sample-stacked-info.png
diff --git a/resume/src/resume.html b/resume-v1/src/resume.html
index 77aa441..77aa441 100644
--- a/resume/src/resume.html
+++ b/resume-v1/src/resume.html
diff --git a/resume/src/sample-profile-picture.jpeg b/resume-v1/src/sample-profile-picture.jpeg
index 531c03b..531c03b 100644
--- a/resume/src/sample-profile-picture.jpeg
+++ b/resume-v1/src/sample-profile-picture.jpeg
diff --git a/resume/src/style.css b/resume-v1/src/style.css
index fb4927b..fb4927b 100644
--- a/resume/src/style.css
+++ b/resume-v1/src/style.css