Building a Portfolio page with HTML, CSS and Flask (Python)

For the ones who lack expertise on JavaScript, Flask can be a very good option to build simple websites, portfolios and online forms. Flask is a Python library that acts as a micro web framework.

<p dir="auto">In this post, I'll be describing the steps I took to develop my first portfolio page. <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23xpK6G13rgD2KswsXtZAETYNXAm62hrnuNB1g3kgAAUC5RRyffRq1MsWy6PxniffHykv.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23xpK6G13rgD2KswsXtZAETYNXAm62hrnuNB1g3kgAAUC5RRyffRq1MsWy6PxniffHykv.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23xpK6G13rgD2KswsXtZAETYNXAm62hrnuNB1g3kgAAUC5RRyffRq1MsWy6PxniffHykv.png 2x" /> <h2>HTML, CSS structure 🛠 <p dir="auto">In order to find a structure that aligns with my sketches, I basically look into several portfolio templates available online and inspected the code. From those templates, I took the components that I would like to see on my portfolio, and I did my own adjustments. Finally I divided the code into sections: <ul> <li><p dir="auto"><strong>About section: Having the navbar, a profile picture, an image and short intro about me. <li><p dir="auto"><strong>Skills section: With icons and progressive bars. <li><p dir="auto"><strong>Projects section: A container with several <em>Divs, with images and links to my projects. <li><p dir="auto"><strong>Contact section: A contact form, so people can reach me out. <h2>Flask Web Framework 💻 <p dir="auto">In order to launch the client (server), the only code needed is the following: <pre><code>from flask import Flask, render_template, request app = Flask(__name__) if __name__=='__main__': app.run() <p dir="auto">In order to render a certain HTML template, do the following: <pre><code>@app.route("/") def html_render(): current_year = dt.datetime.now().year return render_template('index.html', year = current_year) <p dir="auto">In the example above, you can see that I defined the variable <code>current_year. In case you are wondering, I have done this, because in my HTML, I have a dynamic variable called <code>year in my footer element: <pre><code><footer style="background-color: #f5deb33b; padding-top: 3%;"> <p>Still running in {{year}}. Built with &#129505 by Me.</p> </footer> <p dir="auto">With flask, you can define several variables on the HTML code, that will dynamically change according to your python code. These variables are then rendered in the <code>render_template() function. <p dir="auto">Note that for flask <strong>to recognize the CSS files, they must be inside a folder called "static". <h2>Domain, hosting and deployment 🚀 <p dir="auto">If you are looking to have your own domain for a fair price I advise <strong><a href="https://www.namecheap.com/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Namecheap. There you can find domains such as, .com, .org which are a little bit more expensive, but also very cheap options, like .xyz, .io, .tech, you name it 😉 <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/48n7dmsdQ3KSKcGufjpeVkuKu53vf1ysSwLpGfLJHqxLfLo92Y1rLxZ8fGs1q5kBHx.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/48n7dmsdQ3KSKcGufjpeVkuKu53vf1ysSwLpGfLJHqxLfLo92Y1rLxZ8fGs1q5kBHx.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/macrodrigues/48n7dmsdQ3KSKcGufjpeVkuKu53vf1ysSwLpGfLJHqxLfLo92Y1rLxZ8fGs1q5kBHx.png 2x" /> <p dir="auto">For the hosting I'm using GCP (Google Cloud Platform), and with the help of <strong><a href="https://zeet.co" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Zeet I was able to jump all the DevOps steps. I just need to connect my GitHub account to Zeet, and the integrated DevOps tools do the rest. Every time I do a git push of my code, it automatically builds, and deploys it to a Zeet URL, it is indeed very useful and easy to use. <p dir="auto">Of course, this easiness comes with a price, but at least it is free for the first 3 projects 😁 <p dir="auto"><img src="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23vsV94uCva2Lhh9bk4TqoNCWos9enNpXBisfBZHtvT4C3VUJvioGXe91pXwwYFvqgSH7.png" alt="image.png" srcset="https://images.hive.blog/768x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23vsV94uCva2Lhh9bk4TqoNCWos9enNpXBisfBZHtvT4C3VUJvioGXe91pXwwYFvqgSH7.png 1x, https://images.hive.blog/1536x0/https://files.peakd.com/file/peakd-hive/macrodrigues/23vsV94uCva2Lhh9bk4TqoNCWos9enNpXBisfBZHtvT4C3VUJvioGXe91pXwwYFvqgSH7.png 2x" /> <p dir="auto">The GCP also comes with a certain cost, but since I'm not using Data Bases, Deep Learning or any order expensive computational activity in my website, I get to pay very few cents in the end of the month. <p dir="auto">In order to map the domain bought previously, there are some steps to be done on GCP, I won't explain them, but you can easily follow them on this <strong><a href="https://cloud.google.com/run/docs/mapping-custom-domains" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">link. <h2>Last Notes 📑 <h1> <ul> <li><strong>For the ones curious about the cost 💸: I bought a domain for 2€ per year, and last month I paid 0.20€ for the hosting. Pretty cheap right? <h1> <ul> <li><strong>For the ones curious about the full code 💻: The post lacks a lot of code indeed, because it is quite robust the HTML and CSS part. The same for the python (Flask), part. However it is open source on my <strong><a href="https://github.com/macrodrigues/flask_portfolio" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">GitHub 👍. <h1> <ul> <li><strong>Avoiding spam 🚽: I developed this website a while ago, but I'm just writing the post now, because at the very beginning I did the mistake of not having a reCAPTCHA 😆. Of course I ended receiving a lot of spam messages, so definitely very important to have a reCAPTCHA, if you have a contact form. I followed the steps of this <strong><a href="https://python.plainenglish.io/how-to-use-google-recaptcha-with-flask-dbd79d5ea193" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">article. <h1> <ul> <li><strong>Ok, what about the website? <p dir="auto"><center>Almost forgot 😊, check it here: <br /> <center>🚀 <strong><a href="https://www.macrodrigues.xyz" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">www.macrodrigues.xyz 🚀