├── README.md ├── img ├── avatar.jpg ├── bg.jpg ├── favicon.ico └── resume_icon.png ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 |
2 |

Oh, So Simple HTML CV!

3 | 4 | Simple HTML CV 5 | 6 | HTML and CSS template for your outstanding job applications 7 |
8 | 9 | ## What is Oh, So Simple HTML CV? 10 | 11 | **Oh, So Clear HTML CV!** is simple, clear and aesthetic **Resume** template for beginners to better understand HTML5 and CSS basics by example. 12 | 13 | **This page will help you:** 14 | 15 | * create legible *CV (Curriculum Vitae)* / *Resume* 16 | * create website with HTML5 and CSS 17 | * create CSS flexbox layout 18 | * implement good-looking responsive layouts 19 | * use Font Awesome 5 for social media 20 | 21 | This repo contains the final source code for free tutorial. 22 | 23 | Full explanation and task you can find in Polish: [CV HTML / CSS](https://www.flynerd.pl/2018/07/stworz-cv-w-html-i-css-krok-po-kroku.html) 24 | 25 | ## Demo 26 | Check demo here: [Ocat CV](https://ritaly.github.io/HTML-CSS-CV-demo/) 27 | 28 | ## Credits 29 | Please feel free to copy any part of this repo for your own uses. 30 | 31 | **[Fly Nerd](https://www.flynerd.pl/)** - I will be happy if you mention **FlyNerd** as an inspiration. 32 | 33 | Thanks: 34 | 35 | - **Raleway** - set of free fonts thanks to Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida, Igino Marini 36 | 37 | - **Freepik** - title icon made by [Freepick](http://www.freepik.com), licensed: CC 3.0 -------------------------------------------------------------------------------- /img/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritaly/HTML-CSS-CV-demo/358a593a6c6aa3dd5dfe75be0b6dae4eb58be149/img/avatar.jpg -------------------------------------------------------------------------------- /img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritaly/HTML-CSS-CV-demo/358a593a6c6aa3dd5dfe75be0b6dae4eb58be149/img/bg.jpg -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritaly/HTML-CSS-CV-demo/358a593a6c6aa3dd5dfe75be0b6dae4eb58be149/img/favicon.ico -------------------------------------------------------------------------------- /img/resume_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ritaly/HTML-CSS-CV-demo/358a593a6c6aa3dd5dfe75be0b6dae4eb58be149/img/resume_icon.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CV - Ocat 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |

Ocat Verdigris

20 |
21 |

Hello! I am Ocat Verdigris. I work as interface and front-end developer. I have passion for pixel perfect, minimal and easy to use interfaces. I'm focused, dedicated, hard-working and willing to learn in a changing and challenging environment.

22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |

Courses & Workshops

42 |
43 |
44 |

Udacity: Intro to HTML and CSS

45 |
46 |
47 |

Build styled, well-structured websites. Learn how to use HTML5 standard to create websites. Understand CSS syntax, selectors, and units. Learn about code editors and a browser's Developer Tools.

48 |
49 |
50 |
51 |
52 |

Udemy: The Web Developer Bootcamp

53 |
54 |
55 |

Learn how to create full-stack web applications from scratch using HTML, CSS, JavaScript, jQuery, VanillaJS, NodeJS, MongoDB.

56 |
57 |
58 |
59 |
60 |

EdX: Web Programming with JavaScript

61 |
62 |
63 |

Learn how to create web apps and prototypes with JavaScript, represent and exchange data using JavaScript Object Notation (JSON), and how to access RESTful APIs on the web.

64 |
65 |
66 |
67 |
68 |

Django Girls: 2-Day Workshops

69 |
70 |
71 |

Learn back-end development with simple blog application using Django framework.

72 |
73 |
74 |
75 |
76 |

Skills

77 |
78 |
79 |

Good knowledge

80 |
    81 |
  • HTML5
    • 82 |
  • CSS
    • 83 |
  • JavaScript ES5/6
    • 84 |
  • SQL
    • 85 |
86 |
87 |
88 |

Basic knowledge

89 |
    90 |
  • jQuery
    • 91 |
  • NodeJS
    • 92 |
  • MongoDB
    • 93 |
  • Django
    • 94 |
95 |
96 |
97 |

Languages

98 |

🇵🇱 Polish - Native speaker

99 |

🇬🇧 English - Proficient C1/C2

100 |

🇫🇷 French - Advanced - C1

101 |

🇪🇸 Spanish - Intermediate - B1/B2

102 |

🇩🇪 German - Elementary / Communicative - A2

103 |
104 |
105 |
106 | 107 |
108 |

Education

