Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Dennis Ivy
Dennis Ivy

Posted on • Edited on

     

Build A Digital Resume & Host For Free

Let's turn your resume into a digital resume ready to be shared with the world!

What we will do in this tutorial is review my personalresume and turn it onto an HTML file with styling and host it with Guthub pages for free. See livedemo here.

What you should put on your resume

If you want to learn more about the type of content that should go on your resume and how hiring managers think as they review them, then read "Developer Resumes — How Managers Actually Read Them".

Let start building

I will use this guide in the video version of this tutorial and highly recommend you watch that videohere as you read this guide.

See completesource code

Create Folders & Files

I'll start this project by creating a blank folder on my desktop and adding the following files and folders:

digital_resume│   index.html    └───assets│   │   resume.pdf│   │   │   ││   └───images│       │ │       └─profile_pic.jpg│       │   └───styles    │      └─style.css
Enter fullscreen modeExit fullscreen mode

HTML Setup

Let's get some boiler plate HTML setup and build out everything up until the qualifications list. Make sure to link up all the

<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>Dennis Ivy</title><metaname="description"content=""><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="./styles/main.css"></head><body><divid="container--main"><sectionid="wrapper--hero"class="section--page"><imgid="profile-pic"src="./assets/images/profile_pic.JPG"><div><h1id="user-name">Dennis Ivanov</h1><pid="bio">Software developer, developer advocate at<ahref="https://www.agora.io/en/"target="_blank">Agora</a>, Udemy<ahref="https://www.udemy.com/user/dennis-ivanov-5/"target="_blank">instructor</a>,<ahref="https://www.youtube.com/c/dennisivy"target="_blank">YouTuber</a> with 166k+ subs and contributor at<ahref="https://youtu.be/PtQiiknWUcI?t=6"target="_blank">Traversy Media</a>.</p><pid="email">👉 dennis@dennisivy.com</p></div></section><sectionclass="section--page"><divid="socials--list"><ahref="https://youtube.com/c/dennisivy"target="_blank">Youtube</a><ahref="https://twitter.com/dennisivy11"target="_blank">Twitter</a><ahref="https://www.linkedin.com/in/dennis-ivanov/"target="_blank">Linkedin</a><ahref="https://github.com/divanov11"target="_blank">Github</a><ahref="./assets/resume.pdf"target="_blank">Download Resume</a></div></section><sectionclass="section--page"><h2>Skills& Qualifications</h2><ulid="qualifications--list"><li>✔️ 7 Years experience with front& backend development</li><li>✔️ Extensive knowledge in API& Database Design.</li><li>✔️ Experienced content creator on YouTube& community leader</li><li>✔️ 7 Years experience with running Adwords campaigns& SEO</li></ul></section></div></body></html>
Enter fullscreen modeExit fullscreen mode

Styling what we have so far

Before we add more content lets add in some styling and import a font type that I'd like to use here:

