first commit

src/App.css

@@ -15,13 +15,12 @@
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  /* font-size: calc(10px + 2vmin); */
+  /* color: white; */
 }
 
 .App-link {

src/App.js

@@ -1,23 +1,28 @@
-import logo from './logo.svg';
+
 import './App.css';
+import NavBar from './Components/NavBarComponent/NavBar';
+import Typing from './Components/Section1/Typing';
 
 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>
+        <NavBar/>
+
       </header>
+      <section class="content">
+      <Typing
+        text={[
+          "Software Developer.",
+          "Coding ideas into reality.",
+        ]}
+        typingSpeed={100}
+        deleteSpeed={50}
+        duration={1000}
+      />
+
+      </section>
+
     </div>
   );
 }

src/Components/NavBarComponent/NavBar.css

@@ -0,0 +1,48 @@
+
+.navbar ul{
+  list-style: none;
+  display: flex;
+}
+.navbar {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end; 
+  padding: 10px 20px;
+  position: fixed; /* Fix the navbar to the top of the viewport */
+  top: 0; /* Ensure the navbar sticks to the top */
+  z-index: 2;
+  background-color: #26282B; /* Add background color to the navbar */
+  padding-right: 100px;
+}
+.logo-name {
+  color: #9290C3;
+  position: fixed;
+  top: 0;
+  left: 1rem;
+  margin: 20px; /* Adjust the margin as needed for spacing */
+}
+
+.nav-item{
+  margin: 0 15px;
+}
+.nav-item a{
+  color: white;
+  text-decoration: none;
+}
+.fa-icon{
+  padding-right:5px;
+}
+.nav-item a::after{
+  content: "";
+  display: block;
+  height: 2px;
+  width: 0%;
+  background: white;
+  transition:width 0.3s ease;
+}
+.nav-item a:hover::after{
+  width: 100%;
+} 
+
+
+

src/Components/NavBarComponent/NavBar.js

@@ -0,0 +1,21 @@
+import "./NavBar.css";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHouse, faUser, faGraduationCap, faTools, faProjectDiagram, faFile } from '@fortawesome/free-solid-svg-icons';
+
+function NavBar() {
+    return (
+            <nav class="navbar">
+                <h1 class="logo-name">SY</h1>
+                <ul>
+                    <li class="nav-item"><a  href="link"><FontAwesomeIcon icon={faHouse} className="fa-icon"/>Home</a></li>
+                    <li class="nav-item"><a  href="link"><FontAwesomeIcon icon={faUser} className="fa-icon" />About</a></li>
+                    <li class="nav-item"><a  href="link"><FontAwesomeIcon icon={faTools} className="fa-icon" />Education</a></li>
+                    <li class="nav-item"><a href="link"><FontAwesomeIcon icon={faTools} className="fa-icon" />Skills</a></li>
+                    <li class="nav-item"><a  href="link"><FontAwesomeIcon icon={faProjectDiagram} className="fa-icon" />Projects</a></li>
+                    <li class="nav-item"><a href="link"><FontAwesomeIcon icon={faFile} className="fa-icon" />Resume</a></li>
+                </ul>
+            </nav>
+
+    )
+}
+export default NavBar;

src/Components/Section1/Typing.css

@@ -0,0 +1,32 @@
+.content {
+    padding-top: 160px; 
+    background-color: #353941; 
+    color: aliceblue;
+    position:relative;
+
+  }
+ .typing-effect {
+
+    /* white-space: nowrap; */
+    /* overflow: hidden; */
+    display: block;
+    justify-content: center; 
+    min-height: 100vh; 
+    margin: 0;
+
+  }
+
+  .caret {
+    display: inline-block;
+    animation: blink 0.7s step-end infinite;
+  }
+
+  @keyframes blink {
+    from, to {
+      border-color: transparent;
+    }
+    50% {
+      border-color: black;
+    }
+  } 
+

src/Components/Section1/Typing.js

@@ -0,0 +1,45 @@
+import { useEffect, useState } from "react";
+import "./Typing.css";
+function Typing({ text,typingSpeed=100,deleteSpeed=50,duration=1000}) {
+
+  const [displayedText, setDisplayedText] = useState("");
+  const [isDeleting, setisdeleting] = useState(false);
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    const handleTyping = () => {
+        if (text && text.length > 0) { // Check if text is defined and has elements
+          if (!isDeleting) {
+            if (displayedText.length < text[index].length) {
+              setDisplayedText((prev) => prev + text[index].charAt(displayedText.length));
+            } else {
+              setTimeout(() => setisdeleting(true), duration)
+            } 
+          } else {
+            if (displayedText.length > 0) {
+               setDisplayedText((prev) => prev.slice(0,-1))
+            } else {
+              setisdeleting(false);
+              setIndex((prev) => (prev + 1) % text.length)
+             }
+          }
+        }
+      };
+
+
+    const timeout = setTimeout(
+      handleTyping,
+      isDeleting ? deleteSpeed : typingSpeed
+    );
+
+    return () => clearTimeout(timeout); 
+  },[displayedText, isDeleting, index, text, typingSpeed, deleteSpeed, duration] )
+  return (
+    <div className="typing-effect">
+        <h1>Hi There!</h1>
+        <h1>I'm <span class="name">Sanjana</span></h1>
+      {displayedText}
+      <span className="caret">|</span>
+    </div>
+  )
+}
+export default Typing;