-
);
-};
+}
export default ContactPage;
diff --git a/src/components/pages/ExpertiseSummaryPage.tsx b/src/components/pages/ExpertiseSummaryPage.tsx
index a85dde4..9901c32 100644
--- a/src/components/pages/ExpertiseSummaryPage.tsx
+++ b/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 = () => {
);
-};
+}
export default ExpertiseSummaryPage;
diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
index 859a239..7600b17 100644
--- a/src/components/pages/HomePage.tsx
+++ b/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 = () => {
);
-};
+}
export default HomePage;
diff --git a/src/components/pages/NotFoundPage.tsx b/src/components/pages/NotFoundPage.tsx
index e405b52..b99e5f5 100644
--- a/src/components/pages/NotFoundPage.tsx
+++ b/src/components/pages/NotFoundPage.tsx
@@ -25,7 +25,9 @@ const AstronautStyleProps = {
},
};
-const NotFoundPage: React.FC
- 
-
- {`${projectData.projectType} project`}
-
-
-
- (null);
const $videoElement = useRef(null);
const navigate = useNavigate();
@@ -79,6 +79,6 @@ const AccessPage = () => {
);
-};
+}
export default AccessPage;
diff --git a/src/components/pages/ContactPage.tsx b/src/components/pages/ContactPage.tsx
index 9728648..3c1f6d3 100644
--- a/src/components/pages/ContactPage.tsx
+++ b/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 = () => {
-
- {projectData.data.projectName.name1}
-
- | null;
}
-const AccessPageVideo: React.FC = ({ $videoElement }) => (
+function AccessPageVideo(props: AccessPageVideoProps): React.ReactElement {
+ const { $videoElement } = props;
/* eslint-disable jsx-a11y/media-has-caption */
-
- /* eslint-disable jsx-a11y/media-has-caption */
-);
+ return (
+
+ );
+}
/* eslint-disable no-undef */
diff --git a/src/components/animations/Drone.tsx b/src/components/animations/Drone.tsx
index dd12078..1593d03 100644
--- a/src/components/animations/Drone.tsx
+++ b/src/components/animations/Drone.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
import droneFile from '../../assets/images/gif/drone.gif';
import '../../styles/animations/Drone.scss';
-const Drone: React.FC = () => {
+function Drone(): React.ReactElement {
const [position, setPosition] = useState({ x: 0, y: 0 });
const [firstMove, setFirstMove] = useState(false);
const drone = useRef(null);
@@ -77,6 +77,6 @@ const Drone: React.FC = () => {
}}
/>
);
-};
+}
export default Drone;
diff --git a/src/components/animations/FloatingAstronaut.tsx b/src/components/animations/FloatingAstronaut.tsx
index fa42d0d..e4bd332 100644
--- a/src/components/animations/FloatingAstronaut.tsx
+++ b/src/components/animations/FloatingAstronaut.tsx
@@ -25,35 +25,39 @@ interface FloatingAstronautProps {
};
}
-const FloatingAstronaut: React.FC = ({
- animationSpeed,
- maxWidth,
- move,
- scale,
- rotation,
-}) => (
-
-);
+function FloatingAstronaut(props: FloatingAstronautProps): React.ReactElement {
+ const {
+ animationSpeed,
+ maxWidth,
+ move,
+ scale,
+ rotation,
+ } = props;
+
+ return (
+
+ );
+}
FloatingAstronaut.defaultProps = {
move: {
diff --git a/src/components/pages/AboutPage.tsx b/src/components/pages/AboutPage.tsx
index 28804ac..d7a55a0 100644
--- a/src/components/pages/AboutPage.tsx
+++ b/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(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 = () => {
);
-};
+}
export default AboutPage;
diff --git a/src/components/pages/AccessPage.tsx b/src/components/pages/AccessPage.tsx
index dbdd44e..215d84c 100644
--- a/src/components/pages/AccessPage.tsx
+++ b/src/components/pages/AccessPage.tsx
@@ -26,7 +26,7 @@ const AstronautStyleProps = {
},
};
-const AccessPage = () => {
+function AccessPage(): React.ReactElement {
const $accessPageMain = useRef
- {projectData.data.projectName.name1}
-
- {projectData.data.projectName.name2}
-
-
-
-
-
- Description
-{projectData.data.description.join(' ')}
-
- {projectData.data.stack.map((stackItem) => (
-
- {stackItem}
-
-
- ))}
-
-
-
- Live version
-
-
- Source code
-
+function SplideCarouselSlide(props: SplideCarouselSlideProps) {
+ const { projectData, projectsLikes } = props;
+ return (
+
+
-
-);
+
+ );
+}
export default SplideCarouselSlide;
diff --git a/src/components/animations/AccessPageVideo.tsx b/src/components/animations/AccessPageVideo.tsx
index a1266b7..5070f16 100644
--- a/src/components/animations/AccessPageVideo.tsx
+++ b/src/components/animations/AccessPageVideo.tsx
@@ -7,20 +7,22 @@ interface AccessPageVideoProps {
$videoElement: RefObject
+
-
+
+
+ {`${projectData.projectType} project`}
+
+
+
+
+
+ {projectData.data.projectName.name1}
+
+
+ {projectData.data.projectName.name1}
+
+ {projectData.data.projectName.name2}
+
+
+
+
+
+ Description
+{projectData.data.description.join(' ')}
+
+ {projectData.data.stack.map((stackItem) => (
+
+ {stackItem}
+
+
+ ))}
+
+