Change About section from onMouseOver to onClick

akshay-rajan · Aug 15, 2024 · 2467e27 · 2467e27
1 parent ea23c87
commit 2467e27
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 2 deletions.
diff --git a/src/components/AboutCard.jsx b/src/components/AboutCard.jsx
@@ -39,7 +39,7 @@ export default function AboutCard(props) {
     <>
       <div 
         style={props.isExpanded ? {display: 'none'} : {display: 'block'}}
-        className="about-card-container"
+        className={props.isActive ? 'about-card-active' : 'about-card-container'}
         onClick={() => {
             props.setExpanded(true);
             props.setHovering(props.title);

diff --git a/src/styles/AboutCard.css b/src/styles/AboutCard.css
@@ -10,9 +10,59 @@
   max-width: 100%;
   height: auto;
   aspect-ratio: attr(width) / attr(height);
-  background: #000;
+
+  background: linear-gradient(0deg, rgb(20, 20, 20) 0%, rgba(0, 0, 0, 0.5) 100%);
+  backdrop-filter: blur(7px);
+  -webkit-backdrop-filter: blur(7px);
+
   border: 0.1px solid rgb(100, 100, 100);
   border-radius: 10px;
+  transition: 0.5s all;
+}
+.about-card-active {
+  font-size: 15px;
+  padding: 15px;
+  padding-top: 15px;
+  margin-left: 0;
+  margin-top: 0;
+  text-align: left;
+  display: block;
+  background-color: black;
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: attr(width) / attr(height);
+
+  background: linear-gradient(0deg, rgb(20, 20, 20) 0%, rgba(0, 0, 0, 0.5) 100%);
+  backdrop-filter: blur(7px);
+  -webkit-backdrop-filter: blur(7px);
+
+  transition: 0.5s all;
+  border: 1px solid wheat;
+  border-radius: 10px;
+  box-shadow: 0 7px 50px 10px #000000aa;
+  filter: brightness(1.2); 
+}
+.about-card-container::before {
+  position: fixed;
+  content: "";
+  box-shadow: 0 0 100px 40px #ffffff08;
+  top: -10%;
+  left: -100%;
+  transform: rotate(-45deg);
+  height: 60rem;
+  transition: .7s all;
+}
+
+.about-card-container:hover {
+  border: 1px solid wheat;
+  box-shadow: 0 7px 50px 10px #000000aa;
+  filter: brightness(1.3);
+}
+
+.about-card-container:hover::before {
+  filter: brightness(.5);
+  top: -100%;
+  left: 200%;
 }
 .card-item {
   display: inline;