Merge pull request #151 from Ninad3721/main

Redesigned the Project Page under Winter of Code
GDSC-IIIT-Kalyani · Apr 20, 2023 · f5b14f9 · f5b14f9
2 parents 46fa76c + 0cf2a05
commit f5b14f9
Show file tree

Hide file tree

Showing 12 changed files with 1,495 additions and 591 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",

diff --git a/src/components/about/about.css b/src/components/about/about.css
@@ -4,13 +4,15 @@
   font-family: Vanilla;
   z-index: 5;
 }
+
 .about-background {
   position: absolute;
   width: 100vw;
   height: 100%;
   z-index: -1;
   overflow: hidden;
 }
+
 .about-content {
   /* padding-top: 30vh; */
   width: 100vw;
@@ -53,7 +55,6 @@
   flex-flow: row wrap;
   gap: 1em;
 }
-
 .brochure-button {
   background-color: white;
   color: #042042;
@@ -85,6 +86,7 @@
     text-align: left;
     margin: 10px auto;
   }
+
   .about-desc {
     font-size: 1.5rem;
     width: 90vw;
@@ -97,4 +99,4 @@
     flex-flow: column wrap;
     align-items: center;
   }
-}
+}
diff --git a/src/components/projects/project.css b/src/components/projects/project.css
@@ -1,6 +1,6 @@
 #projects {
     padding-top: 10%;
-    font-family: Vanilla,"serif";
+    font-family: Vanilla, "serif";
     display: flex;
     flex-direction: row wrap;
     justify-content: space-around;

diff --git a/src/components/projects/project.js b/src/components/projects/project.js
@@ -4,46 +4,46 @@ import image from "../../assets/projects_section_bg.png"
 
 const Project = () => {
 
-    useEffect(() => {
-        const faqHeading = document.querySelector(".projects-header");
-        const faqHeadingOptions = {
-          root: null,
-          threshold: 0.5,
-        };
-        const faqHeadingObserver = new IntersectionObserver((entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              faqHeading.classList.add("projects-header-active");
-            }
-          });
-        }, faqHeadingOptions);
-        faqHeadingObserver.observe(faqHeading);
-      }, []);
+  useEffect(() => {
+    const faqHeading = document.querySelector(".projects-header");
+    const faqHeadingOptions = {
+      root: null,
+      threshold: 0.5,
+    };
+    const faqHeadingObserver = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          faqHeading.classList.add("projects-header-active");
+        }
+      });
+    }, faqHeadingOptions);
+    faqHeadingObserver.observe(faqHeading);
+  }, []);
 
-    return (
-        <section id="projects">
-            <div className="projects-image-grid">
-                <img className="projects-image image-1" src={image} alt="projects"></img>
-                <img className="projects-image image-2" src={image} alt="projects"></img>
-                <img className="projects-image image-3" src={image} alt="projects"></img>
-                <img className="projects-image image-4" src={image} alt="projects"></img>
-                <img className="projects-image image-5" src={image} alt="projects"></img>
-                <img className="projects-image image-6" src={image} alt="projects"></img>
-                <img className="projects-image image-7" src={image} alt="projects"></img>
-                <img className="projects-image image-8" src={image} alt="projects"></img>
-                <img className="projects-image image-9" src={image} alt="projects"></img>
-            </div>
-            <div className="projects-textual-content">
-                <h2 className="projects-header">PROJECTS</h2>
-                <p className="projects-text">
-                    WoC is primarily a mentoring initiative. The Projects on offer have excellent mentors associated with them. The mentors are devoted, enthusiastic individuals who want to assist WoC Contributors in becoming excellent open source contributors by teaching them about their communities. It can only make you a better, more confident open source developer to have the chance to learn from others who have been at this for several years and who are knowledgeable about the techniques.
-                </p>
-                <a href="/projects" alt="Projects page">
-                    <button className="projects-button" type="button"><span>PROJECTS</span></button>
-                </a>
-            </div>
-        </section>
-    )
+  return (
+    <section id="projects">
+      <div className="projects-image-grid">
+        <img className="projects-image image-1" src={image} alt="projects"></img>
+        <img className="projects-image image-2" src={image} alt="projects"></img>
+        <img className="projects-image image-3" src={image} alt="projects"></img>
+        <img className="projects-image image-4" src={image} alt="projects"></img>
+        <img className="projects-image image-5" src={image} alt="projects"></img>
+        <img className="projects-image image-6" src={image} alt="projects"></img>
+        <img className="projects-image image-7" src={image} alt="projects"></img>
+        <img className="projects-image image-8" src={image} alt="projects"></img>
+        <img className="projects-image image-9" src={image} alt="projects"></img>
+      </div>
+      <div className="projects-textual-content">
+        <h2 className="projects-header">PROJECTS</h2>
+        <p className="projects-text">
+          WoC is primarily a mentoring initiative. The Projects on offer have excellent mentors associated with them. The mentors are devoted, enthusiastic individuals who want to assist WoC Contributors in becoming excellent open source contributors by teaching them about their communities. It can only make you a better, more confident open source developer to have the chance to learn from others who have been at this for several years and who are knowledgeable about the techniques.
+        </p>
+        <a href="/projects" alt="Projects page">
+          <button className="projects-button" type="button"><span>PROJECTS</span></button>
+        </a>
+      </div>
+    </section>
+  )
 }
 
 export default Project;