109 |
110 |
111 | 2015-2018 Octocats tech academy 112 |
113 |
114 | Bechelor Degree of Octorobotics 115 |
116 |
117 |
118 |
119 | 2012-2015 Underwater kittens high school 120 |
121 |
122 | Main subject: Cathemathics 123 |
124 |
125 |
126 |
127 |

Experience

128 |
129 |
130 | 03.2018 - 06.2018 Tentacles Company
Position: Web developer Intern 131 |
132 |
133 |

Tech stack: HTML5 / CSS / JavaScript / jQuery

134 |
    135 |
  • Develop web application for Octopoda departments
    • 136 |
  • Implement UI (front-end site) based on received graphic design and requirements
    • 137 |
  • Co-operate with the back-end team
    • 138 |
139 |
140 |
141 |
142 |
143 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway'); 2 | 3 | body { 4 | margin: 0; 5 | font-family: 'Raleway'; 6 | font-size: 16px; 7 | line-height: 1.8em; 8 | } 9 | 10 | a { 11 | color: #1C9C94; 12 | text-decoration: none; 13 | } 14 | 15 | a:hover { 16 | opacity: 0.5; 17 | } 18 | 19 | article { 20 | padding:0 1em; 21 | } 22 | 23 | section{ 24 | margin: 1em; 25 | padding: 1em; 26 | } 27 | 28 | header, main, footer { 29 | margin: 0 auto; 30 | } 31 | 32 | header { 33 | padding: 2em; 34 | text-align: center; 35 | background-image: url('./img/bg.jpg'); 36 | background-size: cover; 37 | background-position: fixed; 38 | color: white; 39 | } 40 | 41 | header section { 42 | margin: 0 auto; 43 | max-width: 640px; 44 | } 45 | 46 | header img { 47 | border-radius: 50%; 48 | max-width: 150px; 49 | } 50 | 51 | h1 { 52 | text-transform: uppercase; 53 | margin: 1em 0; 54 | } 55 | 56 | h3 { 57 | text-transform: uppercase; 58 | } 59 | 60 | h3, h4 { 61 | font-weight: bold; 62 | } 63 | 64 | main { 65 | max-width: 1140px; 66 | } 67 | 68 | main section:not(:last-child) { 69 | border-bottom: 1px solid #ccc; 70 | } 71 | 72 | .fab { 73 | border: 1px solid white; 74 | border-radius: 50%; 75 | font-size: 1.5em; 76 | width: 1.5em; 77 | height: 1.5em; 78 | line-height: 1.5em; 79 | margin: 5px; 80 | text-align: center; 81 | } 82 | 83 | a .fab { 84 | color: white; 85 | } 86 | 87 | .course, .skills { 88 | display: -ms-flexbox; 89 | display: flex; 90 | -ms-flex-wrap: wrap; 91 | flex-wrap: wrap; 92 | } 93 | 94 | .course .title { 95 | color: #509e98; 96 | -ms-flex: 0 0 33.3%; 97 | flex: 0 0 33.3%; 98 | max-width: 33%; 99 | } 100 | 101 | .course .descrition { 102 | -ms-flex: 0 0 66.6%; 103 | flex: 0 0 66.6%; 104 | max-width: 66.6%; 105 | } 106 | 107 | .course .descrition p { 108 | padding-left: 1em; 109 | } 110 | 111 | .skills .column { 112 | -ms-flex: 0 0 50%%; 113 | flex: 0 0 50%; 114 | max-width: 50%; 115 | } 116 | 117 | .skills .column ul, ul.job-description { 118 | list-style-type: none; 119 | } 120 | 121 | .skills .column ul > li:before { 122 | content: "►"; 123 | padding-right: 0.5em; 124 | color: #509e98; 125 | } 126 | 127 | .school, .job-title { 128 | text-transform: capitalize; 129 | } 130 | 131 | .school span, .job-title span { 132 | color: #889499; 133 | text-decoration: underline; 134 | } 135 | 136 | ul.job-description li:before{ 137 | content: "✔"; 138 | padding-right: 0.5em; 139 | color: #509e98; 140 | } 141 | 142 | footer { 143 | padding: 1em 1.5em; 144 | background: #A7B8BF; 145 | color: white; 146 | text-align: right; 147 | } 148 | 149 | @media only screen and (max-width: 768px) { 150 | .course { 151 | display: block; 152 | } 153 | 154 | .course .title, .course .descrition { 155 | max-width: 100%; 156 | } 157 | } 158 | 159 | @media only screen and (max-width: 576px) { 160 | .skills { 161 | display: block; 162 | } 163 | 164 | .skills .column { 165 | max-width: 100%; 166 | } 167 | 168 | footer { 169 | text-align: center; 170 | } 171 | } 172 | --------------------------------------------------------------------------------