first commit

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "raleway-webfont": "^3.0.1",
     "react": "^16.9.0",
+    "react-bootstrap": "^1.0.0-beta.12",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.2"
   },

src/App.css

@@ -1,22 +1,36 @@
+* {
+  scroll-behavior: smooth;
+}
+
 .App {
   text-align: center;
+  font-family: 'Raleway', sans-serif
 }
 
 .App-logo {
   height: 40vmin;
 }
 
-.App-header {
-  background-color: #282c34;
+.App-heading {
+  background-color: #2c003e;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  font-size: 40px;
   color: white;
 }
 
-.App-link {
-  color: #09d3ac;
+p {
+  margin: 1px
+}
+
+
+.name {
+  color: #51dacf
 }
+
+
+
+

src/App.js

@@ -1,25 +1,44 @@
-import React from 'react';
+import React, { Component } from 'react'; 
 import logo from './logo.svg';
 import './App.css';
+import NavBar from './Components/NavBar.js'
+import HoverButton from './Components/HoverButton.js'
+import About from './Components/About.js'
+import Projects from './Components/Projects.js'
+import Contact from './Components/Contact.js'
+import AOS from 'aos'
+import 'aos/dist/aos.css';
+
+AOS.init()
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+      <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700&display=swap" rel="stylesheet"></link>
+      <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+      <header className="App-heading" id="home" data-aos="fade-up" data-aos-duration="1000">
+
+        <p className="greeting">
+          Hello, my name is <a className="name" >Raman Gupta</a>
+        </p>
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          I am a Creator.
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        <br/>
+        <HoverButton page="#about" text="See my work"></HoverButton>
+
       </header>
+      <NavBar>        
+      </NavBar>
+      <About></About>
+
+      <Projects></Projects>
+
+      <Contact></Contact>
+
     </div>
+
+
   );
 }
 

src/Components/About.css

@@ -0,0 +1,99 @@
+.about {
+    margin-top: 0px;
+    padding: 60px;
+}
+
+hr {
+    width: 60px;
+    border: 2px solid black;
+
+  }
+
+h1 {
+    font-size: 36px;
+    margin: 0px;
+    padding-bottom: 0px;
+}
+
+.content {
+    display: flex;
+    margin: 50px   50px;
+}
+
+.text-section {
+    flex: 50%;
+    text-align: left;
+    line-height: 1.5;
+}
+
+img {
+
+    width: 350px;
+    height: 350px;
+    border-radius: 50%;
+}
+
+.image {
+    flex: 50%;
+    padding: 30px;
+    padding-top: 0px;
+}
+
+
+.highlight {
+    color: #51dacf;
+    text-decoration: None;
+}
+
+.highlight:hover {
+    color: #41aaa8;
+    transition: color 1s ease-in-out;
+}
+
+.skills {
+    display: flex;
+    margin-left: 0px;
+    padding-left:0px;
+    justify-content: space-around;
+
+}
+
+.skillCategory {
+    background: white;
+    flex: 50%;
+    list-style-type: disc;
+    display: grid;
+    overflow: visible;
+
+}
+
+li {
+    margin-left: 20px;
+
+}
+
+.resume {
+    margin: 10px;
+    width: 150px;
+    font-size: 10px;
+}
+
+.button {
+    color: #51dacf;
+    border: 2px solid #51dacf;
+    display: inline-block;
+    margin: 10px;
+    width: 150px;
+    font-size: 18px;
+}
+
+.button:hover {
+    color: white;
+}   
+
+.button span:after {
+    content: '\21d3';
+    color: white;
+
+}
+

