From 3ae6c6373131f755c5704e56f6e44484b4554d41 Mon Sep 17 00:00:00 2001
From: Jayandra Hamal <salonhamal278@gmail.com>
Date: Thu, 16 Jan 2025 23:21:55 +0545
Subject: [PATCH] Fix: Consistent animation naming in style.css and
 Portfolio.jsx

---
 .eslintrc                    |  3 ++-
 src/Components/Portfolio.jsx | 17 +++++++++--------
 src/styles.css               | 23 +++++++++++++++++++++++
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 0e2af371..bbbea08e 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,7 +4,8 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:prettier/recommended"
   ],
   "plugins": ["react", "prettier", "jsx-a11y"],
   "parserOptions": {
diff --git a/src/Components/Portfolio.jsx b/src/Components/Portfolio.jsx
index ab1c924e..b417c758 100644
--- a/src/Components/Portfolio.jsx
+++ b/src/Components/Portfolio.jsx
@@ -1,10 +1,10 @@
 /**
  * Portfolio component
  *
- * Highlights some of  your creations. These can be designs, websites,
- * open source contributions, articles you've written and more.
+ * Highlights some of your creations. These can be designs, websites,
+ * open source contributions, articles you've written, and more.
  *
- * This is a great area for you to to continually add to and refine
+ * This is a great area for you to continually add to and refine
  * as you continue to learn and create.
  */
 
@@ -14,10 +14,10 @@ import React from "react";
  * Desk image
  *
  * Below is a sample desk image. Feel free to update this to an image of your choice,
- * updating below imageAltText to string that represents what you see in that image.
+ * updating below imageAltText to a string that represents what you see in that image.
  *
  * Need an image? Check out https://unsplash.com to download a photo you
- * freely use on your site.
+ * can freely use on your site.
  */
 import image from "../images/design-desk.jpeg";
 
@@ -26,14 +26,14 @@ const imageAltText = "desktop with books and laptop";
 /**
  * Project list
  *
- * An array of objects that will be used to display for your project
+ * An array of objects that will be used to display your project
  * links section. Below is a sample, update to reflect links you'd like to highlight.
  */
 const projectList = [
   {
     title: "10 Things To Know About Azure Static Web Apps 🎉",
     description:
-      "Collaboration to create a beginner friendly article to help explain Azure Static Web Apps and tooling to get started.",
+      "Collaboration to create a beginner-friendly article to help explain Azure Static Web Apps and tooling to get started.",
     url: "https://dev.to/azure/10-things-to-know-about-azure-static-web-apps-3n4i",
   },
   {
@@ -58,12 +58,13 @@ const projectList = [
 
 const Portfolio = () => {
   return (
-    <section className="padding" id="portfolio">
+    <section className="portfolio padding" id="portfolio">
       <h2 style={{ textAlign: "center" }}>Portfolio</h2>
       <div style={{ display: "flex", flexDirection: "row", paddingTop: "3rem" }}>
         <div style={{ maxWidth: "40%", alignSelf: "center" }}>
           <img
             src={image}
+            className="animated-image"
             style={{ height: "90%", width: "100%", objectFit: "cover" }}
             alt={imageAltText}
           />
diff --git a/src/styles.css b/src/styles.css
index 999a1740..ac9a1936 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -123,3 +123,26 @@ img.socialIcon {
   height: 30px;
   width: 30px;
 }
+
+/* Add a slide-in-left animation */
+@keyframes slideInLeft {
+  0% {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* Animation for the image */
+.animated-image {
+  animation: slideInLeft 1s ease-out;
+}
+
+/* Animation for the project boxes */
+.container .box {
+  animation: slideInLeft 1s ease-in-out;
+  margin-bottom: 1.5rem; /* Adds spacing between boxes */
+}