diff --git a/src/index.js b/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App/>
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
diff --git a/src/pages/allProjects/ProjectCard.css b/src/pages/allProjects/ProjectCard.css
@@ -1,35 +1,63 @@
 .Card {
   color: black;
-  height: 400px;
+  height: 275px;
   margin: 10px 5px;
-  max-width: 343px;
+  max-width: 400px;
   width: 100%;
   flex-direction: column;
   display: inline-flex;
   z-index: 1;
-  transition: all ease-in-out 0.4s;
-  background: rgba(255, 255, 255, 0.35);
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
+  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  background: rgba(255, 255, 255, 0.40);
+  border-radius: 12px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(6.6px);
+  -webkit-backdrop-filter: blur(6.6px);
+
 }
+
+
+
+
+
 .text-center {
   text-align: center !important;
 }
+
 .proj_slider {
   width: 70vw;
   margin-left: auto;
   margin-right: auto;
 }
+
 .fa-arial {
   color: #f9f9f9 !important;
   letter-spacing: 2px;
 }
+
 .Card:hover {
-  border: 1px solid rgb(255, 255, 255);
-  transform: translateY(-10px);
+  -webkit-transform: scale(1.03, 1.03);
+  transform: scale(1.03, 1.03);
+}
+
+.Card:hover::after {
+  opacity: 1;
+}
+
+.Card::after {
+  content: "";
+  border-radius: 12px;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 5px 10px rgba(32, 95, 240, 0.8);
+  opacity: 0;
+  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
 .Organizer_img {
@@ -42,9 +70,11 @@
   background-repeat: no-repeat;
   border-radius: 8px;
 }
+
 .Ideas a {
   color: white;
 }
+
 .dropbtn {
   border-radius: 5px;
   transition: all ease-in-out 0.2s;
@@ -105,9 +135,11 @@
 .dropdown-content a:hover {
   background-color: rgb(31, 18, 18);
 }
+
 .dropdown:hover .dropdown-content {
   display: block;
 }
+
 .dropdown:hover .dropbtn {
   background-color: #2162db;
 }
@@ -121,7 +153,7 @@
   text-align: center;
   display: block;
   visibility: visible;
-  color: #0e0e0e;
+  color: #fff;
   transition: all ease-in-out 0.1s;
 }
 
@@ -133,7 +165,7 @@
   padding: 5px 0;
 }
 
-.mentors-flex:hover > div {
+.mentors-flex:hover>div {
   color: #e1e1e1b0 !important;
 }
 
@@ -185,4 +217,14 @@
   overflow: auto;
 }
 
-/* #191417 */
+@media (max-width: 500px) {
+
+  /* .proj_slt {
+    width: 50vw;
+  } */
+  .Card {
+    max-width: 230px;
+  }
+}
+
+/* #191417 */