Updating the Main section

You can add a custom blog icon or update the hero images for the Main section.

If you have a blog link on your GitHub profile it will be surfaced in the Hero component. You can search for an alternate icon here.

1. Update your icon (config.js line 27)

   export const Blog = <Icon icon="ph:link-bold" />;

There are two hero images, one for each theme (light or dark). I chose to use these images only on larger screen sizes, the related CSS can be found in the Hero component. I used Unsplash to find these photos.

To replace these images follow the instructions below:

1. Update the image imports/exports (config.js line 29)

    // Hero Images (add your images to the src/images directory with the same names)
   import HeroLight from "./images/hero-light.jpg";
   import HeroDark from "./images/hero-dark.jpg";
   ...
   // Hero images (imported above - lines 8-9)
   export { HeroLight as Light };
   export { HeroDark as Dark };