AlexDevFlow
diff --git a/‎blog.lottie‎
110 KB b/‎blog.lottie‎
110 KB
diff --git a/‎index.html‎
Lines changed: 4 additions & 3 deletions b/‎index.html‎
Lines changed: 4 additions & 3 deletions
diff --git a/‎lab.lottie‎
10.6 KB b/‎lab.lottie‎
10.6 KB
diff --git a/‎portfolio.lottie‎
32 KB b/‎portfolio.lottie‎
32 KB
diff --git a/‎style.css‎
Lines changed: 5 additions & 4 deletions b/‎style.css‎
Lines changed: 5 additions & 4 deletions
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
+    <script type="module" src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" defer></script>
 
 </head>
 <body>
@@ -22,15 +23,15 @@ <h1>Alessandro Trysh</h1>
     </header>
     <main class="card-container" id="main-content">
         <a href="./portfolio/" class="card">
-            <span class="emoji-icon" aria-hidden="true">💼</span>
+            <dotlottie-player class="lottie-icon" src="./portfolio.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true"></dotlottie-player>
             <h2 data-i18n="home.cardPortfolio">Portfolio</h2>
         </a>
         <a href="./blog/" class="card">
-            <span class="emoji-icon" aria-hidden="true">✍️</span>
+            <dotlottie-player class="lottie-icon" src="./blog.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true"></dotlottie-player>
             <h2 data-i18n="home.cardBlog">Blog</h2>
         </a>
         <a href="./lab/" class="card">
-            <span class="emoji-icon" aria-hidden="true">🧪</span>
+            <dotlottie-player class="lottie-icon" src="./lab.lottie" background="transparent" speed="1" loop autoplay aria-hidden="true"></dotlottie-player>
             <h2 data-i18n="home.cardLab">Lab</h2>
         </a>
     </main>
 
@@ -82,14 +82,15 @@ body {
   color: var(--primary-color);
 }
 
-.emoji-icon {
-  font-size: 4rem;
+.lottie-icon {
+  width: 120px;
+  height: 120px;
   margin-bottom: 1rem;
   transition: transform 0.3s ease-in-out;
 }
 
-.card:hover .emoji-icon {
-  transform: scale(1.2);
+.card:hover .lottie-icon {
+  transform: scale(1.05);
 }
 
 .skip-link {
Original file line number	Diff line number	Diff line change
`@@ -82,14 +82,15 @@ body {`
`82`	`82`	`color: var(--primary-color);`
`83`	`83`	`}`
`84`	`84`
`85`		`-.emoji-icon {`
`86`		`- font-size: 4rem;`
	`85`	`+.lottie-icon {`
	`86`	`+ width: 120px;`
	`87`	`+ height: 120px;`
`87`	`88`	`margin-bottom: 1rem;`
`88`	`89`	`transition: transform 0.3s ease-in-out;`
`89`	`90`	`}`
`90`	`91`
`91`		`-.card:hover .emoji-icon {`
`92`		`- transform: scale(1.2);`
	`92`	`+.card:hover .lottie-icon {`
	`93`	`+ transform: scale(1.05);`
`93`	`94`	`}`
`94`	`95`
`95`	`96`	`.skip-link {`