Welcome to the current version of the Bubbles & Fur website! The code can be viewed in the repository on GitHub. This project represents a modern, optimized iteration of the site, built with minified assets, a simpler workflow, and better performance.
Recent Updates
I decided to pause my full-stack course to get more practice with front-end development. To deepen my knowledge, I took a course from Traversy Media on Bootstrap, which I really enjoy using. This inspired me to redo the Bubbles & Fur site to enhance user experience and navigability while condensing the pages. The new version features minified files and a batch script to publish updates to GitHub. Overall, this iteration is more modern and visually appealing.
Key Features
Here are some of the main updates and features I’ve implemented:
- Responsive Design Enhancements: Improved the site’s responsiveness to ensure it looks great on devices of all sizes, from mobile phones to desktops.
- Improved Navigation: Cleaned up the navigation bar for easier access to services and contact information, enhancing the user experience.
- Visual Updates: Updated images and styles for a fresh look, incorporating eco-friendly themes that align with our brand values.
- Accordion for Additional Services: Introduced an accordion feature for additional services, allowing users to expand sections for more information without cluttering the page.
- Modal Pop-ups for Service Details: Added modal pop-ups that provide detailed descriptions and booking options for each service, improving user engagement.
- Leaflet Integration for Service Areas: Integrated Leaflet to visually represent the areas we serve, giving clients a clearer understanding of our reach.
Technologies Used
This version of the website uses the following technologies:
- HTML5: For structuring the content of the website.
- CSS3 (Sass): For styling, including Bootstrap and custom styles written using Sass.
- JavaScript: For interactive elements like the contact form and the service area map.
- Bootstrap 5: For responsive design, layout, and UI components.
- Leaflet.js: To create an interactive service area map.
- Font Awesome: For icons used throughout the site.
Build Tools
To enhance optimization and maintainability, I employed the following build tools:
- Node.js: For running build tasks.
- HTML Minifier Terser: To minify HTML files and optimize performance.
- Sass: For writing modular and maintainable CSS.
- CSS Minifier: To compress CSS files.
- JavaScript Minifier: To minify JavaScript files.
Conclusion
Developing the Bubbles & Fur website has been a valuable experience that enhances my skills and reinforces my commitment to delivering a high-quality product. Next up is building my own marketing site.