Published in


Writing a single page developer CV using the latest front-end tech

Would you like to have an advantage when participating in selective processes for a developer job?

Currently, I’m a software engineer at T-Pro in Ireland and I always tried to have a good CV in PDF ready to send. After starting working at T-Pro I realized that one thing that makes a difference when looking for a job as a developer is how you show your skills. So I decided to use my free time and develop a single page CV using some of the latest available techs in the market for front-end development. In other words, using my skills to show my skills.

I believe this will make it much easier for companies that are looking for a developer to analyze your application.

If you are not interested in the coding part, you can skip to the CV here:

Now, If you want to build something similar, I will be showing you in the next steps how was the process to make it happen, I am also available on comments for any help needed.

What is being used?

  1. Alpine.js
  2. TailwindCSS
  3. Webpack
  4. AWS S3 / CloudFront

What was the challenge?

To develop a simple and beautiful page that is very small, loads incredibly fast and it’s 100% responsive that works in any device. Besides, I wanted to get 100 points on every category using Google Lighthouse, which tells you the best practices for web pages.

First, I had to find some inspiration on the internet by searching nice CV pages that others have built. Then my wife who is a UI/UX professional helped me with choosing the colors, font, images, logo, and design of the page.

Logo for designed by Bruna Mirella

Thumbs up for her 👍. Second, which front-end library should I use for coding the CV easily and consistently.

As it is a single page, I did not want to use large frameworks like VueJS or Angular. So I found AlpineJS, a lib with 7kb when compressed that can do much more than what it looks. It can show and hide elements, access data in your Javascript file, and execute for each loop commands quickly building lists with less code.

For CSS I always wanted to use TailwindCSS due to its simplicity and very well documented classes. Moreover, it’s easy to purge unused classes, making it very tiny when bundled in your final code.

For packaging all code into a production version, I chose Webpack, which I’m already happy and comfortable with. Webpack has many plugins to generate smaller images, uglify Javascript, and CSS. It also deploys the code with one click directly to AWS S3.

Building the timeline and skills components was a nightmare, more specifically, their content. I wanted to catch readers’attention by having the minimum amount of text as possible, and at the same time make it searchable friendly. On top of it, I’m not a native English speaker, so I had a few people to read it before releasing and fixing my grammar mistakes, which is not a bad thing, getting help and helping someone is a nice chain to keep.

Organized time-line with an overview and a few projects in the second tab.

Domain was a hard one to find, I tried to get it inside the AWS ecosystem, but AWS does not have domains finishing with .dev for sale. So I decided to get it on Namecheap and just redirect the DNS to AWS Route53, giving me complete control of the domain in my AWS account. The next step was to create a bucket in S3 to host my page as a static website, following this tutorial on AWS docs was very easy. I’m using Cloudfront to get a free HTTPS certificate, caching and gzip compression (Cloudfront still does not support Brotli).

Putting all these steps together, I was able to build the page in a week.

How about pricing to keep this page online?

The overall cost includes your domain price, I pay $12 per year plus amazon pricing for Route53 and S3. If you go with AWS, it offers you a free tier for many services. Right now, it is costing me $0.73 per month.

50 cents per hosted zone (DNS).

I’m leaving the code open source for anyone who wants to check out the implementation. Fell free to send some pull requests to fix anything that is buggy or any typos I’ve made.




IT Services, Business Change, Consulting and Sourcing

Recommended from Medium

Airflow — XCOM chats

What to keep in mind in Microservices environments. (1/3)

Swagger java annotations in action

Changing a Spring Boot dependency behaviour via App Class Loader

Banking with Ruby: Introduction to Methods: Part 1

Instrumenting Lambda with Traces: A Complete Example in Python — Honeycomb

Three bees on honeycomb.

Embedded Systems Project 7: Bluetooth

How to Create a Seeder for Laravel 8

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leandro Hoffmann

Leandro Hoffmann

Co-Founder at Catallyst / Software Engineer

More from Medium

Linked List in Data Structure and Algorithm

Call, Bind and Apply in JS

How to Land a Job Interview With Only a Resume

Introduction to Computer Science Careers with the Micro:bit