Position fronpage items

components/Timeline.tsx

@@ -32,7 +32,7 @@ export function Timeline({
   lineWidth = 5,
   outerCircleWidth = 30,
   innerCircleWidth = 15,
-  timeWidth = 300,
+  timeWidth = 1000,
   textWidth = 500,
   gap = 50,
   className,

pages/frontpage.module.css

@@ -4,12 +4,47 @@
   align-items: center;
 }
 
+.title {
+  position: relative;
+  width: 1300px;
+  height: 900px;
+  border: 1px solid orange;
+}
+
+.titleImage {
+  position: absolute;
+  top: 20px;
+}
+
+.bubble {
+  position: absolute;
+  bottom: 10px;
+  left: 200px;
+  background-color: var(--pink);
+  opacity: 50%;
+  border-radius: 50px;
+}
+
+.decoratorSolid {
+  position: absolute;
+  top: 40px;
+  right: 40px;
+  background-color: var(--primary-accent-light);
+  width: 250px;
+  height: 180px;
+  opacity: 50%;
+  border-radius: 50px;
+}
+
+.decoratorDots {
+  position: absolute;
+  right: 10px;
+  background-color: var(--link);
+  width: 180px;
+  height: 280px;
+}
+
 .main > * {
   margin-top: 65px;
   margin-bottom: 65px;
 }
-
-.left {
-  align-self: flex-start;
-  margin-left: 100px;
-}

pages/index.tsx

@@ -20,6 +20,7 @@ export default function Home() {
           alt="A picture of the University of Waterloo campus"
           width={720}
           height={480}
+          className={styles.titleImage}
         />
         <div className={styles.bubble}>
           <h1>Computer Science 2022</h1>
@@ -58,8 +59,8 @@ export default function Home() {
           you see!
         </p>
       </CenterWrapper>
-      <Sections data={sectionsData} className={styles.left} />
-      <Timeline data={mockTimelineData} className={styles.left} />
+      <Sections data={sectionsData} />
+      <Timeline data={mockTimelineData} />
       <p>
         Click <Link href="/playground">here</Link> to visit the playground
         <br />