Initial Commit

src/App.css

@@ -1,38 +1,60 @@
 .App {
-  text-align: center;
+    text-align: center;
+    background-color: #282c34;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: -100px;
+    left: 0px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    color: azure;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+    height: 40vmin;
+    pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
 }
 
 .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;
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
 }
 
 .App-link {
-  color: #61dafb;
+    color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
+
+.About {
+    width: 100%;
+    position: absolute;
+    top: 100px;
+    bottom: 0px;
+}
+
+hr {
+    width: 70%;
+    margin-left: 15% !important;
+    margin-right: 15% !important;
+    border: 10px solid aquamarine;
+}

src/App.js

@@ -1,23 +1,15 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import Header from "./components/Header";
+import About from "./components/About";
 
 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>
+      <Header />
+      <hr></hr>
+      <About className ="About" />
+      <div></div>
     </div>
   );
 }

src/components/About.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import "bootstrap/dist/css/bootstrap.css";
+import { Grid, Row, Col } from "react-bootstrap";
+import "./about.css";
+import AmanTahilianiPortfolio from '../media/AmanTahilianiPortfolio.png'
+
+// const img = '../media/AmanTahilianiPortfolio.png'
+
+class About extends Component {
+  render() {
+    return (
+    <div className="AboutComponent">
+        <Row>
+            <Col>
+                <img src={AmanTahilianiPortfolio} className="NameImage"/>
+            </Col>
+            <Col className="InfoColumn">
+                <Row>
+                    <h2>Hi There!</h2>
+                </Row>
+                <Row>
+                    <h3>Let me tell you a little about myself</h3>
+                </Row>
+                <Row className="Info">
+                    <ul>
+                        <li>I am a final Year BTech CSE student at Jaypee Institute of Information Technology in Noida, India.</li>
+                        <li>Currently working as an SDE Intern (Backend) at <a href="https://innovaccer.com/">Innovaccer</a> as part of the DAP (Data Activation Platform).</li>
+                        <li>I enjoy designing and creating the backend logic for projects and am also proficient in frontend development.</li>
+                    </ul>
+                </Row>
+            </Col>
+            
+        </Row>
+      </div>
+    );
+  }
+}
+
+export default About;

src/components/Header.js

@@ -0,0 +1,50 @@
+import React, { Component } from "react";
+import "bootstrap/dist/css/bootstrap.css";
+import { Row, Col } from "react-bootstrap";
+import "./header.css";
+
+class Header extends Component {
+  render() {
+    return (
+      <div>
+        <header className="header">
+          <div className="menu-header">
+            <Row style={{ height: "100%" }}>
+              <Col xs={12} md={5}>
+                <Row className="navRow nonNameCol">
+                  <Col>
+                    <a href="./">Home</a>
+                  </Col>
+                  <Col>
+                    <a>About</a>
+                  </Col>
+                  <Col>
+                    <a>Publications</a>
+                  </Col>
+                </Row>
+              </Col>
+              <Col xs={12} md={2} className="navRow NameCol">
+                Aman Tahiliani
+              </Col>
+              <Col xs={12} md={5}>
+                <Row className="navRow nonNameCol">
+                  <Col>
+                    <a>Experience</a>
+                  </Col>
+                  <Col>
+                    <a>Devtools</a>
+                  </Col>
+                  <Col>
+                    <a>Contact Me!</a>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
+          </div>
+        </header>
+      </div>
+    );
+  }
+}
+
+export default Header;

src/components/about.css

@@ -0,0 +1,58 @@
+.AboutComponent {
+    background: rgb(2, 182, 182);
+    opacity: 5;
+    width: 75%;
+    margin-top: 80px;
+    margin-left: 12.5%;
+    padding-top: 4%;
+    padding-bottom: 4%;
+    border-radius: 6em;
+    border: 2px solid rgba(255, 255, 255, 0.425);
+}
+
+h1 {
+    position: relative;
+}
+
+.NameImage {
+    height: 350px;
+    width: 350px;
+    border-radius: 5.7em;
+    border: 2px solid black;
+}
+
+.InfoColumn h2 {
+    color: rgb(5, 255, 180);
+    font-size: 40px;
+}
+
+.InfoColumn h3 {
+    margin-bottom: 30px;
+    color: rgb(226, 226, 45);
+}
+
+ul {
+    list-style-position: inside;
+}
+
+li {
+    text-align: justify;
+    padding-left: 5%;
+}
+
+.InfoColumn {
+    padding-right: 5%;
+}
+
+li>a {
+    color: hotpink;
+}
+
+.Info {
+    font-size: larger;
+}
+
+.Info li {
+    margin-top: 10px;
+    list-style-type: square;
+}

src/components/header.css

@@ -0,0 +1,45 @@
+.menu-header {
+    padding-left: 50px;
+    padding-right: 50px;
+    height: "50px";
+    margin-bottom: 40px;
+}
+
+.navRow {
+    height: 100%;
+    margin-top: 40px;
+    line-height: 100%;
+}
+
+.NameCol {
+    font-size: xx-large;
+    font-weight: bold;
+    color: salmon;
+    font-style: italic;
+}
+
+.nonNameCol {
+    font-size: larger;
+    padding-top: 1%;
+    color: aquamarine;
+}
+
+a:link {
+    text-decoration: none;
+    color: aquamarine;
+}
+
+a:visited {
+    text-decoration: none;
+    color: aquamarine;
+}
+
+a:hover {
+    text-decoration: none;
+    color: aquamarine;
+}
+
+a:active {
+    text-decoration: none;
+    color: aquamarine;
+}