Skip to content

Latest commit

 

History

History
45 lines (33 loc) · 3.04 KB

README.md

File metadata and controls

45 lines (33 loc) · 3.04 KB
Raw

Embroidery Hobby Website

Introduction

This project is a personal project, a basic responsive landing page that implements CSS Grids and Animations for the Image Gallery, as well as HTML Class Manipulations for a Dark Mode theme.

Technologies Used

  • HTML5: For structuring the content and layout of the web pages.
  • CSS3: For styling the web pages, including layout design, responsive design techniques, and animations.
  • JavaScript: For adding interactivity to the web pages, specifically for the theme toggle feature.

Features

  • Responsive Design: The website is fully responsive, ensuring a seamless user experience across devices of various sizes, from desktops to mobile phones.
  • Dark Mode/Light Mode Toggle: An interactive button allows users to switch between dark and light themes, enhancing accessibility and user preference.
  • Interactive Gallery: The embroidery gallery utilizes CSS grid for layout and includes hover effects for image scaling, offering an engaging way to view embroidery projects.

Development Methodologies

  • Mobile-First Design: The development process started with designing for mobile devices first, then scaling up to larger screens, ensuring optimal usability and performance on mobile devices.

  • CSS Best Practices: Employed methodologies such as the use of custom properties (variables), media queries for responsive design, and transitions for smooth animations.

  • Semantic HTML: Used semantic HTML tags to structure the content meaningfully, improving SEO and accessibility.

  • JavaScript Event Handling: Implemented event listeners for interactive elements, such as the theme toggle button, to enhance the user experience through dynamic content changes.

Project Structure

  • The HTML file structures the content and includes meta tags for responsiveness and SEO.
  • The CSS is embedded within the HTML file for simplicity, focusing on responsive design, theming, and animations.
  • JavaScript is used to add functionality to the theme toggle button, allowing users to switch between dark and light modes.

Challenges and Solutions

  • Responsive Images: Ensured images scale appropriately using CSS, providing a fluid experience in the gallery section.
  • Theme Consistency: Implemented a JavaScript toggle function to switch themes while maintaining user preferences across page reloads (conceptual solution, actual implementation may require local storage or cookies).

Future Improvements

  • Separation of Concerns: Refactor the project to separate HTML, CSS, and JavaScript into distinct files for better maintainability.
  • Accessibility Enhancements: Improve accessibility by adding aria-labels and role attributes where applicable.
  • Performance Optimization: Optimize images and leverage caching strategies for improved loading times.

Credits

  • Developer: Gracie
  • Inspiration: Embroidery art and crafting communities.

Contact Information

Thank you for visiting my Embroidery Hobby project!