feat: contact modal animation

fezcode · fezcode · commit 322e69147240 · 2025-11-04T17:25:52.000+03:00
diff --git a/src/components/ContactModal.css b/src/components/ContactModal.css
@@ -1,3 +1,24 @@
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideDown {
+  from { transform: translateY(0); opacity: 1; }
+  to { transform: translateY(20px); opacity: 0; }
+}
+
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -10,6 +31,8 @@
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
 }
 
 .modal-content {
@@ -25,6 +48,24 @@
   box-shadow: inset 0 0 0 4px #4a5568; /* Inner border */
   font-family: 'Arvo', serif;
   font-weight: 300;
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.modal-overlay.fade-in {
+  animation-name: fadeIn;
+}
+
+.modal-overlay.fade-out {
+  animation-name: fadeOut;
+}
+
+.modal-content.slide-up {
+  animation-name: slideUp;
+}
+
+.modal-content.slide-down {
+  animation-name: slideDown;
 }
 
 .modal-header {
@@ -77,3 +118,4 @@
 .red-text {
   color: #f87171;
 }
+
diff --git a/src/components/ContactModal.js b/src/components/ContactModal.js
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import './ContactModal.css';
-import {X, Envelope, LinkedinLogo, TwitterLogo} from '@phosphor-icons/react';
+import { X, Envelope, LinkedinLogo, TwitterLogo } from '@phosphor-icons/react';
 
 const colorizeText = (text) => {
   return text.split(' ').map((word, index) => {
@@ -13,16 +13,38 @@ const colorizeText = (text) => {
 };
 
 const ContactModal = ({ isOpen, onClose }) => {
+  const [isClosing, setIsClosing] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsClosing(false);
+    }
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+      setIsClosing(false);
+    }, 300); // Corresponds to animation duration
+  };
+
   if (!isOpen) {
     return null;
   }
 
   return (
-    <div className="modal-overlay" onClick={onClose}>
-      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+    <div
+      className={`modal-overlay ${isOpen && !isClosing ? 'fade-in' : 'fade-out'}`}
+      onClick={handleClose}
+    >
+      <div
+        className={`modal-content ${isOpen && !isClosing ? 'slide-up' : 'slide-down'}`}
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="modal-header">
           <h2>{colorizeText('Contact Me')}</h2>
-          <button onClick={onClose} className="close-button">
+          <button onClick={handleClose} className="close-button">
             <X size={24} />
           </button>
         </div>
