fix: Apply {display: none;} and {flex} to '$homepage' element and '.h…

…omepage' class

In 'HomePage.tsx':
- Apply {display: flex;}to the '$homepage' element
 to control its visibility and layout after it has been mounted.

In 'HomePage.scss':
- Add {display: none;} to the '.homepage' class to ensure it remains
 hidden initially.
- Adjust the responsive styles to control the 'flex-direction'
 of the '.homepage' class as needed.

This fix resolves the issue where the 'HomePage' component briefly
appears on the screen before the 'blend-in-out' animation is applied.

src/components/pages/HomePage.tsx

@@ -8,6 +8,7 @@ const HomePage = () => {
   useEffect(() => {
     const $homepage = document.querySelector<HTMLDivElement>('#homepage');
     if ($homepage) {
+      $homepage.style.display = 'flex'; // ?overrides the {display: none} on 'HomePage.scss'. This is to prevent the homepage from showing before animation is applied.
       $homepage.classList.add('blend-in-out');
     }
   });

src/styles/pages/HomePage.scss

@@ -6,6 +6,9 @@
 @import '../_mixins.scss';
 
 .homepage {
+  display: none;
+  flex-direction: column;
+
   @include component-code-snippet('const HomePage = () => {');
 
   user-select: none;
@@ -57,7 +60,7 @@
   }
 
   @media (min-width: 768px) {
-    display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 100vh;