blog-al-done-still-needs-tiny-changes

Author: ShlomoStept

components/Card.js

@@ -16,7 +16,7 @@ const Card = ({ title, description, imgSrc, href }) => (
               src={imgSrc}
               className="object-cover object-center md:h-36 lg:h-48"
               width={544}
-              height={306}
+              height={420}
             />
           </Link>
         ) : (
@@ -25,7 +25,7 @@ const Card = ({ title, description, imgSrc, href }) => (
             src={imgSrc}
             className="object-cover object-center md:h-36 lg:h-48"
             width={544}
-            height={306}
+            height={420}
           />
         ))}
       <div className="p-6">

components/Personal_card.js

@@ -0,0 +1,57 @@
+/* eslint-disable prettier/prettier */
+import Image from './Image'
+
+
+const ClickableGitIcon = ({personal_github}) => {
+  console.log(personal_github)
+    return (
+        <>
+            <a href={personal_github} className="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300 group-hover:text-white" aria-label="Github">
+                                <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
+                                    </path>
+                                </svg>
+                            </a>
+        </>
+    )
+    
+};
+
+const ProfileCard = ({ name, imgSrc, github }) => {
+    return (
+      <div className="flex flex-col items-center p-8 transition-colors duration-200 transform cursor-pointer group hover:bg-amber-500  rounded-md">
+        <div style={{overflow: 'visible' }}className="image-wrapper flex flex-col  overflow-visible relative p-3 m-3 min-w-180 min-h-180 ">
+          <Image
+            key={name}
+            className="rounded-full object-fit object-scale-down ring-4 ring-offset-1 ring-gray-300 p-4 overflow-visible" 
+            src={imgSrc}
+            alt={name}
+            width={140}
+            height={140}
+            layout="intrinsic"
+          />
+          <style jsx>{`
+                .span {
+                    overflow: visible; !important
+                }
+            `}</style>
+        </div>
+        <div className="flex flex-col items-center">
+          <h1 className="text-center mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
+            {name}
+          </h1>
+        </div>
+        <div className="flex mt-3 -mx-2">
+          <ClickableGitIcon personal_github={github}/>
+        </div>
+      </div>
+    );
+  };
+  
+export default ProfileCard;
+
+  
+  
+  

components/ProfileCard.js

@@ -1,5 +1,5 @@
 ---
-name: Duck AI
+name: DuckAI
 avatar: /static/images/avatar.png
 occupation: Research Group
 # company: