Go to main content

Curriculum vitae

Hans Lysander

Curriculum vitae

Picture showing the Homepage of the project Curriculum vitae

I carried out this project as part of the web design course in second year at the Haute École de La Province de Liège. The instructions were to copy a known site while respecting the existing framework, to inject the information from our CV into it. To be precise, you must first analyze the site, then make changes. In addition, the functionality of the original site (eg the image carousel and the contact form) must be used.

Analysis

For analysis, I first looked at the design elements, these are, the colors, the fonts, the grid, and the spacing. Thus, I was able to define the correct variables in my _variables.scss file. Then I observed the behavior of the carousel and the form so that I could abstract it.

Development

I went through a lot of testing because there was a lot to learn. For the start, I tried the BEM (block element modifier) ​​nomenclature for the first time. So it was difficult to find suitable names or even to respect the convention.

Then the next problem was how to make a drop-down menu that is accessible even if javascript is not working. The solution I found was to use checkboxes and the #checkbox: checked css selector.

Continuing, I asked myself the question, how to store my files? While talking with my teachers, I found the ITCSS architecture. This helped me to modularize my code. Using BEM and ITCSS is a very powerful tool, but this tool has a negative point. If I use BEM, I “pollute” my code with classes, which increases the file size.

One point that I find important is sending emails. This works fine with the PHP mail() function. On namecheap.com you have to use a mailbox known to the server. A conclusion that took me some research time.

Conclusion

This project introduced me to a lot of new techniques. I haven’t always been able to master them (eg Gettext), but I have learned a lot from reading the documentation.

See work Curriculum vitae
Do you want to contact me?

Here you can go to the contact form

Contact