Refactor: Migrate 'pages' ES6 functional components to ES5

- 'AboutPage.tsx'.
- 'AccessPage.tsx'.
- 'ContactPage.tsx'.
- 'ExpertiseSummaryPage.tsx'.
- 'HomePage.tsx'.
- 'NotFoundPage.tsx'.
- 'ProjectsPage.tsx'.

src/components/pages/AboutPage.tsx

@@ -12,14 +12,16 @@ import ExpertiseLinks from '../UI/ExpertiseLinks.tsx';
 
 import setPageTitle from '../../utils/setPageTitle.ts';
 
-const AboutPage: React.FC = () => {
+function AboutPage(): React.ReactElement {
   const $aboutPage = useRef<HTMLElement>(null);
 
   setPageTitle('About me 🙋‍♂️');
 
   useEffect(() => {
     if ($aboutPage.current) {
-      $aboutPage.current.style.display = 'flex'; // ?overrides the {display: none} on 'aboutPage.scss'. This is to prevent the aboutPage from showing before animation is applied.
+      // * overrides the {display: none} on 'aboutPage.scss'.
+      // * This is to prevent the aboutPage from showing before animation is applied.
+      $aboutPage.current.style.display = 'flex';
       $aboutPage.current.classList.add('blend-in-out');
     }
   });
@@ -68,6 +70,6 @@ const AboutPage: React.FC = () => {
       </div>
     </main>
   );
-};
+}
 
 export default AboutPage;

src/components/pages/AccessPage.tsx

@@ -26,7 +26,7 @@ const AstronautStyleProps = {
   },
 };
 
-const AccessPage = () => {
+function AccessPage(): React.ReactElement {
   const $accessPageMain = useRef<HTMLElement>(null);
   const $videoElement = useRef<HTMLVideoElement>(null);
   const navigate = useNavigate();
@@ -79,6 +79,6 @@ const AccessPage = () => {
       <AccessPageVideo $videoElement={$videoElement} />
     </div>
   );
-};
+}
 
 export default AccessPage;

src/components/pages/ContactPage.tsx

@@ -9,7 +9,7 @@ import ContactForm from '../UI/ContactForm.tsx';
 
 import setPageTitle from '../../utils/setPageTitle.ts';
 
-const ContactPage: React.FC = () => {
+function ContactPage(): React.ReactElement {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const laptopWidth = 1366;
 
@@ -42,6 +42,6 @@ const ContactPage: React.FC = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ContactPage;

src/components/pages/ExpertiseSummaryPage.tsx

@@ -6,7 +6,7 @@ import '../../styles/pages/ExpertiseSummaryPage.scss';
 
 import setPageTitle from '../../utils/setPageTitle.ts';
 
-const ExpertiseSummaryPage: React.FC = () => {
+function ExpertiseSummaryPage(): React.ReactElement {
   setPageTitle('My expertise 💼');
 
   return (
@@ -35,6 +35,6 @@ const ExpertiseSummaryPage: React.FC = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ExpertiseSummaryPage;

src/components/pages/HomePage.tsx

@@ -10,7 +10,7 @@ import ProjectsPage from './ProjectsPage.tsx';
 import NotFoundPage from './NotFoundPage.tsx';
 import FileTabsNavbar from '../UI/FileTabsNavbar.tsx';
 
-const HomePage: React.FC = () => {
+function HomePage(): React.ReactElement {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const minWith = 768;
 
@@ -36,6 +36,6 @@ const HomePage: React.FC = () => {
       </Routes>
     </>
   );
-};
+}
 
 export default HomePage;

src/components/pages/NotFoundPage.tsx

@@ -25,7 +25,9 @@ const AstronautStyleProps = {
   },
 };
 
-const NotFoundPage: React.FC<NotFoundPageProps> = ({ fromPath }) => {
+function NotFoundPage(props: NotFoundPageProps): React.ReactElement {
+  const { fromPath } = props;
+
   const isWildCardAtAccessPage = fromPath === '/';
 
   const pathTo = isWildCardAtAccessPage ? '/' : '/homepage';
@@ -63,6 +65,6 @@ const NotFoundPage: React.FC<NotFoundPageProps> = ({ fromPath }) => {
       </header>
     </main>
   );
-};
+}
 
 export default NotFoundPage;

src/components/pages/ProjectsPage.tsx

@@ -10,7 +10,7 @@ import setPageTitle from '../../utils/setPageTitle.ts';
 
 import involvement from '../../services/involvementAPI/involvementAPI.ts';
 
-const ProjectsPage: React.FC = () => {
+function ProjectsPage(): React.ReactElement {
   setPageTitle('My projects 😊');
 
   const [projectsLikes, setProjectsLikes] = useState([{}]);
@@ -49,6 +49,6 @@ const ProjectsPage: React.FC = () => {
       </main>
     </div>
   );
-};
+}
 
 export default ProjectsPage;