My Resume

From a8552d77008894af2e9df0d196589b08e99ade1f Mon Sep 17 00:00:00 2001 From: Syndamia Date: Tue, 2 Mar 2021 16:01:20 +0200 Subject: Completely revamped resume. Made code simpler and handle better printing. Added better instructions and images to the resume README. --- resume/README.md | 95 ++++++++++++- resume/output.pdf | Bin 0 -> 448936 bytes resume/preview.png | Bin 160576 -> 0 bytes resume/print-output.pdf | Bin 278746 -> 0 bytes resume/screenshots/preview.png | Bin 0 -> 162723 bytes resume/screenshots/sample-card-sub-title.png | Bin 0 -> 5575 bytes resume/screenshots/sample-card.png | Bin 0 -> 3650 bytes resume/screenshots/sample-ratings.png | Bin 0 -> 4752 bytes resume/screenshots/sample-stacked-info.png | Bin 0 -> 3517 bytes resume/src/index.html | 169 ---------------------- resume/src/resume.html | 191 +++++++++++++++++++++++++ resume/src/sample-profile-picture.jpeg | Bin 0 -> 398276 bytes resume/src/style.css | 204 +++++++++++++++++++++++++++ resume/src/styles.css | 166 ---------------------- 14 files changed, 488 insertions(+), 337 deletions(-) create mode 100644 resume/output.pdf delete mode 100644 resume/preview.png delete mode 100644 resume/print-output.pdf create mode 100644 resume/screenshots/preview.png create mode 100644 resume/screenshots/sample-card-sub-title.png create mode 100644 resume/screenshots/sample-card.png create mode 100644 resume/screenshots/sample-ratings.png create mode 100644 resume/screenshots/sample-stacked-info.png delete mode 100644 resume/src/index.html create mode 100644 resume/src/resume.html create mode 100644 resume/src/sample-profile-picture.jpeg create mode 100644 resume/src/style.css delete mode 100644 resume/src/styles.css 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!). -![](./preview.png) +![](./screenshots/preview.png) + +# 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 `` and then adding a line break (`
`). It's usually inside an `info` class. + +Sample usage: +```html +
+ Date of birth
+ 01.01.1992 +
+``` +![](./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 +
+
+ About Me +
+
+ I'm a person +
+
+``` +![](./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 +
+
+ About Me +
+
+
+ I'm a person +
+ Yep, it's true. +
+
+``` +![](./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 + + + + + + + + + + + + + +
C# ●●●●● F# ●○○○○
C++ ●●●○○ C ●●●●○
+``` +![](./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. + +## hr + +The `
` 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 new file mode 100644 index 0000000..a349bb7 Binary files /dev/null and b/resume/output.pdf differ diff --git a/resume/preview.png b/resume/preview.png deleted file mode 100644 index f29f38e..0000000 Binary files a/resume/preview.png and /dev/null differ diff --git a/resume/print-output.pdf b/resume/print-output.pdf deleted file mode 100644 index f228302..0000000 Binary files a/resume/print-output.pdf and /dev/null differ diff --git a/resume/screenshots/preview.png b/resume/screenshots/preview.png new file mode 100644 index 0000000..5a0f446 Binary files /dev/null and b/resume/screenshots/preview.png differ diff --git a/resume/screenshots/sample-card-sub-title.png b/resume/screenshots/sample-card-sub-title.png new file mode 100644 index 0000000..4f005c2 Binary files /dev/null and b/resume/screenshots/sample-card-sub-title.png differ diff --git a/resume/screenshots/sample-card.png b/resume/screenshots/sample-card.png new file mode 100644 index 0000000..d37486b Binary files /dev/null and b/resume/screenshots/sample-card.png differ diff --git a/resume/screenshots/sample-ratings.png b/resume/screenshots/sample-ratings.png new file mode 100644 index 0000000..56a8833 Binary files /dev/null and b/resume/screenshots/sample-ratings.png differ diff --git a/resume/screenshots/sample-stacked-info.png b/resume/screenshots/sample-stacked-info.png new file mode 100644 index 0000000..644b93e Binary files /dev/null and b/resume/screenshots/sample-stacked-info.png differ 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 @@ - - - - - - - - - - - My Resume - - - -
-
-
-
- Gosho Petrov -
-
-
- Address
- Gosho Street -
-
- Phone
- 1-800-Gosho -
-
- Email
- john.cena@ne-me-vijdash.gluplako -
-
-
-
- -
-
-
-
-
-
- PROFILE -
-
- Vikat mi, ela za malko, I POCHVAM DA BEGAM BATE -
-
-
-
-
- EDUCATION -
-
-
-
- 1990 - 1994 -
-
-
- Joe University -
- Mi, nema kvo da kaja -
-
-
-
- 1994 - 2004 -
-
-
- Cool University -
- Yep, it's true. What are you gonna do about it? -
-
-
-
- 2004 - now -
-
-
- The coolest university -
- What are you gonna do? Cry? Shit your pants maybe? Maybe shit and cum? -
-
-
-
-
-
-
-
-
- EXPERIENCE -
-
-
-
- 1990 - now -
-
-
- Megamind Inc. -
- Got a problem? Yeah, that's what I though -
-
-
-
-
-
-
-
-
- PERSONAL PROJECTS -
-
-
-
- 1990 - now -
-
-
- Do I even need to say it? -
- Like, I'm pretty sure you got the point -
-
-
-
-
-
-
- SKILLS -
-
-
-
- Dumb shit -
-
- ●●●●●●●●●● -
-
-
-
- Making normal static content -
-
- ●○○○○○○○○○ -
-
-
-
- idk anymore -
-
- ●●●●●●●●○○ -
-
-
-
-
-
- - - 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 @@ + + + + + + + + Resume - Gosho Petrov + + + +
+
+
+
+
+ Gosho Petrov +
+
+
+
+ Date of birth
+ 6.9.420 +
+
+ Address
+ Gosho Street +
+
+ Phone Number
+ 1-800-Gosho +
+
+
+
+ Email
+ gosho@ne-me-vijdash.pich +
+
+ GitHub account
+ github.com/adfadfadfasdga +
+
+ LinkedIn profile
+ linkedin.com/in/asdagadggw +
+
+
+
+ + +
+
+
+
+
+ ║ PROFILE ║ +
+
+ Vikat mi ela za malko, I POCHVAM DA BEGAM BATE +
+
+
+
+
+
+ ║ EDUCATION ║ +
+
+
+ 1990 - 1994 +
+
+
+ Joe University +
+ Mi, nema kvo da kaja +
+
+
+
+ 1994 - 2004 +
+
+
+ Cool University +
+ Yep, it's true. What are you gonna do about it? +
+
+
+
+ 1994 - 2004 +
+
+
+ The coolest university +
+ I'll have you know, I gratuated top of my class. +
+
+
+
+ ║ EXPERIENCE ║ +
+
+
+ 1990 - now +
+
+
+ Megamind Inc. +
+ Bachkam, kvo da kaja +
+
+
+
+ 1890 - 1990 +
+
+
+ Intergalatical Time Federation +
+ Learned how to control time. +
+
+ +
+
+
+
+ ║ PROJECTS ║ +
+
+
+ 1990 - now +
+
+
+ Yo mama +
+ HA, goteem +
+
+
+
+ 1989 - 1999 +
+
+
+ Crime +
+
+
+
+
+
+ ║ SKILLS ║ +
+
+ + + + + + + + + + + + + +
Dumb Shit ●●●●● Other Shit ●●●○○
Making normal static content ○○○○○ Writing ○○○○○
+
+ + + + + + + +
Programming ●●●●● Programming ●○○○○
+
+
+
+
+ + + diff --git a/resume/src/sample-profile-picture.jpeg b/resume/src/sample-profile-picture.jpeg new file mode 100644 index 0000000..531c03b Binary files /dev/null and b/resume/src/sample-profile-picture.jpeg differ diff --git a/resume/src/style.css b/resume/src/style.css new file mode 100644 index 0000000..fb4927b --- /dev/null +++ b/resume/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; + } +} diff --git a/resume/src/styles.css b/resume/src/styles.css deleted file mode 100644 index 420c624..0000000 --- a/resume/src/styles.css +++ /dev/null @@ -1,166 +0,0 @@ -: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: 100%; - height: 100%; - margin: 0; - background-color: white; -} - -.a4-paper { - width: 210mm; - height: 297mm; - margin: var(--padding) auto; -} - -.content { - border: 3px solid var(--font-color); - box-sizing: border-box; - padding: var(--padding); - display: flex; - flex-direction: column; -} - -.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 { - flex: 1; - min-width: 50%; - display: flex; - flex-direction: column; - margin-bottom: 1em; -} - -.rating-title { - font-weight: bold; - margin-right: .5em; -} - -.rating-amount { - flex: 1; -} - -/* Proper printing */ - -@page { - size: A4; - margin: 5mm; -} -@media print { - html, body, .a4-paper { - width: 100%; - height: 100%; - margin: 0; - } -} -- cgit v1.2.3