From ab1215fb6367c1d4b4e11aba672d992147451644 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 19 Aug 2021 13:52:27 +0300 Subject: Renamed resume to resume-v1 and added resume-v1.1 --- resume-v1.1/README.md | 106 +++++++++++ resume-v1.1/output.pdf | Bin 0 -> 466623 bytes resume-v1.1/screenshots/preview.png | Bin 0 -> 162400 bytes resume-v1.1/screenshots/sample-card-sub-title.png | Bin 0 -> 5575 bytes resume-v1.1/screenshots/sample-card.png | Bin 0 -> 3650 bytes resume-v1.1/screenshots/sample-ratings.png | Bin 0 -> 4752 bytes resume-v1.1/screenshots/sample-section-head.png | Bin 0 -> 1304 bytes resume-v1.1/screenshots/sample-stacked-info.png | Bin 0 -> 3517 bytes resume-v1.1/src/resume.html | 210 +++++++++++++++++++++ resume-v1.1/src/sample-profile-picture.jpeg | Bin 0 -> 432231 bytes resume-v1.1/src/style.css | 217 ++++++++++++++++++++++ resume-v1/README.md | 95 ++++++++++ resume-v1/output.pdf | Bin 0 -> 448936 bytes resume-v1/screenshots/preview.png | Bin 0 -> 162723 bytes resume-v1/screenshots/sample-card-sub-title.png | Bin 0 -> 5575 bytes resume-v1/screenshots/sample-card.png | Bin 0 -> 3650 bytes resume-v1/screenshots/sample-ratings.png | Bin 0 -> 4752 bytes resume-v1/screenshots/sample-stacked-info.png | Bin 0 -> 3517 bytes resume-v1/src/resume.html | 191 +++++++++++++++++++ resume-v1/src/sample-profile-picture.jpeg | Bin 0 -> 398276 bytes resume-v1/src/style.css | 204 ++++++++++++++++++++ resume/README.md | 95 ---------- resume/output.pdf | Bin 448936 -> 0 bytes resume/screenshots/preview.png | Bin 162723 -> 0 bytes resume/screenshots/sample-card-sub-title.png | Bin 5575 -> 0 bytes resume/screenshots/sample-card.png | Bin 3650 -> 0 bytes resume/screenshots/sample-ratings.png | Bin 4752 -> 0 bytes resume/screenshots/sample-stacked-info.png | Bin 3517 -> 0 bytes resume/src/resume.html | 191 ------------------- resume/src/sample-profile-picture.jpeg | Bin 398276 -> 0 bytes resume/src/style.css | 204 -------------------- 31 files changed, 1023 insertions(+), 490 deletions(-) create mode 100644 resume-v1.1/README.md create mode 100644 resume-v1.1/output.pdf create mode 100644 resume-v1.1/screenshots/preview.png create mode 100644 resume-v1.1/screenshots/sample-card-sub-title.png create mode 100644 resume-v1.1/screenshots/sample-card.png create mode 100644 resume-v1.1/screenshots/sample-ratings.png create mode 100644 resume-v1.1/screenshots/sample-section-head.png create mode 100644 resume-v1.1/screenshots/sample-stacked-info.png create mode 100644 resume-v1.1/src/resume.html create mode 100644 resume-v1.1/src/sample-profile-picture.jpeg create mode 100644 resume-v1.1/src/style.css create mode 100644 resume-v1/README.md create mode 100644 resume-v1/output.pdf create mode 100644 resume-v1/screenshots/preview.png create mode 100644 resume-v1/screenshots/sample-card-sub-title.png create mode 100644 resume-v1/screenshots/sample-card.png create mode 100644 resume-v1/screenshots/sample-ratings.png create mode 100644 resume-v1/screenshots/sample-stacked-info.png create mode 100644 resume-v1/src/resume.html create mode 100644 resume-v1/src/sample-profile-picture.jpeg create mode 100644 resume-v1/src/style.css delete mode 100644 resume/README.md delete mode 100644 resume/output.pdf delete mode 100644 resume/screenshots/preview.png delete mode 100644 resume/screenshots/sample-card-sub-title.png delete mode 100644 resume/screenshots/sample-card.png delete mode 100644 resume/screenshots/sample-ratings.png delete mode 100644 resume/screenshots/sample-stacked-info.png delete mode 100644 resume/src/resume.html delete mode 100644 resume/src/sample-profile-picture.jpeg delete mode 100644 resume/src/style.css 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 +
+
+ Profile +
+
+
+``` +![](./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 `` 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. + +## 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 Binary files /dev/null and b/resume-v1.1/output.pdf differ diff --git a/resume-v1.1/screenshots/preview.png b/resume-v1.1/screenshots/preview.png new file mode 100644 index 0000000..7b8ca2d Binary files /dev/null and b/resume-v1.1/screenshots/preview.png differ diff --git a/resume-v1.1/screenshots/sample-card-sub-title.png b/resume-v1.1/screenshots/sample-card-sub-title.png new file mode 100644 index 0000000..4f005c2 Binary files /dev/null and b/resume-v1.1/screenshots/sample-card-sub-title.png differ diff --git a/resume-v1.1/screenshots/sample-card.png b/resume-v1.1/screenshots/sample-card.png new file mode 100644 index 0000000..d37486b Binary files /dev/null and b/resume-v1.1/screenshots/sample-card.png differ diff --git a/resume-v1.1/screenshots/sample-ratings.png b/resume-v1.1/screenshots/sample-ratings.png new file mode 100644 index 0000000..56a8833 Binary files /dev/null and b/resume-v1.1/screenshots/sample-ratings.png differ 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 Binary files /dev/null and b/resume-v1.1/screenshots/sample-section-head.png differ diff --git a/resume-v1.1/screenshots/sample-stacked-info.png b/resume-v1.1/screenshots/sample-stacked-info.png new file mode 100644 index 0000000..644b93e Binary files /dev/null and b/resume-v1.1/screenshots/sample-stacked-info.png differ 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 @@ + + + + + + + + Resume - Gosho Petrov + + + +
+
+ +
+
+ Ivan Mishov +
+
+
+
+ Date of birth
+ 06.11.1998 +
+
+ Address
+ + Tupac Lane, Las Vegas, USA + +
+
+ Phone Number
+ + (999)888-8888 + +
+
+
+
+ Email
+ + im@dumbass.com + +
+
+ GitHub account
+ + github.com/im + +
+
+ LinkedIn profile
+ + linkedin.com/im + +
+
+
+
+ + + +
+
+
+ Profile +
+
+
+
+
+ “Some quotations," said Zellaby, "are greatly improved by lack of context.” +
+
+
+
+
+
+ Education +
+
+
+
+
+ 2000
↦ 2004 +
+
+
+ Meme University - More value than Harvard online +
+ Go from Meme Newbie to a Meme Lord! +
+
+
+
+ 1994
↦ 2004 +
+
+
+ Imaginary University +
+ Yep, it's true. +
+
+
+
+ 1994
↦ 2004 +
+
+
+ The coolest university +
+ I'll have you know, I gratuated top of my class. +
+
+
+
+ Experience +
+
+
+
+
+ 1990
↦ now +
+
+
+ Megamind Inc. +
+ We put the Mega inside your mind +
+
+
+
+ 1890
↦ 1990 +
+
+
+ Intergalatical Time Federation +
+ Learned how to control time. +
+
+
+
+
+
+ Projects +
+
+
+
+
+ 1990
↦ now +
+
+
+ Yo mama +
+ HA, goteem +
+
+
+
+ 1989
↦ 1999 +
+
+
+ Crime +
+
+
+
+
+ Skills +
+
+
+
+
+ + + + + + + + + + + + + +
Dumb●●●●●Other, Idk●●●○○
Making normal static content○○○○○Writing○○○○○
+
+ + + + + + + +
Alzheimer●●●●●Alzheimer●○○○○
+
+
+
+
+ + + 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 Binary files /dev/null and b/resume-v1.1/src/sample-profile-picture.jpeg differ 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-v1/README.md b/resume-v1/README.md new file mode 100644 index 0000000..602f813 --- /dev/null +++ b/resume-v1/README.md @@ -0,0 +1,95 @@ +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. + +## 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-v1/output.pdf b/resume-v1/output.pdf new file mode 100644 index 0000000..a349bb7 Binary files /dev/null and b/resume-v1/output.pdf differ diff --git a/resume-v1/screenshots/preview.png b/resume-v1/screenshots/preview.png new file mode 100644 index 0000000..5a0f446 Binary files /dev/null and b/resume-v1/screenshots/preview.png differ 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 Binary files /dev/null and b/resume-v1/screenshots/sample-card-sub-title.png differ diff --git a/resume-v1/screenshots/sample-card.png b/resume-v1/screenshots/sample-card.png new file mode 100644 index 0000000..d37486b Binary files /dev/null and b/resume-v1/screenshots/sample-card.png differ diff --git a/resume-v1/screenshots/sample-ratings.png b/resume-v1/screenshots/sample-ratings.png new file mode 100644 index 0000000..56a8833 Binary files /dev/null and b/resume-v1/screenshots/sample-ratings.png differ 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 Binary files /dev/null and b/resume-v1/screenshots/sample-stacked-info.png differ diff --git a/resume-v1/src/resume.html b/resume-v1/src/resume.html new file mode 100644 index 0000000..77aa441 --- /dev/null +++ b/resume-v1/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-v1/src/sample-profile-picture.jpeg b/resume-v1/src/sample-profile-picture.jpeg new file mode 100644 index 0000000..531c03b Binary files /dev/null and b/resume-v1/src/sample-profile-picture.jpeg differ diff --git a/resume-v1/src/style.css b/resume-v1/src/style.css new file mode 100644 index 0000000..fb4927b --- /dev/null +++ b/resume-v1/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/README.md b/resume/README.md deleted file mode 100644 index 602f813..0000000 --- a/resume/README.md +++ /dev/null @@ -1,95 +0,0 @@ -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. - -## 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 deleted file mode 100644 index a349bb7..0000000 Binary files a/resume/output.pdf and /dev/null differ diff --git a/resume/screenshots/preview.png b/resume/screenshots/preview.png deleted file mode 100644 index 5a0f446..0000000 Binary files a/resume/screenshots/preview.png and /dev/null differ diff --git a/resume/screenshots/sample-card-sub-title.png b/resume/screenshots/sample-card-sub-title.png deleted file mode 100644 index 4f005c2..0000000 Binary files a/resume/screenshots/sample-card-sub-title.png and /dev/null differ diff --git a/resume/screenshots/sample-card.png b/resume/screenshots/sample-card.png deleted file mode 100644 index d37486b..0000000 Binary files a/resume/screenshots/sample-card.png and /dev/null differ diff --git a/resume/screenshots/sample-ratings.png b/resume/screenshots/sample-ratings.png deleted file mode 100644 index 56a8833..0000000 Binary files a/resume/screenshots/sample-ratings.png and /dev/null differ diff --git a/resume/screenshots/sample-stacked-info.png b/resume/screenshots/sample-stacked-info.png deleted file mode 100644 index 644b93e..0000000 Binary files a/resume/screenshots/sample-stacked-info.png and /dev/null differ diff --git a/resume/src/resume.html b/resume/src/resume.html deleted file mode 100644 index 77aa441..0000000 --- a/resume/src/resume.html +++ /dev/null @@ -1,191 +0,0 @@ - - - - - - - - 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 deleted file mode 100644 index 531c03b..0000000 Binary files a/resume/src/sample-profile-picture.jpeg and /dev/null differ diff --git a/resume/src/style.css b/resume/src/style.css deleted file mode 100644 index fb4927b..0000000 --- a/resume/src/style.css +++ /dev/null @@ -1,204 +0,0 @@ -: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; - } -} -- cgit v1.2.3