CV – Dylan Jacquet

Back to projects

Creation of a “one page” website. I drew inspiration from the official website of Synthesia link to the website. This project was undertaken to test my abilities in reproducing a website page while customizing and enhancing it to make it my own.

Dylan Jacquet Web Developer CV website.

The concept

As part of the Web Design course, our task was to reproduce a web page exactly and transform it into our CV. We had to adapt the page to be fully accessible and compliant with accessibility standards while optimizing the site to the maximum. I chose the Synthesia website. Unfortunately their site has changed in the meantime, but having taken my precautions beforehand you can find a video of the original site.

Synthesia photo: woman in a video with a title on the left.

The Task at Hand

Our task involved creating a fully responsive and optimized web page by customizing another website’s page almost identically. I followed a principle of efficiency in my programming by using CSS primarily for functionalities typically achieved with JavaScript. This ensures that the site remains fully functional even without JavaScript.

Steps in My Work

I began by taking a complete screenshot of the original website’s page, which I then imported into a prototyping software. My goal was to adapt the content, specifically the text, so that it matched the original site’s content as closely as possible, including maintaining the same sentence lengths. Next, I started coding the site, starting with HTML, CSS, and JavaScript.

JavaScript, TypeScript, HTML, CSS, MySQL, PHP cards.

Challenges Faced

The first challenge I encountered was creating a fully functional burger menu without using JavaScript, especially considering that the site I had to reproduce had a mega-menu with numerous subsections. The second challenge was implementing sliders for reviews, which needed to be fully responsive and automatically adjust based on the number of cards present, along with the corresponding pagination indicators.

Photo with a chat box at the bottom right and a big dropdown menu.