-
Notifications
You must be signed in to change notification settings - Fork 0
Resume documentation
After reading this document you will understand how to create your own resume using HTML, CSS and a bit of JS. Resume contains next blocks or sections of information: contacts section, profile section, skills, likes and dislikes section and timeline or expirience section.
Contains minimal required meta information and links to CSS styles such as:
<meta charset="UTF-8" />
<link rel="stylesheet"
href="https://volodymyrkushnir.com/assets/stylesheets/base.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/reset.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/header.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/container.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/segment.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/grid.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/divider.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/components/label.min.css"
/>
<link rel="stylesheet" href="styles/mystyle.css" type="text/css" />
<title><!-- page name --></title>You can use HEAD for more complex describing of your pages metadata.
Contains all blocks of information about the person (contacts, common information, skills, likes, dislikes, expirience, education, etc...).
Main container for users content.
<main>
<article>
<div class="page">
<!--Content section-->
</div>
</article>
</main>Content can be structured using the .grid, which is based on the 16 column grid implementation from the excellent Semantic UI framework. Grid consists of .rows and .columns, as expected. Rows are groups of columns which are aligned horizontally. Rows can either be explicit, marked with an additional .row element, or implicit, automatically occurring when no more space is left in a previous row. Columns divide horizontal space into indivisible units. All columns in a grid must specify their width as proportion of the total available row width, e.g. .four.wide, .eleven.wide, etc.
<div class="ui container bordered">
<div class="ui inverted basic padded segment stackable grid">
<div class="ui row">
<div class="ui sixteen wide center aligned column">
<h1>
<!--First name-->
</h1>
</div>
<div class="ui sixteen wide center aligned column">
<h1>
<!--Second name-->
</h1>
</div>
</div>
<div class="ui centered grid">
<div class="ui four wide center aligned column">
<div class="ui fitted fat divider"></div>
</div>
</div>
<div class="ui row">
<div class="ui sixteen wide center aligned column">
<h3>
<!--Job-->
</h3>
</div>
</div>
</div>
<div class="ui basic padded segment stackable vertically divided grid">
<div class="ui row">
<!--Contacts section-->
</div>
<div class="ui row">
<!--Profile section-->
</div>
<div class="ui three column divided row center aligned">
<!--Skills section-->
<!--Likes section-->
<!--Dislikes section-->
</div>
<div class="ui row"></div>
<!--Timeline and Experience section-->
</div>
</div>Simple imformation about person.
Contains links or another info about persons social network profiles, phone numbers, etc. Icons can be obtained from Font Awesome
<div class="ui sixteen wide column center aligned">
<div class="ui horizontal divided list">
<!--Contact element-->
</div>
</div><div class="item">
<i class="facebook f icon"></i>
<div class="content">
<a href="https://www.facebook.com/appachey">My Facebook page</a>
</div>
</div>Introduction is a beginning section which states the purpose and goals of the résumé and gives insight into the author's motivations and personality. Here's an example of an introduction that starts with a friendly greeting.
<div class="ui sixteen wide column center aligned">
<h4>Résumé</h4>
<p>
Hello! My name is Sergey Bychkov. I am skilled certified
forensic expert with 6 years of computer forensics. In my
work, I investigate the evidence on digital media that
criminals leave when they commit crimes using computer
technology. This is a very important and responsible job,
because from my conclusions sometimes the further destinies
of people are decided.
</p>
</div>Can contains only three blocks of such information like skills, likes, dislikes or some else information.
<section class="column">
<h4><i class="hand spock outline icon"></i>Skills</h4>
<p class="pucase">
php html css java c mysql microsoft office cooking ftk linux
windows
</p>
</section>
<section class="column">
<h4><i class="thumbs up outline icon"></i>Likes</h4>
<p class="pucase">
movies computer games basketball cooking metallica pantera
slayer slipknot soad photograpy programming beer with
friends metaxa
</p>
</section>
<section class="column">
<h4><i class="thumbs down outline icon"></i>Dislikes</h4>
<p class="pucase">
football russian rap tv hot weather mayonnaise dancing
</p>
</section>Experience is knowledge or skill in a particular job or activity, which you have gained because you have done that job or activity for a long time. Apart from that, even a smallest encounter could change your life forever, therefore it probably has to be mentioned as well, if you feel like it. So this encounters, jobs, and activities are essentially events — short (something that happened in a day) or long (something that took days, months or years to complete). They are organized in a timelines. There can be as many timelines as it is necessary.
<div class="ui basic segment stackable grid topmarg">
<div class="ui row">
<div class="ui sixteen wide column">
<h4>Timeline and Experience</h4>
</div>
</div>
<!--Event element-->
</div>Timline can contains two type of event elements: simple event element and event element with bulleted list.
Simple event element contains time period and description of event
<div class="ui row">
<div class="ui three wide column rborder">
<p>1987</p>
</div>
<div class="ui thirteen wide column">
<p><strong>Born 1 July 1987 in Kharkiv</strong></p>
</div>
</div>Event element with bulleted list of subevents
<div class="ui row">
<div class="ui three wide column rborder">
<p>2010 - 2012</p>
</div>
<div class="ui thirteen wide column">
<div class="ui list">
<div class="item">
<strong>First job: District Militia Inspector of Moskovskiy
District in Kharkiv of MIA Ukraine</strong>
<div class="ui bulleted list">
<div class="item">great mistake</div>
<div class="item">
anyway, gained some experience of working Government
Structures
</div>
<div class="item">blue uniform</div>
<div class="item">
took part in the protection of all public events in
Kharkov
</div>
<div class="item">blue uniform</div>
<div class="item">
hate football even more than before
</div>
<div class="item">weekend? What is it?</div>
<div class="item">blue uniform</div>
<div class="item">and more negative memories</div>
<div class="item">not recommended</div>
</div>
</div>
</div>
</div>
</div>