aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSyndamia <kamen.d.mladenov@protonmail.com>2021-02-16 19:38:09 +0200
committerSyndamia <kamen.d.mladenov@protonmail.com>2021-02-16 19:38:09 +0200
commit9bf83c951fa10975ae05d85a3982e2394ec886c5 (patch)
tree10e4a4048283fc5a6de353b72b0c1d7559c18c9f
parenta180cfd7fbf4a857940e7693fef64ce96b12842b (diff)
downloadcss-snippets-9bf83c951fa10975ae05d85a3982e2394ec886c5.tar
css-snippets-9bf83c951fa10975ae05d85a3982e2394ec886c5.tar.gz
css-snippets-9bf83c951fa10975ae05d85a3982e2394ec886c5.zip
Added a static resume page design
Diffstat
-rw-r--r--resume/README.md1
-rw-r--r--resume/preview.pngbin0 -> 153313 bytes
-rw-r--r--resume/src/index.html169
-rw-r--r--resume/src/styles.css154
4 files changed, 324 insertions, 0 deletions
diff --git a/resume/README.md b/resume/README.md
new file mode 100644
index 0000000..5d784e9
--- /dev/null
+++ b/resume/README.md
@@ -0,0 +1 @@
+![](./preview.png)
diff --git a/resume/preview.png b/resume/preview.png
new file mode 100644
index 0000000..d0055f1
--- /dev/null
+++ b/resume/preview.png
Binary files differ
diff --git a/resume/src/index.html b/resume/src/index.html
new file mode 100644
index 0000000..07be591
--- /dev/null
+++ b/resume/src/index.html
@@ -0,0 +1,169 @@
+<!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 id="content">
+ <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/styles.css b/resume/src/styles.css
new file mode 100644
index 0000000..3601e33
--- /dev/null
+++ b/resume/src/styles.css
@@ -0,0 +1,154 @@
+:root {
+ --font-color: #444;
+ --padding: .25in;
+}
+
+* {
+ 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;
+}
+
+body {
+ width: 100vw;
+ height: 100vh;
+ padding: var(--padding);
+ margin: 0;
+ box-sizing: border-box;
+ background-color: white;
+}
+
+#content {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ border: 3px solid var(--font-color);
+ overflow-y: auto;
+ padding: var(--padding);
+ display: flex;
+ flex-direction: column;
+}
+
+#content::-webkit-scrollbar {
+ display: none;
+}
+
+#content>* {
+ width: 100%;
+}
+
+#content>hr {
+ border-color: var(--font-color);
+}
+
+/* About */
+
+#about {
+ display: flex;
+ width: 100%;
+ height: fit-content;
+ position: relative;
+}
+
+#data {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+#name {
+ flex: 1;
+ font-size: 3em;
+ font-weight: bold;
+}
+
+#info {
+ font-size: .9em;
+ display: flex;
+}
+
+#info>* {
+ flex: 1;
+}
+
+.stacked-info {
+ font-size: .95em;
+ border-left: 1px solid var(--font-color);
+ padding: 0 1em;
+}
+
+#picture {
+ height: 10em;
+ max-width: 10em;
+}
+
+#picture > img {
+ width: inherit;
+ height: inherit;
+}
+
+/* Card */
+
+.card {
+ width: 100%;
+ display: flex;
+}
+
+.card-title {
+ width: 30%;
+ 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;
+}
+
+/* Rating */
+
+.ratings {
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.rating {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ margin-bottom: .7em;
+}
+
+.rating-title {
+ font-weight: bold;
+ margin-right: 1em;
+}
+
+.rating-amount {
+ flex: 1;
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 06:47:28 +0000