✨ feat: add group tailwind classes to work

Author: carlosjorger

src/components/AboutMe.astro

@@ -2,7 +2,7 @@
 import Subtitle from '@shared/Subtitle.astro';
 import CustomParagraph from '@shared/CustomParagraph.astro';
 import SectionContainer from './shared/SectionContainer.astro';
-
+// TODO: add a more original description
 export interface Props {
 	ABOUT_ME_TITLE: string;
 	ABOUT_ME_DESCRIPTION: string;

src/components/App.astro

@@ -15,7 +15,6 @@ const { currentLocale } = Astro;
 const i18n = getI18N({ currentLocale });
 ---
 
-<!-- TODO: Add skills -->
 <Layout {...i18n}>
 	<Header {...i18n} {...Astro.props} />
 	<main>

src/components/Experience.astro

@@ -28,7 +28,7 @@ const { HEADER_EXPERIENCE, EXPERIENCE } = Astro.props;
 			EXPERIENCE.map((job) => (
 				<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-300 shadow-lg shadow-teal-200">
+						<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} />
 						</div>
 						<h3 class="reveal-experience-info my-0.5 text-xl font-semibold text-teal-200">

src/components/Work/Project.astro

@@ -58,13 +58,13 @@ const {
 >
 	<div
 		class:list={[imageSrc]}
-		class="lazy-background h-full overflow-hidden bg-placeholder bg-cover bg-center bg-no-repeat font-lato shadow-lg shadow-black max-sm:self-center"
+		class="lazy-background h-full 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"
 	>
 		<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 [&>*:first-child]:hover:scale-105 max-sm:[&>*:first-child]:hover:scale-105"
+			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 h-full w-11/12 flex-col items-start justify-between p-4 transition-[transform] duration-300 max-sm:w-full max-sm:justify-evenly max-sm:p-4 max-sm:px-3 max-sm:py-3"
+				class="m-0 flex min-h-64 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-5 max-sm:px-4 max-sm:py-4 group-hover:scale-105 max-sm:group-hover:scale-105"
 			>
 				<header
 					class="m-1 text-xl font-extrabold text-teal-200 max-sm:text-[1.65rem]"
@@ -103,7 +103,7 @@ const {
 					</ul>
 					<div class="flex flex-row self-start">
 						<IconLinkContainer
-							class="h-6 w-6"
+							class="h-7 w-7"
 							href={githubLink}
 							title={anchorLabel}
 						>
@@ -113,7 +113,7 @@ const {
 						{
 							website !== undefined && (
 								<IconLinkContainer
-									class="h-6 w-6"
+									class="h-7 w-7"
 									href={website}
 									title={anchorLabel}
 								>

src/components/Work/Work.astro

@@ -11,7 +11,6 @@ import IconTypescript from '@components/icons/IconTypescript.astro';
 
 export interface Props {
 	PROJECTS_TITLE: string;
-	PROJECTS_TITLE_AFTER_BR: string;
 	PROYECTS: {
 		CUVIMAKER: ProjectI18n;
 		RUSTY_COPIER: ProjectI18n;
@@ -70,7 +69,7 @@ const TAGS = {
 		icon: IconTypescript,
 	},
 };
-const { PROJECTS_TITLE, PROJECTS_TITLE_AFTER_BR, PROYECTS } = Astro.props;
+const { PROJECTS_TITLE, PROYECTS } = Astro.props;
 
 const projects = [
 	{
@@ -107,11 +106,10 @@ const projects = [
 	<div class="flex flex-col p-2">
 		<header class="reveal my-5">
 			<Subtitle left>
-				{PROJECTS_TITLE}<br />
-				{PROJECTS_TITLE_AFTER_BR}
+				{PROJECTS_TITLE}
 			</Subtitle>
 		</header>
-		<div class="grid grid-cols-2 gap-2 max-lg:grid-cols-1">
+		<div class="grid grid-cols-2 gap-3 max-2xl:grid-cols-1">
 			{
 				projects.map((project, index) => (
 					<Project

src/components/shared/Subtitle.astro

@@ -9,7 +9,7 @@ const { center = false, left = false, right = false } = Astro.props;
 ---
 
 <h2
-	class="my-2 text-5xl font-bold tracking-wide text-[var(--default-font-color)] max-sm:text-3xl"
+	class="my-2.5 text-5xl font-bold tracking-wide text-[var(--default-font-color)] max-sm:text-3xl"
 	class:list={[
 		{ 'text-left': left, 'text-center': center, 'text-right': right },
 		Astro.props.class,

src/i18n/en.json

@@ -8,8 +8,7 @@
 	"INTRO_TITLE_AFTER_BR2": "",
 	"INTRO_SUBTITLE": "Welcome to my personal portfolio!",
 	"INTRO_DESCRIPTION": "Cuban computer scientist from <b>Havana University</b>. Currently working as full-stack engineer building <b>.net</b> and <b>Vuejs</b> applications.",
-	"PROJECTS_TITLE": "Some projects",
-	"PROJECTS_TITLE_AFTER_BR": "I've made",
+	"PROJECTS_TITLE": "Projects",
 	"ABOUT_ME_TITLE": "About",
 	"ABOUT_ME_DESCRIPTION": "Hello, My name is <strong>Carlos Jorge</strong>. I'm a full-stack engineer that enjoy coding on and off the work. I started working as a backend developer in 2020 using <b>.net</b> technologies and <b>sql server</b>.",
 	"ABOUT_ME_DESCRIPTION_SECOND_PARAGRAPH": "Currently, I'm also working on frontend technologies like <b>angular</b>, <b>vue</b>, <b>html</b>, <b>css</b>.",

src/i18n/es.json

@@ -8,8 +8,7 @@
 	"INTRO_TITLE_AFTER_BR2": "",
 	"INTRO_SUBTITLE": "Y este es mi portafolio!",
 	"INTRO_DESCRIPTION": "Soy un científico de la computación graduado en la <b>Universidad de la Habana</b>. Actualmente trabajo como desarrollador <i>full-stack</i> creando aplicaciones de <b>.net</b> y <b>Vuejs</b>. En mis tiempos libres juego un poco con <b>Astro</b> y <b>Rust</b>  ;)",
-	"PROJECTS_TITLE": "Algunos proyectos",
-	"PROJECTS_TITLE_AFTER_BR": "Que he echo",
+	"PROJECTS_TITLE": "Proyectos",
 	"ABOUT_ME_TITLE": "Acerca de mí",
 	"ABOUT_ME_DESCRIPTION": "Hola, Mi nombre es <strong>Carlos Jorge</strong>. Soy un desarrollador <i>full-stack</i> que disfura programar dentro y fuera del trabajo. Empecé a trabajar como desarrollador <i>backend</i> usando tecnologías <b>.net</b> y <b>sql server</b>.",
 	"ABOUT_ME_DESCRIPTION_SECOND_PARAGRAPH": "Actualmente. También trabajo con tecnologías <i>frontend</i> como <b>angular</b>, <b>vue</b>, <b>html</b>, <b>css</b>.",

tailwind.config.cjs

@@ -51,6 +51,11 @@ module.exports = {
 		fontFamily: {
 			lato: ['Lato', 'sans-serif'],
 		},
+		backgroundSize: {
+			'cover': 'cover',
+			'105%': '105%',
+			'100%': '100%',
+		},
 		keyframes: {
 			'show-presentation': {
 				'0%': {