chore/image optimizations

chore/gerardo ancer portfolio
chore/css cleanup

Author: jonaspm

public/images/autosolutions.app.png src/assets/images/autosolutions.app.pngpublic/images/autosolutions.app.png renamed to src/assets/images/autosolutions.app.png

@@ -1,11 +1,15 @@
 import "../styles/HeaderProfile.scss";
+import { getImage } from "astro:assets";
 import Box from "./Box";
+import profileImg from "@/assets/images/profile.png";
+
+const profileImage = await getImage({src: profileImg, format: 'avif'});
 
 function HeaderProfile() {
   return (
     <Box className="header-profile !backdrop-blur-none p-5 !bg-secondary/0">
       <Box className="aspect-square !rounded-full max-w-xs self-center profile-container">
-        <div className="profile aspect-square w-full rounded-full" />
+        <div style={{backgroundImage: `url('${profileImage.src}')`}} className="profile aspect-square w-full rounded-full" />
       </Box>
     </Box>
   );

public/images/enerlinq.com.png src/assets/images/enerlinq.com.pngpublic/images/enerlinq.com.png renamed to src/assets/images/enerlinq.com.png

@@ -92,7 +92,7 @@ function MainBody({ projects }: { projects: Project[] }) {
 										>
 											<span>{project.name}</span>
 											<img
-												className="w-full rounded-sm object-contain transition-transform duration-200 delay-150 my-2"
+												className="w-full rounded-[4px] object-contain transition-transform duration-200 delay-150 my-2"
 												src={project.image.src}
 												alt={project.name}
 											/>

src/assets/images/gerardoancer.com.png

@@ -1,16 +1,17 @@
 ---
 import Layout from "@/layouts/Layout.astro"
 import MainBody from "@/components/MainBody"
-import sorteosClickImage from "@/images/sorteos.click.png"
-import autosolutionsImage from "@/images/autosolutions.app.png"
-import enerlinqImage from "@/images/enerlinq.com.png"
+import sorteosClickImage from "@/assets/images/sorteos.click.png"
+import autosolutionsImage from "@/assets/images/autosolutions.app.png"
+import enerlinqImage from "@/assets/images/enerlinq.com.png"
+import gerardoAncerImage from "@/assets/images/gerardoancer.com.png"
 import { getImage } from "astro:assets"
 
 const projects = [
 	{
 		name: 'Enerlinq',
 		url: 'https://enerlinq.com',
-		description: 'Technology and innovation lab. Startup company.',
+		description: 'Technology and innovation startup company.',
 		image: await getImage({src: enerlinqImage, format: 'avif'}),
 	},
 	{
@@ -25,6 +26,12 @@ const projects = [
 		description: 'Create and manage your own raffles for FREE.',
 		image: await getImage({src: sorteosClickImage, format: 'avif'}),
 	},
+	{
+		name: 'Gerardo Ancer portfolio',
+		url: 'https://gerardoancer.com',
+		description: 'Portfolio website for Gerardo Ancer.',
+		image: await getImage({src: gerardoAncerImage, format: 'avif'}),
+	}
 ]
 ---
 

public/images/profile.png src/assets/images/profile.pngpublic/images/profile.png renamed to src/assets/images/profile.png

@@ -13,7 +13,6 @@
   direction: ltr;
 
   & .profile {
-    background-image: url("/images/profile.png");
     background-size: 125%;
     background-position: top center;
     opacity: 90%;