Purpose of the project
The project has been divided into three phases:
In the first phase (completed), the existing design in Squarespace was simply copied over to Netlify and a new base code was created. In the process, a new hero segment with several offers was added.
In the second phase (currently working on this), the base code will be transferred to Eleventy (static site generator), which will help with the reorganisation of the website and implementation of a CMS.
In the third phase (to be done), a shopping cart will be created and connected to the Stripe payment gateway.
My role in the project
Using the Figma app, I created the design and UI.
There are two of us working on the project.
My role in this project has been to analyse the current design and transfer it to the new code using the latest CSS technologies.
Subsequently, review and debug all the code to eliminate errors. With this, we have managed to improve the website in a complete and efficient manner.
Collaborate with my project partner to develop the design and structure to make the page accessible and fast above all.
Web stack and explanation
Having the existing design in the first phase, we have focused on the following:
HTML: The use of semantic tags such as section, main, article, nav... with the intention of making the page accessible from the first lines of the new code.
CSS: Use of Flexbox and Grid by default to organise layout and transfer the design. Intensive use of CSS variables (with default values) and utility classes. New pseudo-classes such as :where() and :clamp().
Use of modern properties such as backdrop-filter, margin-inline, aspect-ratio…
JS: Implementation of hamburger navigation on small screens via aria-hidden: and aria-selected: attributes to make it accessible via keyboard. Also implementation of a carousel in the hero section with promotions.
Git and GitHub: Continuous use of git with several main/development branches and with pull requests via GitHub.
Netlify: Connection and deployment via GitHub.