src/Components/About.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import './About.css'
+import profPic from "../images/profpic.jpg"
+import resume from "../files/Resume.docx"
+import HoverButton from "./HoverButton.js"
+import AOS from 'aos'
+import 'aos/dist/aos.css';
+
+class About extends React.Component {
+
+    render() {
+        return <div id='about' className="about" >
+            <div >
+                <h1 data-aos="slide-right" data-aos-duration="1250">ABOUT</h1>
+                <hr data-aos="slide-right" data-aos-duration="900" />
+            </div>
+
+
+
+            <div className="content">
+                <div className="text-section" data-aos ="flip-down" data-aos-duration="750">
+                    <p className="text"> Hi, I'm Raman, a second-year student studying Computer Science at 
+                    <a className = "highlight" target = "_blank" href="https://www.ics.uci.edu/"> UC Irvine</a>. 
+                    I enjoy exploring new concepts of Computer Science. From Web Development to Machine
+                    Learning, I am always interested in creating new innovative products. I always try
+                    to create change in the world through my work, one step at a time. </p>
+                    <br/>
+                    <p className = "text">Below are some of the projects I have done throughout my endeavors. Together, let's create something new. </p>
+                    <br/>
+                    <p>Here are some of the tools I have utilized in my work.</p>
+                    <br/>
+                    <div className="skills">
+                        <div>
+                            <h3>Languages</h3>
+                            <ul className="skillCategory">
+                                <li>Python</li>
+                                <li>C++</li>
+                                <li>Java</li>
+                                <li>JavaScript</li>
+                                <li>HTML</li>
+                                <li>CSS</li>
+                                <li>C#</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3>Technologies</h3>
+                            <ul className="skillCategory">
+                                <li>Tensorflow</li>
+                                <li>Keras</li>
+                                <li>ReactJS</li>
+                                <li>React Native</li>
+                                <li>Flask</li>
+                                <li>Unity</li>
+
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <div  className="image">
+                    <img data-aos = "fade-down" data-aos-duration="750" src={profPic} alt=""></img>
+                    <div data-aos = "fade-up" data-aos-duration="750" data-aos-anchor=".image">
+                        <HoverButton page={resume} text = "Resume" download="Resume.docx"></HoverButton>
+                    </div>
+                 </div>
+
+
+
+
+            </div>
+
+        </div>
+    }
+}
+
+export default About;

src/Components/Contact.css

@@ -0,0 +1,16 @@
+#contact {
+    overflow: hidden;
+    padding: 60px;
+    padding-bottom: 600px;
+}
+
+.information {
+    margin: auto;
+    width: 40%;
+    min-width: 600px;
+    justify-content: space-evenly;
+}
+
+.information p{
+    margin: 40px;
+}

src/Components/Contact.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import './Contact.css'
+import HoverButton from "./HoverButton.js"
+import 'aos/dist/aos.css';
+
+class About extends React.Component {
+
+    render() {
+        return <div id='contact' >
+            <div >
+                <h1 data-aos="slide-left" data-aos-duration="1250">Contact</h1>
+                <hr data-aos="slide-left" data-aos-duration="900" />
+            </div>
+
+            <div className="information">
+                <p>I am currently looking for a Software Engineering Internship, but
+                feel free to contact me for anything. If you have any questions about my projects, or are
+                looking for a new team member, please do let me know! My e-mail is [email protected],
+                or you can click below.</p>
+
+                <HoverButton target="_blank" page="mailto:[email protected]" text="Email Me!"></HoverButton>
+
+            </div>
+
+            <div className="icons">
+
+            </div>
+
+        </div>
+    }
+}
+
+export default About;

src/Components/HoverButton.css

@@ -0,0 +1,47 @@
+.button {
+    font-family: 'Railway', sans-serif;
+    background-color: transparent; 
+    color: white;
+    cursor: pointer;
+    font-size: 20px;
+    padding: 20px;
+    box-shadow: none;
+    transition: background 0.3s ease-in-out;
+    outline: none;
+    text-align: center;
+    width: 180px;
+    border: 2px solid white;
+    border-radius: 2px;
+}
+
+.button:hover {
+    background-color: #51dacf;
+    cursor: pointer;
+    border-color: #51dacf;
+    box-shadow: none;
+}
+
+.button span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+.button span:after {
+    content: '\21d2';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+.button:hover span {
+    padding-right: 25px;
+}
+
+.button:hover span:after {
+    opacity: 1;
+    right: 0;
+}