This project showcases an article page dedicated to the Volkswagen T1 Electro, designed to function as either an article for an automotive magazine or a landing page for the car manufacturer’s website. The page is fully responsive across various screen sizes, ensuring a seamless user experience.
The development of the page follows Object-Oriented Programming (OOP) principles and the BEM methodology, ensuring that the code is highly maintainable and scalable for future server-side integration. The project utilizes a custom build process with Webpack and Babel, and the CSS is further optimized with PostCSS for performance improvements.
The page is optimized for desktop, tablet, and mobile devices and can be viewed live at vw-t1e.ivanjsx.com.
I was responsible for the entire development process, starting from the initial Figma design to the final deployment. This included setting up the project architecture, implementing the responsive layout, and optimizing the build process.
I ensured the codebase adheres to OOP principles and BEM methodology, making the project easily extensible and ready for future enhancements.
- HTML5 for structuring the page content
- SCSS (a subset of SASS) for styling
- JavaScript for adding interactivity
- Webpack for asset bundling and managing the build process
- Babel for JavaScript transpilation, ensuring cross-browser compatibility
- BEM methodology for clean and maintainable CSS architecture
- PostCSS for optimizing CSS (including cssnano for minification and autoprefixer for vendor prefixing)
- Flexbox, Grid Layout, and media queries for responsive design across devices
- Object-Oriented Programming for structuring the JavaScript code
- Docker for containerizing the project
- Nginx for serving the project in a production environment
- Let's Encrypt for SSL certificate generation