Mobile optimizations for projects

drik98 · Aug 1, 2024 · be2c40b · be2c40b · github-actions · Aug 1, 2024
1 parent 42d59eb
commit be2c40b
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/components/Projects.module.scss b/components/Projects.module.scss
@@ -10,18 +10,17 @@
 }
 
 .project {
-  position: relative;
   max-width: 900px;
   margin: 0 auto 30px auto;
-  overflow: hidden;
   background: #fff;
   border-radius: 4px;
+  display: flex;
 }
 
 .projectImage {
-  float: left;
-  max-width: 300px;
-  height: 300px;
+  width: 30%;
+  min-width: 300px;
+  aspect-ratio: 1;
   overflow: hidden;
 
   img {
@@ -32,11 +31,11 @@
 }
 
 .projectInfo {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 300px;
   padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
   h3 {
     font-size: 1.5em;
@@ -62,6 +61,7 @@
 
 .projectLogos {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   padding: 10px;
 }
@@ -83,7 +83,17 @@
 
 @media only screen and (max-width: 768px) {
   .projectImage {
-    display: none;
+    width: 100%;
+    height: 20vh;
+    aspect-ratio: unset;
+
+    img {
+      height: unset;
+      width: 100%;
+    }
+  }
+  .project {
+    flex-direction: column;
   }
   .projectInfo {
     position: relative;

diff --git a/components/Projects.tsx b/components/Projects.tsx
@@ -82,18 +82,20 @@ function ProjectItem({
         <h3>{translatedTitle}</h3>
         <p>{getMultilingualContent(description, locale)}</p>
         <Technologies technologies={technologies} messages={messages} />
-        {projectUrl ? (
-          <a href={projectUrl} target="_blank" rel="noopener noreferrer">
-            <i className="fa fa-external-link"></i>
-            {messages.projects.viewProject}
-          </a>
-        ) : null}
-        {sourceCodeUrl ? (
-          <a href={sourceCodeUrl} target="_blank" rel="noopener noreferrer">
-            <i className="fa fa-code"></i>
-            {messages.projects.viewCode}
-          </a>
-        ) : null}
+        <span>
+          {projectUrl ? (
+            <a href={projectUrl} target="_blank" rel="noopener noreferrer">
+              <i className="fa fa-external-link"></i>
+              {messages.projects.viewProject}
+            </a>
+          ) : null}
+          {sourceCodeUrl ? (
+            <a href={sourceCodeUrl} target="_blank" rel="noopener noreferrer">
+              <i className="fa fa-code"></i>
+              {messages.projects.viewCode}
+            </a>
+          ) : null}
+        </span>
       </div>
     </div>
   );