🎈 perf: improve icon size without props

carlosjorger · carlosjorger · commit b5830ef94ab2 · 2025-08-05T21:08:29.000-04:00
diff --git a/src/components/AboutMe.astro b/src/components/AboutMe.astro
@@ -4,7 +4,6 @@ import CustomParagraph from '@shared/CustomParagraph.astro';
 import SectionContainer from './shared/SectionContainer.astro';
 // TODO: add a more original description
 // TODO: reduce Final HTML (DOM) size
-// 	   - Remove unnecessary elements
 // 	   - Optimize svgs with svgo
 export interface Props {
 	ABOUT_ME_TITLE: string;
diff --git a/src/components/Experience.astro b/src/components/Experience.astro
@@ -29,7 +29,12 @@ const { HEADER_EXPERIENCE, EXPERIENCE } = Astro.props;
 				<li class=" mb-20 ms-8">
 					<div class="flex flex-row items-center">
 						<div class="absolute start-[-0.9rem] mb-1 overflow-hidden rounded-full border border-teal-200 bg-slate-50 shadow-lg shadow-teal-800/90">
-							<img class="size-7" src={`/images/${job.logoFile}`} alt={job.logoAlt} loading="lazy" />
+							<img
+								class="size-7"
+								src={`/images/${job.logoFile}`}
+								alt={job.logoAlt}
+								loading="lazy"
+							/>
 						</div>
 						<h3 class="reveal-experience-info my-0.5 text-xl font-semibold text-teal-200">
 							{job.ocupation}
diff --git a/src/components/Work/Project.astro b/src/components/Work/Project.astro
@@ -58,13 +58,13 @@ const {
 >
 	<div
 		class:list={[imageSrc]}
-		class="lazy-background w-full aspect-auto overflow-hidden bg-placeholder bg-center bg-no-repeat font-lato shadow-lg shadow-black max-sm:self-center group bg-105% hover:bg-100% transition-[background-size] duration-300 ease-in-out"
+		class="lazy-background group aspect-auto w-full overflow-hidden bg-placeholder bg-105% bg-center bg-no-repeat font-lato shadow-lg shadow-black transition-[background-size] duration-300 ease-in-out hover:bg-100% max-sm:self-center"
 	>
 		<div
 			class="h-full bg-[#453662c5] p-1 backdrop-brightness-[0.4] backdrop-grayscale transition-all duration-300 ease-in-out hover:bg-teal-600/0 hover:backdrop-grayscale-0"
 		>
 			<article
-				class="m-0 flex min-h-72 w-11/12 flex-col items-start justify-between p-5 transition-[transform] duration-300 max-sm:w-full max-sm:justify-evenly max-sm:p-4 group-hover:scale-105 max-sm:group-hover:scale-105"
+				class="m-0 flex min-h-72 w-11/12 flex-col items-start justify-between p-5 transition-[transform] duration-300 group-hover:scale-105 max-sm:w-full max-sm:justify-evenly max-sm:p-4 max-sm:group-hover:scale-105"
 			>
 				<header
 					class="m-1 text-xl font-extrabold text-teal-200 max-sm:text-[1.65rem]"
@@ -73,20 +73,18 @@ const {
 						{title}
 					</h3>
 				</header>
-				<div
-					class="m-1 pb-0 text-[#99F9F9] drop-shadow-[0_15px_20px_black]"
-				>
-					<CustomParagraph
-						textColor="text-slate-50"
-						set:html={description}
-						class="text-xl"
-					/>
-				</div>
+				<CustomParagraph
+					textColor="text-slate-50"
+					set:html={description}
+					class="m-1 pb-0 text-xl text-[#99F9F9] drop-shadow-[0_15px_20px_black]"
+				/>
 				<div
 					class:list={Astro.props.tagsClass}
 					class="flex w-full justify-between gap-2"
 				>
-					<ul class="flex max-sm:grid max-sm:grid-cols-6 max-sm:gap-2 flex-row gap-3">
+					<ul
+						class="flex flex-row gap-3 max-sm:grid max-sm:grid-cols-6 max-sm:gap-2"
+					>
 						{
 							tags.map((tag) => (
 								<li
diff --git a/src/components/icons/IconAddress.astro b/src/components/icons/IconAddress.astro
@@ -1,15 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-address-book"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z"
-	></path><path d="M10 16h6"></path><path
-		d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M4 8h3"
-	></path><path d="M4 12h3"></path><path d="M4 16h3"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-address-book" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="M20 6v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2M10 16h6"/><path d="M11 11a2 2 0 1 0 4 0 2 2 0 1 0-4 0M4 8h3m-3 4h3m-3 4h3"/></svg>
diff --git a/src/components/icons/IconAngular.astro b/src/components/icons/IconAngular.astro
@@ -3,8 +3,7 @@
 	width="242"
 	height="256"
 	fill="none"
-	viewBox="0 0 242 256"
-	{...Astro.props}
+	{...Astro.props} 
 	><g clip-path="url(#a)"
 		><mask
 			id="b"
diff --git a/src/components/icons/IconCode.astro b/src/components/icons/IconCode.astro
@@ -1,13 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-code"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M7 8l-4 4l4 4"></path><path d="M17 8l4 4l-4 4"></path><path
-		d="M14 4l-4 16"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-code" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="m7 8-4 4 4 4m10-8 4 4-4 4M14 4l-4 16"/></svg>
diff --git a/src/components/icons/IconGithub.astro b/src/components/icons/IconGithub.astro
@@ -1,9 +1 @@
-<svg
-	viewBox="0 0 256 256"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	preserveAspectRatio="xMidYMid"
-	><path
-		d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z"
-	></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403"/></svg>
diff --git a/src/components/icons/IconGithubLink.astro b/src/components/icons/IconGithubLink.astro
@@ -1,13 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-brand-github"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"
-	></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-brand-github" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21"/></svg>
diff --git a/src/components/icons/IconHome.astro b/src/components/icons/IconHome.astro
@@ -1,14 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-home"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M5 12l-2 0l9 -9l9 9l-2 0"></path><path
-		d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path><path
-		d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-home" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="M5 12H3l9-9 9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/><path d="M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6"/></svg>
diff --git a/src/components/icons/IconLinkedin.astro b/src/components/icons/IconLinkedin.astro
@@ -1,9 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	preserveAspectRatio="xMidYMid"
-	viewBox="0 0 256 256"
-	><path
-		fill="currentColor"
-		d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013ZM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009-.002-12.157 9.851-22.014 22.008-22.016 12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"
-	></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256"><path fill="currentColor" d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.91 39.91 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009s9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16ZM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"/></svg>
diff --git a/src/components/icons/IconMail.astro b/src/components/icons/IconMail.astro
@@ -1,23 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-mail-opened-filled"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M14.872 14.287l6.522 6.52a2.996 2.996 0 0 1 -2.218 1.188l-.176 .005h-14a2.995 2.995 0 0 1 -2.394 -1.191l6.521 -6.522l2.318 1.545l.116 .066a1 1 0 0 0 .878 0l.116 -.066l2.317 -1.545z"
-		stroke-width="0"
-		fill="currentColor"></path><path
-		d="M2 9.535l5.429 3.62l-5.429 5.43z"
-		stroke-width="0"
-		fill="currentColor"></path><path
-		d="M22 9.535v9.05l-5.43 -5.43z"
-		stroke-width="0"
-		fill="currentColor"></path><path
-		d="M12.44 2.102l.115 .066l8.444 5.629l-8.999 6l-9 -6l8.445 -5.63a1 1 0 0 1 .994 -.065z"
-		stroke-width="0"
-		fill="currentColor"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-mail-opened-filled" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path fill="currentColor" stroke="none" d="m14.872 14.287 6.522 6.52a3 3 0 0 1-2.218 1.188L19 22H5a3 3 0 0 1-2.394-1.191l6.521-6.522 2.318 1.545.116.066a1 1 0 0 0 .878 0l.116-.066zM2 9.535l5.429 3.62L2 18.585zm20 0v9.05l-5.43-5.43zm-9.56-7.433.115.066 8.444 5.629-8.999 6-9-6 8.445-5.63a1 1 0 0 1 .994-.065z"/></svg>
diff --git a/src/components/icons/IconTwitter.astro b/src/components/icons/IconTwitter.astro
@@ -1,13 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 24 24"
-	fill="none"
-	stroke="currentColor"
-	stroke-width="2"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M4 4l11.733 16h4.267l-11.733 -16z"></path><path
-		d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="m4 4 11.733 16H20L8.267 4zm0 16 6.768-6.768m2.46-2.46L20 4"/></svg>
diff --git a/src/components/icons/IconUser.astro b/src/components/icons/IconUser.astro
@@ -1,13 +1 @@
-<svg
-	xmlns="http://www.w3.org/2000/svg"
-	class="icon icon-tabler icon-tabler-user"
-	viewBox="0 0 24 24"
-	stroke-width="2"
-	stroke="currentColor"
-	fill="none"
-	stroke-linecap="round"
-	stroke-linejoin="round"
-	><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
-		d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path
-		d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="icon icon-tabler icon-tabler-user" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z"/><path d="M8 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
diff --git a/svgo.config.cjs b/svgo.config.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+    multipass: true,     // Multiple optimization passes
+    plugins: [
+      {
+        name: 'preset-default',
+        params: {
+          overrides: {
+            removeViewBox: false,  // Keep viewBox for responsiveness
+            cleanupIDs: false      // Avoid breaking JS/CSS references
+          }
+        }
+      },
+      'removeDimensions', // Replace width/height with viewBox
+      'sortAttrs',       // Alphabetize attributes for better compression
+      'removeStyleElement', // Remove embedded CSS (move to external files)
+      'removeScriptElement' // Remove embedded JS (security + size)
+    ]
+  };
