diff --git a/src/App.tsx b/src/App.tsx
index 5b9ad31..7486f27 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import SectionScroll from "@components/SectionScroll";
import Skills from "@components/Skills";
import Projects from "@components/Projects";
import SectionLine from "@components/SectionLine";
+import Footer from "@components/Footer";
export default function App() {
const aboutRef = useRef(null);
@@ -58,6 +59,7 @@ export default function App() {
+
);
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..df64888
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,61 @@
+import "@styles/Footer.scss";
+
+export default function Footer() {
+ return (
+
+
+
+
+
+
+
+
+
+
© 2024 Janis Meister. All rights reserved.
+
+
+ );
+}
diff --git a/src/styles/Footer.scss b/src/styles/Footer.scss
new file mode 100644
index 0000000..e31c59b
--- /dev/null
+++ b/src/styles/Footer.scss
@@ -0,0 +1,48 @@
+.footer {
+ border-top: 1px solid var(--color-border);
+ padding: 1rem 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ gap: 10px;
+
+ .contact {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ gap: 20px;
+
+ svg {
+ color: var(--color-font-muted);
+ transition: all 50ms ease-in-out;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--color-font);
+ }
+ }
+ }
+
+ .source {
+ color: var(--color-font-muted);
+ font-size: 0.8rem;
+ margin-top: 10px;
+ a {
+ color: var(--color-font-muted);
+ transition: all 50ms ease-in-out;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--color-font);
+ }
+ }
+ }
+
+ .copyright {
+ color: var(--color-font-muted);
+ font-size: 0.8rem;
+ margin-top: 10px;
+ }
+}