diff options
Diffstat (limited to 'resume')
| -rw-r--r-- | resume/README.md | 95 | ||||
| -rw-r--r-- | resume/output.pdf | bin | 0 -> 448936 bytes | |||
| -rw-r--r-- | resume/preview.png | bin | 160576 -> 0 bytes | |||
| -rw-r--r-- | resume/print-output.pdf | bin | 278746 -> 0 bytes | |||
| -rw-r--r-- | resume/screenshots/preview.png | bin | 0 -> 162723 bytes | |||
| -rw-r--r-- | resume/screenshots/sample-card-sub-title.png | bin | 0 -> 5575 bytes | |||
| -rw-r--r-- | resume/screenshots/sample-card.png | bin | 0 -> 3650 bytes | |||
| -rw-r--r-- | resume/screenshots/sample-ratings.png | bin | 0 -> 4752 bytes | |||
| -rw-r--r-- | resume/screenshots/sample-stacked-info.png | bin | 0 -> 3517 bytes | |||
| -rw-r--r-- | resume/src/index.html | 169 | ||||
| -rw-r--r-- | resume/src/resume.html | 191 | ||||
| -rw-r--r-- | resume/src/sample-profile-picture.jpeg | bin | 0 -> 398276 bytes | |||
| -rw-r--r-- | resume/src/style.css (renamed from resume/src/styles.css) | 104 |
13 files changed, 355 insertions, 204 deletions
diff --git a/resume/README.md b/resume/README.md index a5d0399..3eabd55 100644 --- a/resume/README.md +++ b/resume/README.md @@ -1,3 +1,94 @@ -Note: this is really meant to be printed (either to a printer or to a file). Why not use Word or something similar then? Because Word formatting can get broken over time. +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!). - + + +# CSS classes + +In the following sections you'll get explanations and examples about the main styling classes. + +## 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> +``` + + +## 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 section-title"> + About Me + </div> + <div class="card-content"> + I'm a person + </div> +</div> +``` + + +### 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 section-title"> + About Me + </div> + <div class="card-content"> + <div class="card-sub-title"> + I'm a person + </div> + Yep, it's true. + </div> +</div> +``` + + +## 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> +``` + + +**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. + +## hr + +The `<hr>` element is usually styled as a gray line, but when it's directly inside the content class (meaning when it's between main sectons), it's styled as a color, close to black. + +## 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/output.pdf b/resume/output.pdf Binary files differnew file mode 100644 index 0000000..a349bb7 --- /dev/null +++ b/resume/output.pdf diff --git a/resume/preview.png b/resume/preview.png Binary files differdeleted file mode 100644 index f29f38e..0000000 --- a/resume/preview.png +++ /dev/null diff --git a/resume/print-output.pdf b/resume/print-output.pdf Binary files differdeleted file mode 100644 index f228302..0000000 --- a/resume/print-output.pdf +++ /dev/null diff --git a/resume/screenshots/preview.png b/resume/screenshots/preview.png Binary files differnew file mode 100644 index 0000000..5a0f446 --- /dev/null +++ b/resume/screenshots/preview.png diff --git a/resume/screenshots/sample-card-sub-title.png b/resume/screenshots/sample-card-sub-title.png Binary files differnew file mode 100644 index 0000000..4f005c2 --- /dev/null +++ b/resume/screenshots/sample-card-sub-title.png diff --git a/resume/screenshots/sample-card.png b/resume/screenshots/sample-card.png Binary files differnew file mode 100644 index 0000000..d37486b --- /dev/null +++ b/resume/screenshots/sample-card.png diff --git a/resume/screenshots/sample-ratings.png b/resume/screenshots/sample-ratings.png Binary files differnew file mode 100644 index 0000000..56a8833 --- /dev/null +++ b/resume/screenshots/sample-ratings.png diff --git a/resume/screenshots/sample-stacked-info.png b/resume/screenshots/sample-stacked-info.png Binary files differnew file mode 100644 index 0000000..644b93e --- /dev/null +++ b/resume/screenshots/sample-stacked-info.png 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 Binary files differnew file mode 100644 index 0000000..531c03b --- /dev/null +++ b/resume/src/sample-profile-picture.jpeg 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; |
