(),
+
+ async scrollTo(ref: any) {
+ if (ref.current) {
+ await ref.current.scrollIntoView({
+ behavior: 'smooth',
+ block: 'center',
+ inline: 'center',
+ });
+ }
+ },
+}));
diff --git a/src/index.js b/src/index.tsx
similarity index 100%
rename from src/index.js
rename to src/index.tsx
diff --git a/src/pages/about-me/style/aboutMeStyle.js b/src/pages/about-me/style/aboutMeStyle.js
deleted file mode 100644
index af26c90..0000000
--- a/src/pages/about-me/style/aboutMeStyle.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-export const AboutMeContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- width: 100%;
-`;
-
-export const AboutMeDescription = styled.p`
- font-size: 1.1rem;
- font-weight: 300;
- line-height: 1.5;
- margin: 0;
- padding: 0;
- text-align: left;
-`;
diff --git a/src/pages/about-me/index.js b/src/pages/aboutMe.tsx
similarity index 88%
rename from src/pages/about-me/index.js
rename to src/pages/aboutMe.tsx
index cb8fcf5..832556b 100644
--- a/src/pages/about-me/index.js
+++ b/src/pages/aboutMe.tsx
@@ -1,14 +1,14 @@
import React from 'react';
-import { AboutMeContainer, AboutMeDescription } from './style/aboutMeStyle.js';
+import { AboutMeContainer, AboutMeDescription } from '../assets/styles/globalStyle';
import { Link } from '@mui/material';
import { Grid, Typography } from '@mui/material';
/**
* Render AboutMe component
*
- * @return {React.FC}
+ * @return {React.ReactElement}
*/
-export default function AboutMe() {
+export default function AboutMe(): React.ReactElement {
const age = new Date().getFullYear() - 2001;
return (
diff --git a/src/pages/error.tsx b/src/pages/error.tsx
new file mode 100644
index 0000000..9fde994
--- /dev/null
+++ b/src/pages/error.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */ // will be removed when updating to FC
+/* eslint-disable require-jsdoc */
+import React from 'react';
+/**
+ * Render the error fallback component
+ *
+ * @return {React.ReactElement}
+ */
+export default function ErrorFallback(): React.ReactElement {
+ return (
+
+
Etwas ist schiefgelaufen
+ Bitte laden Sie die Seite erneut.
+
+ );
+}
diff --git a/src/pages/error/index.js b/src/pages/error/index.js
deleted file mode 100644
index 3492b16..0000000
--- a/src/pages/error/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable react/prop-types */ // will be removed when updating to FC
-/* eslint-disable require-jsdoc */
-import React from 'react';
-
-export default class ErrorBoundary extends React.Component {
- constructor(props) {
- super(props);
- this.state = { hasError: false };
- }
-
- static getDerivedStateFromError(error) {
- // Update state so the next render will show the fallback UI.
- return { hasError: true };
- }
-
- componentDidCatch(error, errorInfo) {
- // You can also log the error to an error reporting service
- console.log(error, errorInfo);
- }
-
- render() {
- if (this.state.hasError) {
- // You can render any custom fallback UI
- return (
-
-
Etwas ist schiefgelaufen
- Bitte laden Sie die Seite erneut.
-
- );
- }
-
- return this.props.children;
- }
-}
diff --git a/src/pages/error/style/error_style.js b/src/pages/error/style/error_style.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
new file mode 100644
index 0000000..b1e0211
--- /dev/null
+++ b/src/pages/home.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '@mui/styles';
+import { SiteContent, Section, ScrollIndicator } from '../assets/styles/globalStyle';
+import '../assets/styles/background.css';
+import { lazily } from 'react-lazily';
+import { useScrollRefs } from '../hooks/useScrollRefs';
+import { customTheme } from '../types/global';
+
+const { AboutMe, Source, Projects, Welcome } = lazily(() => import('../pages'));
+
+/**
+ * Render Home Component
+ *
+ * @return {React.ReactElement}
+ */
+export default function Home(): React.ReactElement {
+ const theme: customTheme = useTheme();
+
+ // eslint-disable-next-line
+ const [offset, setOffset] = useState(0);
+
+ const { HomeRef, AboutMeRef, SourceRef, ProjectsRef } = useScrollRefs();
+
+ useEffect(() => {
+ const onScroll = () => setOffset(window.pageYOffset);
+ window.removeEventListener('scroll', onScroll);
+ window.addEventListener('scroll', onScroll, { passive: true });
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/home/index.js b/src/pages/home/index.js
deleted file mode 100644
index 7060279..0000000
--- a/src/pages/home/index.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useTheme } from '@mui/styles';
-import { SiteContent, Section, ScrollIndicator } from './style/homeStyle';
-import './style/homeStyle.css';
-
-import AboutMe from '../about-me/index';
-import Source from '../source/index';
-import Projects from '../projects/index';
-import Welcome from '../welcome/index';
-
-interface HomeProps {
- HomeRef: React.RefObject;
- AboutMeRef: React.RefObject;
- SourceRef: React.RefObject;
- ProjectsRef: React.RefObject;
- changeColorMode: () => void;
-}
-
-/**
- *
- * @param {HomeProps} props
- * @return {React.FC}
- */
-export default function Home(props: HomeProps): React.FC {
- const HomeRef = props.HomeRef;
- const AboutMeRef = props.AboutMeRef;
- const SourceRef = props.SourceRef;
- const ProjectsRef = props.ProjectsRef;
-
- const theme = useTheme();
-
- // eslint-disable-next-line
- const [offset, setOffset] = useState(0);
-
- useEffect(() => {
- const onScroll = () => setOffset(window.pageYOffset);
- window.removeEventListener('scroll', onScroll);
- window.addEventListener('scroll', onScroll, { passive: true });
- return () => window.removeEventListener('scroll', onScroll);
- }, []);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
diff --git a/src/pages/home/style/homeStyle.css b/src/pages/home/style/homeStyle.css
deleted file mode 100644
index 15da797..0000000
--- a/src/pages/home/style/homeStyle.css
+++ /dev/null
@@ -1,30 +0,0 @@
-
-#home{
- min-height: 80vh;
-}
-
-.spacer {
- aspect-ratio: 16/4;
- width: 100%;
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
-}
-
-
-.layer1 {
- background-image: url('./layered-waves-1.svg');
-}
-
-.layer2 {
- background-image: url('./wave-1.svg');
-}
-
-
-.layer3 {
- background-image: url('./layered-waves-2.svg');
-}
-
-.layer4 {
- background-image: url('./wave-2.svg');
-}
\ No newline at end of file
diff --git a/src/pages/home/style/homeStyle.js b/src/pages/home/style/homeStyle.js
deleted file mode 100644
index 0f8abc2..0000000
--- a/src/pages/home/style/homeStyle.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-import { keyframes } from 'styled-components';
-
-export const SiteContent = styled.div`
- display: flex;
- height: 100%;
- flex-direction: column;
- justify-content: flex-start;
-`;
-
-export const Section = styled.div`
- background-color: ${(props) => props.bg};
- color: ${(props) => props.color};
- min-height: 200px;
- padding: 20px 10px;
-`;
-
-const scroll = keyframes`
- 0%{
- opacity: 1;
- }
- 100%{
- opacity: 0;
- transform: translateY(2rem);
- }
-`;
-
-export const ScrollIndicator = styled.div`
- &:before {
- position: absolute;
- left: 50%;
- content: '';
- width: 8px;
- height: 8px;
- background: ${(props) => props.color};
- margin-left: -4px;
- top: 0.5rem;
- border-radius: 4px;
- animation-duration: 1.5s;
- animation-iteration-count: infinite;
- animation-name: ${scroll};
- }
- width: 2rem;
- height: 3rem;
- margin-left: -20px;
- top: 50%;
- margin-top: -0.7rem;
- box-shadow: 0px 0px 1px ${(props) => props.color};
- border-radius: 525px;
- position: fixed;
- left: 50%;
- top: 90%;
- opacity: ${(props) => props.opacity};
-`;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..03f5333
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,6 @@
+export { default as Home } from './home';
+export { default as ErrorFallback } from './error';
+export { default as AboutMe } from './aboutMe';
+export { default as Source } from './source';
+export { default as Projects } from './projects';
+export { default as Welcome } from './welcome';
diff --git a/src/pages/projects/index.js b/src/pages/projects.tsx
similarity index 85%
rename from src/pages/projects/index.js
rename to src/pages/projects.tsx
index ad510de..7162592 100644
--- a/src/pages/projects/index.js
+++ b/src/pages/projects.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { ProjectList, Container } from './style/projectsStyle.js';
+import { ProjectList, Container } from '../assets/styles/globalStyle';
import { Box } from '@mui/material';
import { Grid, Typography } from '@mui/material';
@@ -11,9 +11,9 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
/**
* Render Projects component
*
- * @return {React.FC}
+ * @return {React.ReactElement}
*/
-export default function Projects(): React.FC {
+export default function Projects(): React.ReactElement {
return (
@@ -50,16 +50,16 @@ export default function Projects(): React.FC {
}>
- Heuberg Live Ticker App & Manager
+ Heuberger Live Ticker App & Manager
- Die Heuberg Live Ticker App ist, wie der Name schon sagt, eine Liver-Ticker App für das Lokale Fussballtunier auf dem Heuberg. Der Manager agiert
+ Die Heuberger Live Ticker App ist, wie der Name schon sagt, eine Liver-Ticker App für das lokale Fussballtunier auf dem Heuberg. Der Manager agiert
dabei als Tunierleitungssoftware und verwaltet alle Daten, welche von den Gästen mit Hilfe der App abgerufen werden können.
- (JS, REACT, REACT Native, Express, MongoDB)
+ (TS, REACT, REACT Native, Express, MongoDB)
@@ -74,7 +74,7 @@ export default function Projects(): React.FC {
- (JS, REACT)
+ (TS, REACT)
diff --git a/src/pages/projects/style/projectsStyle.js b/src/pages/projects/style/projectsStyle.js
deleted file mode 100644
index a4571ad..0000000
--- a/src/pages/projects/style/projectsStyle.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-export const ProjectList = styled.div`^
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- gap: 1rem;
- font-size: 1.1rem;
- font-weight: 300;
- line-height: 1.5;
- margin: 0;
- padding: 0;
- text-align: left;
- width: 100%;
-`;
-
-export const Container = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- width: 100%;
-`;
diff --git a/src/pages/source/index.js b/src/pages/source.tsx
similarity index 85%
rename from src/pages/source/index.js
rename to src/pages/source.tsx
index 8d03ce6..cc9b024 100644
--- a/src/pages/source/index.js
+++ b/src/pages/source.tsx
@@ -1,20 +1,20 @@
import React from 'react';
-import { Container, Description, SourceItem, SourceImage, SourceImageContainer } from './style/sourceStyle.js';
+import { Container, SourceDescription, SourceItem, SourceImage, SourceImageContainer } from '../assets/styles/globalStyle';
import { Link } from '@mui/material';
import { Grid, Typography, Button } from '@mui/material';
import GitHubIcon from '@mui/icons-material/GitHub';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import Tooltip from '@mui/material/Tooltip';
-import MuiLogo from '../../images/mui_logo.png';
-import ReactLogo from '../../images/react_logo.png';
-import StyledComponentsLogo from '../../images/styled-components_logo.png';
+import MuiLogo from '../assets/images/mui_logo.png';
+import ReactLogo from '../assets/images/react_logo.png';
+import StyledComponentsLogo from '../assets/images/styled-components_logo.png';
/**
* Render Source component
*
- * @return {React.FC}
+ * @return {React.ReactElement}
*/
-export default function Source(): React.FC {
+export default function Source(): React.ReactElement {
return (
@@ -39,7 +39,7 @@ export default function Source(): React.FC {
-
+
Zum Github Repository
-
+
diff --git a/src/pages/source/style/sourceStyle.js b/src/pages/source/style/sourceStyle.js
deleted file mode 100644
index da8809d..0000000
--- a/src/pages/source/style/sourceStyle.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- width: 100%;
-`;
-
-export const Description = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: flex-start;
- gap: 1rem;
- font-size: 1.1rem;
- font-weight: 300;
- line-height: 1.5;
- margin: 0;
- padding: 0;
- text-align: left;
-`;
-
-export const SourceItem = styled.div`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- justify-content: flex-start;
- flex-grow: 1;
- flex-wrap: wrap;
- gap: 0.5rem;
- &:hover {
- cursor: pointer;
- }
-`;
-
-export const SourceImage = styled.img`
- width: 5rem;
- height: 5rem;
-`;
-
-export const SourceImageContainer = styled.div`
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- height: 6rem;
- width: 6rem;
- background-color: #fafafa;
- border-radius: 12px;
- padding: 5px;
-`;
diff --git a/src/pages/welcome/index.js b/src/pages/welcome.tsx
similarity index 78%
rename from src/pages/welcome/index.js
rename to src/pages/welcome.tsx
index df227b2..178448b 100644
--- a/src/pages/welcome/index.js
+++ b/src/pages/welcome.tsx
@@ -1,17 +1,17 @@
import React from 'react';
-import { ColoredText, ProfilePicture, ProfilePictureContainer, Description } from './style/welcomeStyle.js';
+import { ColoredText, ProfilePicture, ProfilePictureContainer, ProfileDescription } from '../assets/styles/globalStyle';
import { Grid, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
-import Profile from '../../images/profile.png';
+import Profile from '../assets/images/profile.png';
/**
* Welcome Component
*
- * @return {React.FC}
+ * @return {React.ReactElement}
*/
-export default function Welcome(): React.FC {
+export default function Welcome(): React.ReactElement {
const theme = useTheme();
return (
@@ -37,9 +37,9 @@ export default function Welcome(): React.FC {
-
+
Full-Stack Developer,
UI/UX Designer und Web-Entwickler
-
+