made changes in css

xerpa43 · Mar 15, 2023 · b673c5c · b673c5c
1 parent 49e5c57
commit b673c5c
Show file tree

Hide file tree

Showing 50 changed files with 1,688 additions and 1,514 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ang Ngima Lama Sherpa</title>
-</head>
-<body>
-    <div id="root">
-
-    </div>
-
-
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ang Ngima Lama Sherpa</title>
+</head>
+<body>
+    <div id="root">
+
+    </div>
+
+
+</body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,24 @@
-import React from "react";
-import Header from "./components/header/header";
-import Footer from "./components/footer/footer";
-import Project from "./components/projects/project";
-import Nav from "./components/nav/nav";
-import Experience from "./components/experience/experience";
-import About from "./components/about/about";
-import Contact from "./components/contact/contact";
-
-const App = () => {
-  return (
-    <>
-      <Header />
-      <About />
-      <Nav />
-      <Project />
-      <Experience />
-      <Contact />
-      <Footer />
-    </>
-  );
-};
-
-export default App;
+import React from "react";
+import Header from "./components/header/header";
+import Footer from "./components/footer/footer";
+import Project from "./components/projects/project";
+import Nav from "./components/nav/nav";
+import Experience from "./components/experience/experience";
+import About from "./components/about/about";
+import Contact from "./components/contact/contact";
+
+const App = () => {
+  return (
+    <>
+      <Header />
+      <About />
+      <Nav />
+      <Project />
+      <Experience />
+      <Contact />
+      <Footer />
+    </>
+  );
+};
+
+export default App;
diff --git a/src/assets/CV.pdf b/src/assets/CV.pdf
diff --git a/src/assets/ICON.png b/src/assets/ICON.png
diff --git a/src/assets/VKTabletDriver_Win1.0.1.8.exe b/src/assets/VKTabletDriver_Win1.0.1.8.exe
diff --git a/src/assets/backend.png b/src/assets/backend.png
diff --git a/src/assets/design.png b/src/assets/design.png
diff --git a/src/assets/edit.jpg b/src/assets/edit.jpg
diff --git a/src/assets/final-removebg-preview.png b/src/assets/final-removebg-preview.png
diff --git a/src/assets/final.png b/src/assets/final.png
diff --git a/src/assets/final1.png b/src/assets/final1.png
diff --git a/src/assets/frontend.png b/src/assets/frontend.png
diff --git a/src/assets/logl3.png b/src/assets/logl3.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/logo2.png b/src/assets/logo2.png
diff --git a/src/assets/logo4.png b/src/assets/logo4.png
diff --git a/src/assets/oo.png b/src/assets/oo.png
diff --git a/src/assets/portfolio photo.png b/src/assets/portfolio photo.png
diff --git a/src/assets/portfolio photo2.png b/src/assets/portfolio photo2.png
diff --git a/src/assets/porto.jfif b/src/assets/porto.jfif
diff --git a/src/assets/project3.png b/src/assets/project3.png
diff --git a/src/assets/project4.png b/src/assets/project4.png
diff --git a/src/assets/project5.png b/src/assets/project5.png
diff --git a/src/assets/resume.pdf b/src/assets/resume.pdf
diff --git a/src/assets/tools.png b/src/assets/tools.png
diff --git a/src/components/about/about.css b/src/components/about/about.css
@@ -1,94 +1,102 @@
-.about-container {
-  height: 50vh;
-
-  display: grid;
-  gap: 15%;
-  grid-template-columns: 20% 60%;
-}
-
-#about h2 {
-  padding: 0;
-}
-
-.aboutimage {
-  height: 350px;
-  width: 300px;
-  border: 10px solid rgba(255, 255, 255, 0.363);
-  border-radius: 30%;
-  overflow: hidden;
-  align-items: center;
-}
-
-.about-me {
-  border-radius: 0;
-  display: grid;
-  place-items: center;
-}
-
-.about-me.info {
-  font-size: 1.3rem;
-  width: auto;
-  border-radius: 0;
-  font-weight: 100;
-  color: rgb(240, 248, 255);
-}
-
-.about-cards {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-.about-card:hover {
-  background: transparent;
-  background: var(--color-primary-varient);
-  cursor: default;
-}
-
-.Red {
-  color: rgb(0, 255, 213);
-}
-
-.about-icon {
-  font-size: 1.6rem;
-  margin-bottom: 1rem;
-  color: var(--color-primary);
-}
-
-.about-card h2 {
-  color: var(--color-bg);
-}
-
-.about-content p {
-  margin: 2rem 0;
-  border: 3px solid rebeccapurple;
-}
-
-@media screen and (max-width: 1024px) {
-  .about-container {
-    grid-template-columns: 1fr;
-    height: auto;
-    gap: 0;
-  }
-
-  .aboutimage {
-    margin: 34px auto;
-  }
-}
-
-@media screen and (max-width: 600px) {
-  .about-me {
-    width: 80%;
-    margin: 0 auto 3rem;
-    text-align: left;
-    font: 500;
-  }
-
-  .aboutimage {
-    border-radius: 50%;
-  }
-
-  .about-me.info p {
-    font-size: 1rem;
-  }
-}
+#about{
+  background-image:radial-gradient(circle at 0% 50%,rgba(255, 0, 230, 0.684) 0%,rgba(255, 0, 238, 0.355) 5%, rgba(0, 0, 0, 0) 16%);
+
+}
+.about-container {
+  height: 50vh;
+  background:transparent;
+
+  display: grid;
+
+  gap: 15%;
+  grid-template-columns: 20% 60%;
+  border-right: 4px solid rgb(0, 148, 128);
+
+}
+
+#about h2 {
+  padding: 0;
+}
+
+.aboutimage {
+  height: 350px;
+  width: 300px;
+  border: 10px solid rgba(255, 255, 255, 0.363);
+  border-radius: 30%;
+  overflow: hidden;
+  align-items: center;
+}
+
+.about-me {
+  border-radius: 0;
+  display: grid;
+  place-items: center;
+}
+
+.about-me.info {
+  font-size: 1.3rem;
+  width: auto;
+  border-radius: 0;
+  font-weight: 250;
+  color: rgb(255, 255, 255);
+}
+
+.about-cards {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.about-card:hover {
+  background: transparent;
+  background: var(--color-primary-varient);
+  cursor: default;
+}
+
+.Red {
+  color: rgb(0, 255, 213);
+}
+
+.about-icon {
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+  color: var(--color-primary);
+}
+
+.about-card h2 {
+  color: var(--color-bg);
+}
+
+.about-content p {
+  margin: 2rem 0;
+  border: 3px solid rebeccapurple;
+}
+
+@media screen and (max-width: 1024px) {
+  .about-container {
+    grid-template-columns: 1fr;
+    height: auto;
+    gap: 0;
+  }
+
+  .aboutimage {
+    margin: 34px auto;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .about-me {
+    width: 80%;
+    margin: 0 auto 3rem;
+    text-align: left;
+    font: 500;
+  }
+
+  .aboutimage {
+    border-radius: 50%;
+  }
+
+  .about-me.info p {
+    font-size: 1rem;
+  }
+}
diff --git a/src/components/about/about.jsx b/src/components/about/about.jsx
@@ -1,30 +1,30 @@
-import React from "react";
-import "./about.css";
-import port from "../../assets/porto.jfif";
-const about = () => {
-  return (
-    <section id="about">
-      <h2>About Me</h2>
-      <div className="container about-container">
-        <div className="aboutimage">
-          <img src={port} alt="portfolio" />
-        </div>
-        <div className="about-me">
-          <div className="about-me info">
-            <p>
-              Hi There <br />I am an entry level developer and{" "}
-              <span className="Red"> Red Hat System Administrator </span> . I
-              have passion for creating websites and constantly strive to
-              improve my skills. I am able to complete projects independently
-              with a high level of efficiency. I am excited to bring my skills
-              and experience to new challenges and opportunities{" "}
-            </p>
-          </div>
-        </div>
-        <div className="about-content"></div>
-      </div>
-    </section>
-  );
-};
-
-export default about;
+import React from "react";
+import "./about.css";
+import port from "../../assets/porto.jfif";
+const about = () => {
+  return (
+    <section id="about">
+      <h2>About Me</h2>
+      <div className="container about-container">
+        <div className="aboutimage">
+          <img src={port} alt="portfolio" />
+        </div>
+        <div className="about-me">
+          <div className="about-me info">
+            <p>
+              Hi There <br />I am an entry level developer and{" "}
+              <span className="Red"> Red Hat System Administrator </span> . I
+              have passion for creating websites and constantly strive to
+              improve my skills. I am able to complete projects independently
+              with a high level of efficiency. I am excited to bring my skills
+              and experience to new challenges and opportunities{" "}
+            </p>
+          </div>
+        </div>
+        <div className="about-content"></div>
+      </div>
+    </section>
+  );
+};
+
+export default about;