Initial Commit

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;
+}