Merge pull request #6 from mitul-garg/dev

Updated Portfolio (without Dark Theme)

package.json

@@ -14,6 +14,7 @@
     "react-lazy-load-image-component": "^1.6.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "^5.0.1",
+    "react-scroll-to-top": "^3.0.0",
     "uuid": "^10.0.0",
     "web-vitals": "^4.1.1"
   },

src/App.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import ScrollToTop from "react-scroll-to-top";
 
 // import pages
 import { Home } from "./pages/Home";
@@ -20,6 +21,7 @@ import { AllIssues } from "./components/AllIssues";
 const App = () => {
   return (
     <Router>
+      <ScrollToTop smooth className="scroll-to-top-arrow" />
       <Navbar />
       <Sidebar />
       <Routes>

src/components/Blogs/styles.css

@@ -6,9 +6,10 @@
   flex-direction: column;
   justify-content: center;
   place-items: center;
-  gap: 2rem;
+  gap: 3rem;
   background-color: white;
 }
+
 .blogs h1 {
   color: #102a42;
   font-family: "Roboto", sans-serif;
@@ -17,60 +18,81 @@
   text-decoration: underline #2caeba 0.3rem;
   text-underline-offset: 0.7rem;
 }
+
 .blog-cards {
-  margin: 1rem 2rem;
   display: flex;
-  justify-content: center;
-  gap: 1.2rem;
-  width: 100%;
+  gap: 2rem;
 }
+
 .blog-card {
   background-color: #f1f5f8;
   display: flex;
   flex-direction: column;
   place-items: center;
   gap: 1rem;
-  padding: 1rem 0.75rem;
+  padding: 4rem 0.75rem;
   border-radius: 0.5rem;
   transition: all 0.3s ease-in-out;
-  max-width: 600px;
+  width: 600px;
+  height: 350px;
+  transition: all 1s ease;
 }
+
 .blog-card h3 {
   color: #102a42;
-  font-family: "Roboto", sans-serif;
-  font-size: 1.5rem;
-  letter-spacing: 2px;
-  text-underline-offset: 0.7rem;
+  font-family: "Josefin Sans", sans-serif;
+  font-size: 1.7rem;
   line-height: 3rem;
+  transition: all 1s ease;
 }
+
 .blog-card p {
   color: #324d67;
   font-family: "Open Sans", sans-serif;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-size: 1.1rem;
+  font-size: 1.3rem;
   width: 90%;
+  transition: all 1s ease;
 }
+
 .blog-link {
   color: black;
   font-weight: 600;
   font-size: 0.85rem;
+  transition: all 1s ease;
 }
+
 .blog-card:hover {
   background-color: #2caeba;
   color: hsl(185, 94%, 87%);
 }
+
 .blog-card:hover h3 {
   color: white;
-  text-decoration: underline 0.2rem white;
-  text-underline-offset: 0.7rem;
 }
+
 .blog-card:hover p {
   color: hsl(185, 94%, 87%);
 }
 
+.blog-card:hover .blog-link {
+  color: whitesmoke;
+  font-size: 1rem;
+  cursor: url("../../assets/pointer.svg"), auto;
+}
+
 @media (max-width: 900px) {
   .blog-cards {
     flex-direction: column;
+    place-items: center;
+  }
+
+  .blog-card {
+    height: 450px;
+    justify-content: center;
+    width: 90%;
+  }
+
+  .blog-card h3 {
+    text-align: center;
   }
 }

src/components/Education/index.js

@@ -1,49 +1,23 @@
-import React, { useState } from "react";
+import React from "react";
 import { education } from "../../data/education";
 
-export const Education = () => {
-  const [idx, setIdx] = useState(education[0].id);
-
-  const changeIdx = (value) => {
-    setIdx(value);
-  };
+import "./styles.css";
 
+export const Education = () => {
   return (
-    <section className="experience">
+    <section className="education">
       <h1>Education</h1>
-      <div className="job-section">
-        <div className="btn-container">
-          {education.map((job) => {
-            const { id, degree } = job;
-            return (
-              <button
-                key={id}
-                onClick={() => changeIdx(id)}
-                className={`${
-                  id === idx ? "job-btn active-job-btn" : "job-btn"
-                }`}
-              >
-                {degree}
-              </button>
-            );
-          })}
-        </div>
-        <div className="job-info">
-          {education.map((job) => {
-            const { id, title, institute, grades, dates } = job;
-            if (id === idx) {
-              return (
-                <article key={id} className="job-details">
-                  <h3>{title}</h3>
-                  <div className="job-company">{institute}</div>
-                  <div className="job-dates">{grades}</div>
-                  <div className="job-dates">Passing Year : {dates}</div>
-                </article>
-              );
-            }
-            return null;
-          })}
-        </div>
+      <div className="education-list">
+        {education.map(({ id, title, degree, institute, dates, grades }) => (
+          <section key={id} className="education-details">
+            <h2>{institute}</h2>
+            <h3>
+              {degree} - {title}
+            </h3>
+            <h4>Scored {grades}</h4>
+            <p>Graduation Year : {dates}</p>
+          </section>
+        ))}
       </div>
     </section>
   );

src/components/Education/styles.css

@@ -0,0 +1,70 @@
+.education {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  place-items: center;
+  gap: 4rem;
+}
+
+.education h1 {
+  color: #102a42;
+  font-family: "Roboto", sans-serif;
+  font-size: 2.4rem;
+  letter-spacing: 2.4px;
+  text-decoration: underline #2caeba 0.3rem;
+  text-underline-offset: 0.7rem;
+}
+.education-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 3rem;
+}
+
+.education-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: left;
+  gap: 2rem;
+  border-radius: 20px;
+  height: 300px;
+  width: 400px;
+  padding: 20px 40px;
+  /* background: linear-gradient(to top, #35d7e6, #72f3ff); */
+  background: #d0f4f8;
+  color: black;
+  font-family: "Montserrat", sans-serif;
+  transition: all 0.5s ease-in-out;
+}
+
+.education-details h2 {
+  text-align: center;
+  font-family: "Josefin Sans", sans-serif;
+  font-size: 1.8rem;
+  line-height: 35px;
+}
+
+.education-details h3 {
+  font-size: 1.3rem;
+}
+
+.education-details h4 {
+  font-size: 1.2rem;
+}
+
+.education-details p {
+  font-size: 1.2rem;
+}
+
+.education-details:hover {
+  transform: scale(1.05);
+}
+
+@media (max-width: 900px) {
+  .education-details {
+    width: 90%;
+  }
+}

src/components/Experience/styles.css

@@ -47,7 +47,7 @@
 }
 .job-btn:hover {
   color: #2caeba;
-  cursor: pointer;
+  cursor: url("../../assets/pointer.svg"), auto;
 }
 .job-info {
   width: 60%;