diff --git a/src/assets/about/about-air-balloon.svg b/src/assets/about/about-air-balloon.svg
new file mode 100644
index 00000000..21717167
--- /dev/null
+++ b/src/assets/about/about-air-balloon.svg
@@ -0,0 +1,67 @@
+
diff --git a/src/assets/about/about-section-desktop.svg b/src/assets/about/about-section-desktop.svg
new file mode 100644
index 00000000..7a23e372
--- /dev/null
+++ b/src/assets/about/about-section-desktop.svg
@@ -0,0 +1,1498 @@
+
diff --git a/src/assets/about/about-section-mobile.svg b/src/assets/about/about-section-mobile.svg
new file mode 100644
index 00000000..65148fd3
--- /dev/null
+++ b/src/assets/about/about-section-mobile.svg
@@ -0,0 +1,1359 @@
+
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 5a6aba8e..34d44f30 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -7,12 +7,12 @@ export { Button } from './Button/Button';
export { NavItems } from './Navbar/NavItems';
export { Navbar } from './Navbar/Navbar';
export { Menu } from './Navbar/Menu';
-
/*
*
* @section
*
*/
-export { TeamSection } from './sections/Team.section';
export { HeroSection } from "./sections/Hero.section"
-export { FooterSection } from './sections/Footer.section';
+export { AboutSection } from './sections/About.section';
+export { TeamSection } from './sections/Team.section';
+export { FooterSection } from './sections/Footer.section';
\ No newline at end of file
diff --git a/src/components/sections/About.section.tsx b/src/components/sections/About.section.tsx
new file mode 100644
index 00000000..40fd09ed
--- /dev/null
+++ b/src/components/sections/About.section.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from 'react';
+import AboutAirBalloon from '../../assets/about/about-air-balloon.svg';
+import AboutSectionDesktop from '../../assets/about/about-section-desktop.svg';
+import AboutSectionMobile from '../../assets/about/about-section-mobile.svg';
+
+const AboutSection: React.FC = () => {
+ const [translateY, setTranslateY] = useState(0);
+
+ const handleScroll = () => {
+ // Control the speed at which the Balloon travels
+ const newTranslateY = window.scrollY * 0.45;
+ setTranslateY(newTranslateY);
+ };
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll);
+
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+ return (
+
+ {/* MAIN SVG (Background) */}
+
+
+
+
+ {/* About HawkHacks Content */}
+
+
+ About Hawkhacks
+
+
+
+ HawkHacks came out of a desire to give everyone an equal
+ opportunity to get into tech, whether that be
+ programming, networking, researching, learning, or
+ teaching.
+
+
+ Join hundreds of students across Canada (and across the
+ world) in a 36 hour period of exploration, creativity,
+ and learning!
+
+
+ Remember, you don’t have to be a pro to participate -
+ show up with ten years or ten minutes of experience (oh
+ yeah, and a great attitute too!)
+