Create home page intro slide

package.json

@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.8.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  /* text-align: center; */
 }
 
 .App-logo {

src/App.js

@@ -1,24 +1,10 @@
 import logo from './logo.svg';
 import './App.css';
+import HomePage from './pages/homepage'
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <HomePage/>
   );
 }
 

src/pages/Slides/introslide.js

@@ -0,0 +1,37 @@
+import react, { useState } from "react";
+import Typewriter from "typewriter-effect";
+import { Link } from "react-scroll";
+import "../styles.css";
+
+export default function IntroSlide() {
+  return (
+    <div id="home" style={{ backgroundColor: "#eaf2fa" }}>
+      <div style={{ marginTop: "2.5%", marginLeft: "5%" }}>
+        <Typewriter
+          options={{
+            wrapperClassName: "typewriter_title",
+          }}
+          onInit={(typewriter) => {
+            typewriter
+              .typeString(
+                'intro(name={"<span id="name_tag">Vaaranan</span>"});'
+              )
+              .start();
+          }}
+          style={{ fontFamily: "Courier" }}
+        />
+      </div>
+      <div
+        style={{
+          width: "45%",
+          fontFamily: "Avenir",
+          fontWeight: "100",
+          marginLeft: "5%",
+        }}
+      >
+        Hi! My name is Vaaranan, I am in 3A at the Univeristy of Waterloo,
+        pursuing a specialziation in Digital Hardware
+      </div>
+    </div>
+  );
+}

src/pages/homepage.js

@@ -0,0 +1,51 @@
+import react, { useState } from "react";
+import Typewriter from "typewriter-effect";
+import { Link } from "react-scroll";
+import IntroSlide from "./Slides/introslide";
+import "./styles.css";
+
+export default function HomePage() {
+  return (
+    <div className="App">
+      <header className="nav">
+        <nav className="nav__container__actions">
+          <ul>
+            <li>
+              <Link activeClass="active" smooth spy to="about">
+                ABOUT
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="projects">
+                PROJECTS
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="blog">
+                BLOG
+              </Link>
+            </li>
+            <li>
+              <Link activeClass="active" smooth spy to="contact">
+                CONTACT ME!
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </header>
+      <IntroSlide />
+      <section id="about">
+        <div>ABOUT</div>
+      </section>
+      <section id="projects">
+        <div>PROJECTS</div>
+      </section>
+      <section id="blog">
+        <div>BLOG</div>
+      </section>
+      <section id="contact">
+        <div>CONTACT ME</div>
+      </section>
+    </div>
+  );
+}

src/pages/styles.css

@@ -0,0 +1,95 @@
+.App {
+    font-family: sans-serif;
+    /* text-align: center; */
+  }
+
+  section {
+    display: grid;
+    height: 100vh;
+    font-size: 32px;
+    font-weight: bold;
+  }
+
+  #projects,
+  #contact {
+    color: #3b3b3c;
+    background: #eaf2fa;
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    position: -webkit-sticky;
+    position: sticky;
+    top: -5px;
+    z-index: 2;
+    height: 70px;
+    min-height: 70px;
+    width: calc(100% - 1.5rem);
+    background-color: #fff;
+    padding: 0 1rem;
+    box-shadow: 0 0.125rem 0.25rem 0 rgb(0 0 0 / 11%);
+  }
+
+  .nav__container {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .nav__container__actions {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    padding-left: 50px;
+    flex: 1;
+  }
+
+  .active {
+    font-weight: bold;
+  }
+
+  ul {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.9rem;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    cursor: pointer;
+  }
+
+  li:hover {
+    text-decoration: underline;
+  }
+
+  #home {
+    display: grid;
+    font-size: 32px;
+    font-weight: bold;
+    padding-bottom: 5%;
+  }
+
+  .typewriter_title{
+    font-family: 'Avenir';
+    font-weight: "600";
+    font-size: 75px;
+    justify-content: left;
+    align-items: flex-start;
+    margin-bottom: 15%;
+  }
+
+  .Typewriter__cursor{
+    font-size: 75px;
+  }
+
+  #name_tag{
+    background-color: #000;
+    color: #fff;
+  }