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 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 resume-v1.1/README.md (limited to 'resume-v1.1/README.md') 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. -- cgit v1.2.3