ZainRk · rgoyal0001 · Jun 28, 2022 · Jun 28, 2022 · Jun 30, 2022 · Jun 30, 2022
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,11 @@
     "framer-motion": "^6.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-reveal": "^1.2.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-scroll": "^1.8.6",
+    "scss": "^0.2.4",
     "swiper": "^8.0.7",
     "web-vitals": "^2.1.0"
   },
@@ -39,5 +42,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "homepage": "."
 }
diff --git a/public/index.html b/public/index.html
@@ -35,7 +35,10 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Raman Goyal</title>
+    <link rel = "icon" href = 
+"https://images.assetsdelivery.com/compings_v2/dchancreative/dchancreative2110/dchancreative211013135.jpg" 
+        type = "image/x-icon">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,6 @@
 :root
 {
-  --yellow: #F5C32C;
+    --yellow: #F5C32C;
     --orange : #FCA61F;
     --black : #242D49;
     --gray : #788097;
@@ -16,6 +16,12 @@
     overflow: hidden;
     color: var(--black);    
 }
+.nav{
+  overflow: hidden;
+  position: fixed;
+  z-index: 5;
+  background-color: red;
+}
 
 .button {
     background: linear-gradient(180deg, #fdc50f 26.71%, #fb982f 99.36%);

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,15 @@
 import Navbar from "./components/Navbar/Navbar";
 import Intro from "./components/Intro/Intro";
-import Services from "./components/Services/Services";
+import About from "./components/About/About";
+import Education from "./components/Education/Education";
+import Skills from "./components/Skills/Skills";
+// import { ThemeProvider } from './Context';
+
 import "./App.css";
-import Experience from "./components/Experience/Experience";
-import Works from "./components/Works/Works";
-import Portfolio from "./components/Portfolio/Portfolio";
-import Testimonial from "./components/Testimonials/Testimonial";
+
+import Projects from "./components/Projects/Projects";
 import Contact from "./components/Contact/Contact";
-import Footer from "./components/Footer/Footer";
+// import Footer from "./components/Footer/Footer";
 import { useContext } from "react";
 import { themeContext } from "./Context";
 function App() {
@@ -23,13 +25,12 @@ function App() {
     >
       <Navbar />
       <Intro />
-      <Services />
-      <Experience />
-      <Works />
-      <Portfolio />
-      <Testimonial />
+      <About />
+      <Education />
+      <Skills />
+      <Projects />
       <Contact />
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }

diff --git a/src/Context.js b/src/Context.js
@@ -2,7 +2,7 @@ import { createContext, useReducer } from "react";
 
 export const themeContext = createContext();
 
-const initialState = { darkMode: false };
+const initialState = { darkMode: true };
 
 const themeReducer = (state, action) => {
   switch (action.type) {

diff --git a/src/components/About/About.css b/src/components/About/About.css
@@ -0,0 +1,104 @@
+.about {
+  padding: 0 3rem 0 3rem;
+  display: flex;
+  height: 30rem;
+  margin-bottom: 8rem;
+  margin-top: 9rem;
+  margin-bottom: 13rem;
+  /* scroll view */
+  padding-top: 3rem;
+  /* border: 1px solid red; */
+}
+/* left side */
+.wesome {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 42%;
+  /* border: 1px solid red; */
+  margin-top: 3rem;
+  /* gap: 20px; */
+}
+
+.wesome > :nth-child(1) {
+  color: var(--black);
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+.wesome > :nth-child(2) {
+  color: var(--black);
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+.wesome > :nth-child(3) {
+  color: var(--gray);
+  /* border: 1px solid red; */
+  font-size: .8rem;
+  margin-top: 1rem;
+}
+.wesome > :nth-child(5) {
+  color: var(--orange);
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+.wesome > :nth-child(6),:nth-child(7) {
+  color: var(--gray);
+  /* border: 1px solid red; */
+  font-size: .8rem;
+  margin-top: 1rem;
+}
+.s-button {
+  width: 8rem;
+  height: 2rem;
+  margin-top: 1rem;
+}
+/* right sided */
+.cards {
+  position: relative;
+}
+.cards > * {
+  position: absolute;
+}
+
+/* blur */
+.s-blur2 {
+  left: 14rem;
+  top: 8rem;
+}
+
+.s-blur1 {
+  top: 13rem;
+  left: -18rem;
+}
+.photo{
+  width: 20rem;
+  border-radius: 50%;
+  top: 20px;
+}
+
+@media screen and (max-width: 560px) {
+  .about {
+    margin-top: 0;
+    flex-direction: column;
+    gap: 5rem;
+    height: 60rem;
+    padding: 0;
+    /* border: 1px solid red; */
+  }
+
+  .cards {
+    display: flex;
+    flex-direction: column;
+    gap: 17rem;
+    /* border: 1px solid red; */
+  }
+  .wesome{
+    width: 90%;
+  }
+
+  .cards > * {
+    position: static;
+  }
+}
+
+
diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx
@@ -0,0 +1,66 @@
+import React, { useContext } from "react";
+import "./About.css";
+// import Card from "../Card/Card";
+import Raman from '../../img/raman.jpeg'
+import { themeContext } from "../../Context";
+import { motion } from "framer-motion";
+// import Resume from './resume.pdf';
+
+const About = () => {
+  // context
+  const theme = useContext(themeContext);
+  const darkMode = theme.state.darkMode;
+
+  // transition
+  const transition = {
+    duration: 1,
+    type: "spring",
+  };
+
+  return (
+    <div className="about" id="about">
+      {/* left side */}
+      <div className="wesome">
+        {/* dark mode */}
+        <span style={{ color: darkMode ? "white" : "" }}>About</span>
+        <span></span>
+        <span>A passionate Full Stack Software Developer 🚀 having an knowledge of building Web and Mobile applications
+             with JavaScript / Reactjs / Nodejs / React Native and some other cool libraries and frameworks. 
+             Observant and detail-oriented aspiring full-stack developer with a specialization in MERN stack. 
+             Self-motivated and curious, with a keen interest in building usercentric products.</span>
+        <br />
+        <span>What I Do</span>
+        <span>CRAZY FULL STACK DEVELOPER WHO WANTS TO EXPLORE EVERY TECH STACK</span>
+        <span>
+            ⚡ Develop highly interactive Front end / User Interfaces for your web and mobile applications
+            <br />
+            ⚡ Progressive Web Applications ( PWA ) in normal and SPA Stacks
+            <br />
+            ⚡ Integration of third party services such as Firebase/ AWS / Digital Ocean
+        </span>
+
+
+        <div className="blur s-blur1" style={{ background: "#ABF1FF94" }}></div>
+      </div>
+      {/* right */}
+      <div className="cards">
+        {/* photo */}
+        <motion.div
+          initial={{ left: "4rem" }}
+          whileInView={{ left: "14rem" }}
+          transition={transition}
+        >
+          <img src={Raman} alt="" className="photo"
+          style={{width:"20rem",borderRadius:"50%", top:"20px"}}/>
+        </motion.div>
+
+        <div
+          className="blur s-blur2"
+          style={{ background: "var(--purple)" }}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
@@ -14,12 +14,13 @@
   border-radius: 20px;
   padding: 0px 26px 2rem 26px;
 }
-.card span:nth-of-type(2) {
+.card a span {
+  margin-top: 1rem;
   color: var(--gray);
   font-size: 16px;
 }
 .card > img {
-  transform: scale(0.6);
+  transform: scale(1);
   margin-bottom: -2rem;
 }
 .c-button {
@@ -31,6 +32,9 @@
     font-size: 16px;
     color: #5290FD;
 }
+a{
+  text-decoration: none;
+}
 
 .c-button:hover{
     transform: scale(1.1);

diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -1,13 +1,14 @@
 import React from "react";
 import "./Card.css";
+// import { Link } from 'react-scroll'
 
-const Card = ({emoji, heading, detail, color}) => {
+const Card = ({emoji, course, college, url, duration, color}) => {
   return (
     <div className="card" style={{borderColor: {color}}}> 
-      <img src={emoji} alt="" />
-      <span>{heading}</span>
-      <span>{detail}</span>
-      <button className="c-button">LEARN MORE</button>
+      <img src={emoji} alt="" style={{width:"55px", height:"20%", margin:"20px", borderRadius:"50%"}}/>
+      <span>{course}</span>
+      <a href={url} target="blank" ><span><i>{college}</i></span></a>
+      <span>{duration}</span>
     </div>
   );
 };

diff --git a/src/components/Contact/Contact.css b/src/components/Contact/Contact.css
@@ -6,7 +6,9 @@
       /* scroll */
   padding-top: 3rem;
 }
-
+.awesome{
+    border: 1ps solid red;
+}
 .c-right{
     display: flex;
     justify-content: center;
@@ -42,7 +44,7 @@ textarea{
     left: 8rem;
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (max-width: 560px) {
     .contact-form{
         padding: 0;
         flex-direction: column;
@@ -53,4 +55,17 @@ textarea{
         width: 16rem;
     }
 
-}   
+}   
+
+.icons {
+    display: flex;
+    gap: 0rem;
+    /* left:0; */
+    /* border:1px solid red; */
+  }
+  .icons > * {
+    transform: scale(0.5);
+  }
+  .icons > *:hover {
+    cursor: pointer;
+  }