Revert "Redesigned the Project Page under Winter of Code "

GDSC-IIIT-Kalyani · Apr 20, 2023 · d2832d6 · d2832d6
1 parent f5b14f9
commit d2832d6
Show file tree

Hide file tree

Showing 12 changed files with 591 additions and 1,495 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,11 +3,7 @@
   "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,15 +4,13 @@
   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;
@@ -55,6 +53,7 @@
   flex-flow: row wrap;
   gap: 1em;
 }
+
 .brochure-button {
   background-color: white;
   color: #042042;
@@ -86,7 +85,6 @@
     text-align: left;
     margin: 10px auto;
   }
-
   .about-desc {
     font-size: 1.5rem;
     width: 90vw;
@@ -99,4 +97,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,63 +1,35 @@
 .Card {
   color: black;
-  height: 275px;
+  height: 400px;
   margin: 10px 5px;
-  max-width: 400px;
+  max-width: 343px;
   width: 100%;
   flex-direction: column;
   display: inline-flex;
   z-index: 1;
-  -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);
-
+  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);
 }
-
-
-
-
-
 .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 {
-  -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);
+  border: 1px solid rgb(255, 255, 255);
+  transform: translateY(-10px);
 }
 
 .Organizer_img {
@@ -70,11 +42,9 @@
   background-repeat: no-repeat;
   border-radius: 8px;
 }
-
 .Ideas a {
   color: white;
 }
-
 .dropbtn {
   border-radius: 5px;
   transition: all ease-in-out 0.2s;
@@ -135,11 +105,9 @@
 .dropdown-content a:hover {
   background-color: rgb(31, 18, 18);
 }
-
 .dropdown:hover .dropdown-content {
   display: block;
 }
-
 .dropdown:hover .dropbtn {
   background-color: #2162db;
 }
@@ -153,7 +121,7 @@
   text-align: center;
   display: block;
   visibility: visible;
-  color: #fff;
+  color: #0e0e0e;
   transition: all ease-in-out 0.1s;
 }
 
@@ -165,7 +133,7 @@
   padding: 5px 0;
 }
 
-.mentors-flex:hover>div {
+.mentors-flex:hover > div {
   color: #e1e1e1b0 !important;
 }
 
@@ -217,14 +185,4 @@
   overflow: auto;
 }
 
-@media (max-width: 500px) {
-
-  /* .proj_slt {
-    width: 50vw;
-  } */
-  .Card {
-    max-width: 230px;
-  }
-}
-
-/* #191417 */
+/* #191417 */