diff options
Diffstat (limited to 'resume')
| -rw-r--r-- | resume/README.md | 1 | ||||
| -rw-r--r-- | resume/preview.png | bin | 0 -> 153313 bytes | |||
| -rw-r--r-- | resume/src/index.html | 169 | ||||
| -rw-r--r-- | resume/src/styles.css | 154 |
4 files changed, 324 insertions, 0 deletions
diff --git a/resume/README.md b/resume/README.md new file mode 100644 index 0000000..5d784e9 --- /dev/null +++ b/resume/README.md @@ -0,0 +1 @@ + diff --git a/resume/preview.png b/resume/preview.png Binary files differnew file mode 100644 index 0000000..d0055f1 --- /dev/null +++ b/resume/preview.png diff --git a/resume/src/index.html b/resume/src/index.html new file mode 100644 index 0000000..07be591 --- /dev/null +++ b/resume/src/index.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="UTF-8"> + <meta name="author" content="Kamen Mladenov"> + <meta name="robots" content="index, follow"> + <meta name="theme-color" content="#ffffff"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="./styles.css"> + <title>My Resume</title> +</head> + +<body> + <div id="content"> + <div id="about"> + <div id="data"> + <div id="name"> + Gosho Petrov + </div> + <div id="info"> + <div class="stacked-info"> + <b>Address</b><br> + Gosho Street + </div> + <div class="stacked-info"> + <b>Phone</b><br> + 1-800-Gosho + </div> + <div class="stacked-info"> + <b>Email</b><br> + john.cena@ne-me-vijdash.gluplako + </div> + </div> + </div> + <div id="picture"> + <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/John_Cena_July_2018.jpg/1024px-John_Cena_July_2018.jpg"> + </div> + </div> + <hr> + <div class="info-section"> + <div class="card"> + <div class="card-title"> + PROFILE + </div> + <div class="card-content"> + Vikat mi, ela za malko, I POCHVAM DA BEGAM BATE + </div> + </div> + <hr> + <div class="card"> + <div class="card-title"> + EDUCATION + </div> + <div class="card-content"> + <div class="card"> + <div class="card-title"> + 1990 - 1994 + </div> + <div class="card-content"> + <div class="card-sub-title"> + Joe University + </div> + Mi, nema kvo da kaja + </div> + </div> + <div class="card"> + <div class="card-title"> + 1994 - 2004 + </div> + <div class="card-content"> + <div class="card-sub-title"> + Cool University + </div> + Yep, it's true. What are you gonna do about it? + </div> + </div> + <div class="card"> + <div class="card-title"> + 2004 - now + </div> + <div class="card-content"> + <div class="card-sub-title"> + The coolest university + </div> + What are you gonna do? Cry? Shit your pants maybe? Maybe shit and cum? + </div> + </div> + </div> + </div> + </div> + <hr> + <div class="info-section"> + <div class="card"> + <div class="card-title"> + EXPERIENCE + </div> + <div class="card-content"> + <div class="card"> + <div class="card-title"> + 1990 - now + </div> + <div class="card-content"> + <div class="card-sub-title"> + Megamind Inc. + </div> + Got a problem? Yeah, that's what I though + </div> + </div> + </div> + </div> + </div> + <hr> + <div class="info-section"> + <div class="card"> + <div class="card-title"> + PERSONAL PROJECTS + </div> + <div class="card-content"> + <div class="card"> + <div class="card-title"> + 1990 - now + </div> + <div class="card-content"> + <div class="card-sub-title"> + Do I even need to say it? + </div> + Like, I'm pretty sure you got the point + </div> + </div> + </div> + </div> + <hr> + <div class="card"> + <div class="card-title"> + SKILLS + </div> + <div class="card-content ratings"> + <div class="rating"> + <div class="rating-title"> + Dumb shit + </div> + <div class="rating-amount"> + ●●●●●●●●●● + </div> + </div> + <div class="rating"> + <div class="rating-title"> + Making normal static content + </div> + <div class="rating-amount"> + ●○○○○○○○○○ + </div> + </div> + <div class="rating"> + <div class="rating-title"> + idk anymore + </div> + <div class="rating-amount"> + ●●●●●●●●○○ + </div> + </div> + </div> + </div> + </div> + </div> +</body> + +</html> diff --git a/resume/src/styles.css b/resume/src/styles.css new file mode 100644 index 0000000..3601e33 --- /dev/null +++ b/resume/src/styles.css @@ -0,0 +1,154 @@ +: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: 100vw; + height: 100vh; + padding: var(--padding); + margin: 0; + box-sizing: border-box; + background-color: white; +} + +#content { + width: 100%; + height: 100%; + box-sizing: border-box; + border: 3px solid var(--font-color); + overflow-y: auto; + padding: var(--padding); + display: flex; + flex-direction: column; +} + +#content::-webkit-scrollbar { + display: none; +} + +#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 { + width: 50%; + display: flex; + flex-direction: column; + margin-bottom: .7em; +} + +.rating-title { + font-weight: bold; + margin-right: 1em; +} + +.rating-amount { + flex: 1; +} |
