fumzy123 / personal-astro-blog

Problems I encountered

1. Make two flex-items the same size: If you want to accomplish this simply use the flex property and set it to 1.

flex: 1;

2. How to make Images act responsively in a flex-item:

   a. Wrapped the images in a container. And ensure the container behaves well as the flex-item

   .services__web-dev-img-container {
     /* Layout */
     flex: 1;
     display: flex;
     justify-content: flex-end;
   
     /* Box Model */
     height: 300px;
   
     /* Position */
     position: relative;
   }

   b. Set the height of the images to be realtive to that of the container

   .first__image {
     /* Box Model */
     width: 300px;
     height: 85%;
   
     /* Image */
     object-fit: cover; /*This maintains the aspect ratio of the image within the specified image width and height */
     object-position: top; /* Positions the mage and in so doing chooses what part of the image to show within the specified width and height */
   
     /* Position */
     position: absolute;
     top: 0px;
     left: 0px;
     z-index: -1;
   }

3. I just realised that my Container utility class and my Pre-defined media queries were mobile first. I designed the Website on Figma Desktop first.

Things I learnt

1. Using icons to your Astro project.

   • Dowload astro-icon package: It helps you optimize your icons

         npm install astro-icon

   • Integrate astro-icon into your astro project

   import { defineConfig } from 'astro/config';
   import icon from 'astro-icon';
   // https://astro.build/config
   export default defineConfig({
     integrations: [
       icon({
         iconDir: 'src/assets/icons',
         include: {
           mdi: ['*'],
         },
       }),
     ],
   });

   • Install an icon-package of your choice

         npm install @iconify-json/mdi
     

   • Use it in your project

     ---
         import { Icon } from 'astro-icon/components'
     
     ---
     
     // Embed the `account` icon from `@iconify-json/mdi`
     <Icon name="mdi:account" />

2. Plan out the Typography sizes and Colors for your website.

   • The Hero section demonstrates an interesting way to use colors: There is a visual heirarchy happening in the text. The majority of the text closely matches the color of the background. The key text are bold and have a dark color. The button however has a brighter color to really draw your attention and stand out. A good accent is warm and filled with bright energy. It is not cold and dark.

3. Images within a container will not respond to a text-align of center if the CSS reset has forced them to behave like block level elements.