feat: implement typed.js effect for About and Contact pages, add styles for paragraphs

src/pages/about/index.tsx

@@ -1,3 +1,29 @@
+import { useEffect, useRef } from 'react';
+import Typed from 'typed.js';
+import { Paragraph } from './styles';
+
 export default function About() {
-  return <h1>About Me</h1>
+  const typedElement = useRef(null);
+
+  useEffect(() => {
+    const typed = new Typed(typedElement.current, {
+      strings: ["This page is coming soon. Thanks for your patience :)"],
+      typeSpeed: 50,
+      backSpeed: 25,
+      loop: false,
+    });
+
+    return () => {
+      typed.destroy();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h1>About Me</h1>
+      <Paragraph>
+        <span ref={typedElement} />
+      </Paragraph>
+    </div>
+  );
 }

src/pages/about/styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Paragraph = styled.p`
+  padding-top: 1rem;
+  font-size: 1.25rem;
+`;

src/pages/contact/index.tsx

@@ -1,3 +1,29 @@
+import { useEffect, useRef } from 'react';
+import Typed from 'typed.js';
+import { Paragraph } from './styles';
+
 export default function Contact() {
-  return <h1>Contact Me</h1>
+  const typedElement = useRef(null);
+
+  useEffect(() => {
+    const typed = new Typed(typedElement.current, {
+      strings: ["This page is coming soon. Thanks for your patience :)"],
+      typeSpeed: 50,
+      backSpeed: 25,
+      loop: false,
+    });
+
+    return () => {
+      typed.destroy();
+    };
+  }, []);
+
+  return (
+    <div>
+      <h1>Contact</h1>
+      <Paragraph>
+        <span ref={typedElement} />
+      </Paragraph>
+    </div>
+  );
 }

src/pages/contact/styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Paragraph = styled.p`
+  padding-top: 1rem;
+  font-size: 1.25rem;
+`;

src/pages/home/styles.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 export const IconContainer = styled.div`
   display: flex;
   gap: 1rem;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 `;
 
 export const IconLink = styled.a`