@importurl('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600;700&display=swap');:root{--mainTextColor:#000;--secondaryTextColor:(515151);--mainLinkColor:#0da2b8;--mainBorderColor:rgb(218,218,218);--mainBgColor:rgb(249,250,251);}*{font-family:'Readex Pro';line-height:1.5em;box-sizing:border-box;color:var(--mainTextColor);}body{background-color:var(--mainBgColor);}p,span,li{color:var(--secondaryTextColor);font-size:1em;}a{text-decoration:none;color:var(--mainLinkColor);font-weight:500;}li{line-height:1.9em;}#container--main{max-width:700px;margin:0auto;padding:1em;}.section--page{padding-top:1em;padding-bottom:1em;}#wrapper--hero{display:flex;align-items:center;gap:4em;}#bio,a{font-weight:300;}#user-name{font-size:48px;line-height:1em;}#profile-pic{width:150px;height:150px;object-fit:cover;border-radius:50%;}#email{color:var(--mainTextColor);}#socials--list{display:flex;justify-content:space-between;column-gap:1em;flex-wrap:wrap;}#socials--lista{font-weight:300;color:var(--secondaryTextColor);font-size:0.9em;transition:0.3s;}#socials--lista:hover{font-weight:100;color:var(--mainLinkColor);font-size:0.9em;}#qualifications--list{list-style:none;}
Enter fullscreen modeExit fullscreen mode

Adding dark mode

We are developers so of course I need to provide a dark mode option. We wont add any toggling or anything like that, just the ability for you to set your preference if you'd like.

For this we will just set some more CSS variables in the same:root only now we will specify-dark at the end, and then duplicate and modify the light mode colors to have a-light extension. In order to set the theme we will simply use the light or dark variables to the variables user throughout the css file.

:root{--mainTextColor-light:#000;--secondaryTextColor-light:rgb(515151);--mainLinkColor-light:#0da2b8;--mainBorderColor-light:rgb(218,218,218);--mainBgColor-light:rgb(249,250,251);--mainTextColor-dark:#fff;--secondaryTextColor-dark:#adb0b1;--mainLinkColor-dark:rgb(30,190,214);--mainBorderColor-dark:#2b3031;--mainBgColor-dark:#131415;--mainTextColor:var(--mainTextColor-dark);--secondaryTextColor:var(--secondaryTextColor-dark);--mainLinkColor:var(--mainLinkColor-dark);--mainBorderColor:var(--mainBorderColor-dark);--mainBgColor:var(--mainBgColor-dark);}
Enter fullscreen modeExit fullscreen mode

Tech stack

Just bellow theSkills & qualifications add the following HTML & CSS

<sectionclass="section--page"><h2>Tech stack</h2><divid="wrapper--techstack__items"><divclass="card--techstack"><span>Python, JavaScript, NodeJS</span></div><divclass="card--techstack"><span>Django, Express, Flask, FastAPI</span></div><divclass="card--techstack"><span>React, Next JS</span></div><divclass="card--techstack"><span>Postgres, MongoDB, MySQL</span></div></div></section>
Enter fullscreen modeExit fullscreen mode
#qualifications--list{list-style:none;}#wrapper--techstack__items{display:flex;flex-wrap:wrap;gap:1em;font-size:0.9em;}.card--techstack{border:1pxsolidvar(--mainBorderColor);border-radius:5px;padding:0.5em1em;align-items:center;}
Enter fullscreen modeExit fullscreen mode

Work History

Add the follow section bellow theTech Stack section.

<sectionid="work-history-wrapper"class="section--page"><h2>Work History</h2><divclass="line-break"></div><divclass="card--work-history"><strong>🚧 DEVELOPER ADVOCATE | AGORA.IO</strong><p>11/2021 - Present</p><p>Worked on making Agora’s Web Based SDK more accessible through video tutorials, articles, demo projects and event based training. Also building out React UI components& leading a team to re-design Agora’s documentation and api reference.</p><ul><li>Doubled Web SDK’s monthly usage minutes from 15 million to 30 million minutes within my first 4 months</li><li>Produced educational video content which resulted in 300k+ views on youtube</li><li>Produced SEO campaigns and content to gain market share for related keywords.</li></ul></div><divclass="line-break"></div><divclass="card--work-history"><strong>🚧 INSTRUCTOR | YOUTUBE, UDEMY, TEACHABLE</strong><p>11/2019 - Present</p><p>Produced content showcasing new tech, tutorials& interviews with top developers.</p><ul><li>166,000+ Youtube Subscribers</li><li>30,000 course copies sold</li><li>12+ Million views on Youtube</li><li>Made regular contributions to Traversy Medias youtube channel (1.9m Subscribers)</li><li>Tutorial videos included projects such as social networks, Ecommerce, real time video, stripe& paypal integrations and more</li></ul></div><divclass="line-break"></div><divclass="card--work-history"><strong>🚧 SENIOR DEVELOPER | FOI LABS</strong><p>10/2017 - 10/2019</p><p>Designed and developed a laboratory management system. My system            provided an interface for lab technicians and customers to view and            track data from samples tested in the lab.</p><ul><li>Designed prototype& pitched original idea for new lab management system (LIMS)</li><li>Built entire code base and brought version 1 of LIMS system to market as a solo developer</li><li>Onboarded and trained customers (Webinars& Conferences)</li><li>Managed a small team of developers in expansion of LIMS system</li></ul></div><divclass="line-break"></div><divclass="card--work-history"><strong>🚧 DIGITAL MARKETER | UNIFIVE DIGITAL</strong><p>2014 - 2017</p><p>Started a digital agency building websites and marketing for            local businesses. Mostly Wordpress sites with small modifications to            themes.</p><ul><li>Organized SEO& SEM campaigns on a local and global scale.</li><li>Saved a customer $110k a year by reducing Adwords CPC cost with optimization</li><li>70 + websites built with my small team of developers and freelancers</li></ul></div></section>
Enter fullscreen modeExit fullscreen mode
.card--work-history{border-left:1pxsolidvar(--mainBorderColor);margin-top:3em;margin-bottom:3em;padding-left:2em;}.line-break{background-color:var(--mainBorderColor);height:1px;}
Enter fullscreen modeExit fullscreen mode

Projects & Accomplishments

Add the follow code bellow theWork History section

<sectionclass="section--page"><h2>Projects& Accomplishments</h2><divclass="card--project"><ahref="project1.html"><span>🏆</span>Built a Laboratory management system for forensics lab</a></div><divclass="card--project"><ahref="project1.html"><span>🏆</span>Documentation website - Lead team to re-build docs for agora.io</a></div><divclass="card--project"><ahref="project1.html"><span>🏆</span>Ecommerce platform using paypal and stripe API for payment integration</a></div><divclass="card--project"><ahref="project1.html"><span>🏆</span>Social Network - open source project</a></div></section>
Enter fullscreen modeExit fullscreen mode
.card--project{padding-top:1em;padding-bottom:1em;border-top:1pxsolidvar(--mainBorderColor);}.card--projecta{color:var(--mainTextColor);transition:0.3s;}.card--projecta:hover{color:rgb(30,190,214);}
Enter fullscreen modeExit fullscreen mode

Project page

It's best practice to say a few things about every project you have worked on. For this we will create a template and fill in some dummy text for each project. I'll add one template and let you modify as you need.

In the same directory as yourindex.html file create aproject1.html file and add the following code. If followed my code exactly in the last step you should already be linked to this page.

<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>Dennis Ivy</title><metaname="description"content=""><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="./styles/main.css"></head><body><divid="container--main"><ahref="index.html">&#x2190; Go Back</a><h1>Built a Laboratory management system for forensics lab</h1><ul><li><ahref="#">Live Demo</a></li><li><ahref="#">Source code</a></li></ul><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look</p><ul><li>Contrary to popular belief, Lorem Ipsum is not simply random text</li><li>making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</li><li>45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem"</li></ul></div></body></html>
Enter fullscreen modeExit fullscreen mode

Making it responsive

It's 2022 your site better be responsive.

Add this to the bottom of your CSS file

@media(max-width:600px){.section--page{padding-top:1em;padding-bottom:1em;}#wrapper--hero{gap:1em;flex-direction:column;}#profile-pic{width:200px;height:200px;}.card--work-history{border-left:none;padding-left:0;}}
Enter fullscreen modeExit fullscreen mode

Hosting with Github pages

I told you I was gonna make this part as simple as possible. So we wont use any external services outside of github, a platform every developer should be familiar with.

If your not familiar with Git & GitHub I'd recommend checking out this video I made onUploading Files To GitHub

Github pages

Once your files on pushed to your Github repo you can use github pages to host your static website, this process is easy.

Note: If you want to host for free you will need to make your repo a public repo

In your GitHub account go to select your repo and then clicksettings -->pages and then select the branch you want to deploy and click save.

This could take a minute so give it some time before you refresh.

Just to be safe, make sure your home page is calledindex.html to avoid conflicts.

You should now be able to see your domain userCustom Domain. Mine looks like thisdivanov11.github.io/Digital-Resume

Github pages

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
leatex profile image
Lea M
Soy curioso, mucho, consumo cantidades desproporcionadas de información, y tengo una capacidad increíble para controlar la ansiedad.
  • Location
    Argentina
  • Joined

super cool! I've just watched your youtube video, it's great!

CollapseExpand
 
codewithlaksh profile image
Lakshyaraj Dash
I am a programmer in python and I build many basic projects in python. I like to develop the website backend with python. Link to my github profile: https://github.com/codewithlaksh/
  • Joined

This is an awesome design for a portfolio website. I had built a portfolio website by watching your video. Thanks dennis!

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Working on @appwrite. YouTuber, contributor at @traversymedia, and online instructor.
  • Work
    Developer Adovate at Appwrite
  • Joined

More fromDennis Ivy

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp