Hey guys,
In this video, we will build a digital resume using Python. You can find a live demo of this webpage under
the following address. Creating this website takes only a couple
of minutes, but before we jump into coding out the solution, let us shortly check out
the website. In the hero section, you can download a pdf
version of the website by clicking this button. In the resources of this project, I have also
included a Word template for you, which you can use to generate your own CV. Below the hero section, you can insert the
links to your social media profiles. After that, we have a block where you can
list your experience & qualifications. And in the same style, I have listed down
my hard skills. If I scroll down a bit, we have a work history
summary. And at the very bottom, you can include additional
links to your projects and accomplishments. Ok, and without further ado, let us create
this website from scratch using Python. Before we start, a short disclaimer. The website idea and design are heavily inspired
by one of the videos on the Traversy Media channel. In that video, Dennis was building a digital
resume website in pure HTML and CSS. While watching the video, I thought creating
a similar website in Python might be a cool idea. That said, if you are interested in the HTML
& CSS version, I highly recommend the video on Brad's channel. I will, of course, leave the link to that
video in the description box. So, thanks a lot to Dennis and Brad for this
fantastic project idea. And with that out of the way, let us get started. As the first step, I will install the required
dependencies for this project. Therefore open up your terminal and type "pip
install streamlit and pillow". We will need streamlit to create the actual
website. To insert images into our app, we also need
to install Pillow. Once we have that out of the way, let us take
care of the files and folders we will need throughout the video. First, I will create a new Python file and
name it "app.py". Additionally, I will create two folders. One is called "assets", and the other one
"styles". Within the styles folder, I will insert a
new CSS file. Just create a standard text file and name
it "main.css". We will come back to that file when we adjust
the style of our website. Next, let me switch to the assets folder. Inside this directory, I will paste three
files. You can find those files also in my GitHub
repo. The link to that repo will be in the description
box. In the repo, you can find a pdf & word version
of the CV. Later in the app, we will implement a button
to download this pdf file. I just included the Word document if you want
to use this CV as a template. Additionally, I have also added a profile
photo. And here I also have a quick tip for you. If you want to make an awesome profile picture
from any photo for free, I recommend the following website. Just upload your image and the website will
detect your face and replace the background. You can then even further customize the result
before downloading the image for free. And with that preparation in place, let us
start coding out the website. Therefore, let me open the "app.py" file. As the first step, I will import the dependencies. To deal with the different file paths, I will
import "Path" from "pathlib". Next, I will import streamlit as st and from
"PIL", let me import "Image". After our imports, I will create a section
dealing with the different file paths. The starting point for the file navigation
will be the current directory of this python file. You can get the path by using the following
line. Here, I am using the parent attribute on the
Path of this file. If that is not available, for example, if
you are using Jupyter Notebooks, then I am using the pathlib method "cwd", which stands
for the current working directory. Once we have defined the current directory,
we can construct the other file paths. Our CSS file is located in the styles folder
and is called "main.css". Next, we will have the resume in the assets
folder. And lastly, I will define the profile picture
file path, which is also located within the assets folder. With that in place, let me make some space
for the general settings. And I think it might be easier to first type
all variables before explaining them. To change the information on this site easily,
I have created this section. Later in the video, we will display those
variables in the app. So, make sure to change the settings accordingly,
like your name, a short description about you, your email address, your social media
links and your projects, if you have any. Before we go further, let me highlight a couple
of things. You can use an image or emoji for the page
icon. If you pick an emoji, you can either insert
the emoji name or directly paste the emoji into your script, as I did for the projects. Or, if you are feeling lucky, you can also
insert "random" for a random emoji! Regarding the social media and project dictionary,
feel free to add or remove links. Later in the video, we will keep things dynamic. So, it is ok if you input here less or more
links. Also, if you do not have any projects yet
that you want to showcase, then feel free to delete that section. Ok, and with our settings in place, let us
insert the first streamlit element: "Set page config". Here we can specify the page title and icon
we have defined in our settings. And to validate that everything is working,
let me insert a temporary title. To run the app, I will save the script and
go back to my terminal. Ensure that you are in the same working directory
as your script. In my case, the "app.py" file is located on
my desktop in the "digital cv" folder. Then type "streamlit run app.py". After pressing enter, streamlit will open
your default browser. To make it easier to see our changes, I will
display my text editor and browser next to each other. Alright, and here is our web app, with the
page title, page icon and some text. I have set the default theme in my browser
to dark mode. That is why I have a black background with
white font. If you have a white background with black
font, then do not worry. We will change the style of our app anyways
later in the video. And speaking of the styling, let us inject
the content of our "main.css" file into our app. To do this, I am using a little hack by opening
the css_file and inserting the content between an HTML style tag. Ensure to set "unsafe allow HTML" to true. Currently, our CSS file is empty, but we will
take care of that later in the video. To keep things organized, I will also load
our other resources here, like our pdf file. To do so, I will read our resume file as binary
and save it in a variable called "PDFbyte". Next, I will load our profile picture using
the pillow module. Simply type "Image.open", followed by the
file path. After we have loaded our resources, let me
create the hero section. For this, I will make two columns and use
a small gap. Within the left column, I will insert our
profile picture using "st.image". You might want to play around with the width. For my particular photo, the width of 230
pixels worked fine for me. In the second column, I will display the name,
a short description of ourselves and a download button to download the pdf version of our
CV. So, within the data parameter, I can now pass
the PDFbyte variable from above. After our download button, I will also provide
our email address. Ok, and with that, let me save the file and
refresh the website. And here is our header section. When I now click on this button, we can download
the pdf version. Ok, this seems to be working. Next, let us take care of our social links,
which we have defined in the general settings area. I want to place those links horizontally after
our hero section. To add more space between the two sections,
I will insert an empty paragraph using the pound sign. To determine how many columns we need, I can
count the items in our dictionary using length. Within each column, I want to insert the link
to the respective social media platform. For this, I will iterate over our dictionary. So, the first link should be in the first
column, the second link in the second column and so on. To get the current index of the iteration,
I am using enumerate. With that, I can now use the write method
on the column and insert the platform name and link using an f string. If I save the file and reload the website,
we can see our links. And to test things out, let me click on YouTube. Ok, and this seems to be working. With that in place, let us move on to the
next section. As before, I will add some space using the
pound sign. In this part, I want to list down my experience
& qualifications using some bullet points. For this, you can use the streamlit write
element. Just make sure to use a dash at the beginning. In that case, streamlit will recognize it
as an unordered list. Once done, let me save the script again and
refresh the website. Ok, and this is what it will look like. For now, I will ignore the styling, but later
in the video, we will remove the dots within the list. Below our experience and qualifications, I
will list my skills. And this section will be very similar. The only difference is that I have used different
emojis for the skills. So, when I click on refresh, this is what
our page looks like. And with that, let us move on to the next
block - our work history. In this section, I want to list my recent
jobs. For some visual separation, I will insert
a divider by using three dashes. Inserting the different jobs will be again
very similar to what we have seen so far. In the first row, I will insert the job title
and company name, followed by the period and the main tasks. Also, as before, I use bullet points here. And before going further, let me also check
how the work history looks on the website. Ok, great. Here, we have our divider followed by the
information about the current work. I will now add two more jobs. Let me speed up the video as I do not want
to bore you watching me typing out those sections. So, I have not introduced any new elements. I just adjusted the text for the respective
jobs. So, when I refresh the website and scroll
down a bit, we can see our full work history. And with that, we are almost done with our
website. Optionally, you could also insert links to
your projects and accomplishments. For this, I will use another subheader and
divider. Next, I will iterate over our project dictionary. For each project, I will insert the project
description and the respective link. When I save the file and reload the website,
we can see our projects. And to validate that the links are also working,
let me click on one of the links. In my example, streamlit will redirect me
to a YouTube video. Okay, guys, and with that, we are done with
our basic website. Let me close my text editor so we can see
the website fully. For the final touch, I want to adjust the
site's styling. And we will split the styling into two parts. In the first part, I will show you some options
streamlit offers regarding the overall appearance. Afterwards, we will use our CSS file to manipulate
the styling of some other HTML elements. So, as I said, let us start with the native
streamlit option to style the website. Therefore create a new folder in the root
directory of your app and name it ".streamlit". Inside this folder, make a new "config.toml"
file. Open this file with your preferred text editor. Here we can now specify some global settings
for our app, like defining the theme. Within the theme section, I will specify the
primary, background, secondary, and text colours. Also, feel free to adjust those values to
your needs and liking. When I save this file and go back to my website,
you will notice nothing has been changed, even if I reload the page. To apply our custom theme, we need to rerun
the app. So, back in the terminal, I will press CTRL
+ C to stop the current session before rerunning it. And now we can see that the overall appearance
has changed. Yet, the customization of the theme is rather
limited. For the final touch, I will add some custom
CSS. To do so, let me resize my browser and place
our "main.css" file next to it. Do not worry; we are not going to write much
CSS here. There will be just a couple of adjustments. As the first step, I will import a font from
google. Once we have imported the font, I will change
the font family on our entire website. You should see the new font when I save the
file and reload the page. Just a quick reminder: This is working because
we have loaded our CSS file into our app using the following code lines. With that said, let me also change the styling
of our links. I will remove the underline by setting "text-decoration"
to "none". The colour should be white, and I will set
the font weight to 500. Additionally, I want to change the colour
when I hover over the link. Ok, and with that place, let me see how it
looks. I think it is looking much better now. Whenever I hover over the links, the colour
matches our overall theme. The next change will be regarding the bullet
points and the divider. For the unordered list, I will set the "style
type" to "none". And for the divider, I will overwrite the
default values for the top and bottom margins. After saving the file and refreshing the website,
we can see that the bullet points disappeared and that the divider moved up slightly. As the last modification, I will remove the
streamlit branding, so the hamburger icon, the colourful header and the "made with streamlit"
footer note. To do that, we can simply set the main menu,
footer and header to hidden. Alright, guys, and here it is - our digital
CV written in Python. I think that the design is pretty neat and
simple. As the last step, you might also want to deploy
this website to the internet. And for this, I already have a separate video
on my channel. In that video, I will show you how to deploy
your web app to Heroku. You can find the link to that video in the
description box and in the info card above. As always, if you have any questions, let
me know in the comments. Thanks for watching, and see you in the next
video.
