Skip to content

Fix: Consistent animation naming in style.css and Portfolio.jsx #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: Consistent animation naming in style.css and Portfolio.jsx #151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:jsx-a11y/recommended"
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is this needed?

],
"plugins": ["react", "prettier", "jsx-a11y"],
"parserOptions": {
Expand Down
17 changes: 9 additions & 8 deletions src/Components/Portfolio.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
*/

Expand All @@ -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";

Expand All @@ -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",
},
{
Expand All @@ -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}
/>
Expand Down
23 changes: 23 additions & 0 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
Loading