Skip to content

mihaly-ale/alire

BranchesTags

Repository files navigation

Alire - A website project | www.alire.me

Alire Logo Alire Logo

Company Description

Alire is a natural therapeutic company embracing a holistic approach, providing a variety of services including massage, osteopathy, nutrition, and biomagnetism. This website serves as an introduction to the company's philosophy and services.

Project Goal

The primary objective of this project was to experiment with the Astro.js framework as a component-based approach to web development.

Screenshots of the Page - Home Screenshots of the Page - Services Screenshots of the Page - Contact Screenshots of the Page - Blog

Technologies Used

  • Figma: Creating design and logos 1
  • SCSS: Styling with modular and advanced CSS features
  • Astro.js: Framework for building the site with components

Hosting

  • Hostinger: The project is hosted on Hostinger. Since Astro doesn't offer a deployment guide specifically for Hostinger, setting up the site required some unexpected challenges.

Libraries Used

  • Accessible Astro components: Utilized for building accessible and reusable UI components. 2
  • Slugify by sindresorhus: Included to handle string conversion for URLs and identifiers. 3

Challenges Faced

  1. First Time Using a Framework

    • This project marked my first experience with a framework, moving from traditional static development to component-based architecture with Astro.js.

  2. Advanced Git Practices

    • Explored branching and rebasing techniques.
    • Worked extensively with git logs, including reflog for troubleshooting.
    • Gained experience with merging versus rebasing workflows.
    • Practiced resetting files and resolving merge conflicts.
    • The focus was on experimentation with Git workflows rather than achieving perfection.

  3. Working with Markdown Files

    • Gained familiarity with basic Markdown syntax for formatting content, such as headings, lists, links, and images.
    • Explored the use of frontmatter to include metadata like titles, descriptions, and configuration options at the beginning of Markdown files.
    • Learned how Markdown integrates with Astro to define page-level properties and improve project organization.
    • Encountered challenges in formatting complex elements like nested lists and code blocks, but developed a clearer understanding through practice and reference to documentation.

  4. Hostinger and Astro Compatibility

    • Hostinger and Astro do not seamlessly integrate. The deployment required custom configurations.

      • Creating publish.yml for the build process
      • Using the YAML file to generate the dist folder on the build branch
      • Hostinger automatically detects the dist folder for deployment using its CI/CD pipeline.

Planned Improvements

  • Adding a "Back to Top" link for better navigation.
  • Implementing a "Skip to Main Content" feature to enhance accessibility.
  • Integrating light and dark mode for a customizable user experience.
  • Adding animations.
  • Improve page accessability.

Known Bugs

  1. Modal Focus Issue:
    • After closing any of the four modals, the focus returns to the third button instead of the button that opened the modal. This needs to be fixed to ensure proper focus management and accessibility.

What I would do different next time

  • Create and follow a more robust styling strategy.

    I started the project without any prior knowledge of Astro or JavaScript frameworks. The process was rocky, and I ended up focusing more on CSS than I had planned originally, which wasn't my objective. In hindsight, I know I should have used Tailwind - it's still on my bucket list!

    The basic idea was dust off my Sass knowledge and leverage it to my advantage: make styles modular and reusable for the future. (Hence the many commits related to partial files.) Following this idea all the variables, @font-face etc is served by Sass and imported in each of the layout files. I may have watched too many Kevin Powell videos.

    Initially, I used scoped styles, but later I moved everything into the global.css file. This approach is not what Astro recommends, but at that time , it seemed the most reasonable and easiest solution. Since I wasn't using any libraries, I didn't worry about specificity issues during development.

  • Use Javascript library for form validation.

    I wrote around 200 lines of Javascript to handle client-side validation and form submission. I utilized the Constraint Validation API and added custom validation rules. As I had used the API before, I was more focused on UX.

    The form doesn't preform any validation until the first submission. After that, it provides inline validation to give instant feedback and encourage visitors during the correction phase.

    FormSubmit was used for form submission.

    I consider the result a win.

  • Use pre-made componenents and learn from them.

    They are incredibly useful and solve problems that I wasn't aware before.

Happy with

  • The overall look of the website.
  • PageSpeed Scores

Image attributions:

Footnotes

  1. https://www.figma.com/proto/Ye1NIbMhdbf1XPc3QSTGgw/ALIRE?node-id=276-3033&t=9T0ZsaBmUtFDVFD5-1 ↩

  2. https://github.com/markteekman/accessible-astro-components ↩

  3. https://github.com/sindresorhus/slugify ↩

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages