Fixed experience cards issue on safari (saadpasta#201)

* Fixed issue where images and content were overlapping on safari experience card * Added pngs for logos as webp is currently not supported on safari * Removed webp logos in favor of PNG
stayhungry07212 · Jul 3, 2020 · 15dd996 · 15dd996
1 parent ec4f107
commit 15dd996
Show file tree

Hide file tree

Showing 9 changed files with 5 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/images/airbnbLogo.png b/src/assets/images/airbnbLogo.png
diff --git a/src/assets/images/airbnbLogo.webp b/src/assets/images/airbnbLogo.webp
diff --git a/src/assets/images/facebookLogo.png b/src/assets/images/facebookLogo.png
diff --git a/src/assets/images/facebookLogo.webp b/src/assets/images/facebookLogo.webp
diff --git a/src/assets/images/quoraLogo.png b/src/assets/images/quoraLogo.png
diff --git a/src/assets/images/quoraLogo.webp b/src/assets/images/quoraLogo.webp
diff --git a/src/components/experienceCard/ExperienceCard.css b/src/components/experienceCard/ExperienceCard.css
@@ -1,4 +1,5 @@
 .experience-card {
+    position: relative;
     background-color: rgb(255, 255, 255);
     box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px -15px;
     border-radius: 10px;
@@ -68,6 +69,7 @@
 
 .experience-roundedimg {
     position: absolute;
+    object-fit: cover;
     left: 0;
     right: 0;
     top: 7rem;

diff --git a/src/portfolio.js b/src/portfolio.js
@@ -124,7 +124,7 @@ const workExperiences = {
     {
       role: "Software Engineer",  
       company: "Facebook",
-      companylogo: require("./assets/images/facebookLogo.webp"),
+      companylogo: require("./assets/images/facebookLogo.png"),
       date: "June 2018 – Present",
       desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
       descBullets: [
@@ -135,14 +135,14 @@ const workExperiences = {
     {
       role: "Front-End Developer",   
       company: "Quora",
-      companylogo: require("./assets/images/quoraLogo.webp"),
+      companylogo: require("./assets/images/quoraLogo.png"),
       date: "May 2017 – May 2018",
       desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     },
     {
       role: "Software Engineer Intern",  
       company: "Airbnb",
-      companylogo: require("./assets/images/airbnbLogo.webp"),
+      companylogo: require("./assets/images/airbnbLogo.png"),
       date: "Jan 2015 – Sep 2015",
       desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     },