✨ feat: remove space betwean section

Author: carlosjorger

src/components/AboutMe.astro

@@ -3,7 +3,7 @@ import Subtitle from './shared/Subtitle.astro';
 import CustomParagraph from './shared/CustomParagraph.astro';
 ---
 
-<section id="aboutMe" class="h-screen max-sm:h-[100dvh]">
+<section id="aboutMe" class="h-screen max-sm:mt-12 max-sm:h-full">
 	<div class="flex h-[90%] flex-col justify-center break-words p-2">
 		<header class="reveal pb-2">
 			<Subtitle left>About me</Subtitle>
@@ -18,11 +18,10 @@ import CustomParagraph from './shared/CustomParagraph.astro';
 			vue, html, css.
 		</CustomParagraph>
 		<a
-			class="reveal mt-2 rounded-md border-2 border-teal-300 px-8 py-4 text-center text-2xl text-teal-300 transition-colors duration-500 ease-in hover:bg-teal-300 hover:text-[--default-background-color]"
+			class="reveal mt-2 rounded-md border-2 border-teal-300 px-8 py-4 text-center text-2xl text-teal-300 transition-colors duration-500 ease-in hover:bg-teal-300 hover:text-[--default-background-color] max-sm:mt-12"
 			href="/pdfs/resume.pdf"
 			target="_blank"
-			aria-label="Download Curriculum Vitae pdf"
-			download="resume.pdf">Curriculum Vitae</a
+			aria-label="Download Curriculum Vitae pdf">Curriculum Vitae</a
 		>
 	</div>
 </section>

src/components/Footer/Footer.astro

@@ -6,9 +6,9 @@ import CustomParagraph from '../shared/CustomParagraph.astro';
 ---
 
 <footer>
-	<div class="m-1 grid h-screen max-sm:h-[100dvh]">
+	<div class="m-1 grid h-screen max-sm:h-[70dvh]">
 		<div id="contact" class="flex flex-col justify-center">
-			<section class="z-0 mt-8 w-1/2 p-2 max-sm:w-[90%]">
+			<section class="z-0 mt-8 w-1/2 p-2 max-sm:mt-0 max-sm:w-[90%]">
 				<Subtitle center>Contact</Subtitle>
 				<div class="reveal mx-0 my-3 text-center">
 					<CustomParagraph>
@@ -44,7 +44,7 @@ import CustomParagraph from '../shared/CustomParagraph.astro';
 		<div
 			class="flex flex-col justify-center font-lato text-[var(--default-font-color)]"
 		>
-			<p class="reveal mx-auto my-0 mb-12 text-center text-3xl">
+			<p class="last-reveal mx-auto my-0 mb-12 text-center text-3xl">
 				<strong class="inline italic">© 2022 Carlos Jorge</strong>
 				<br />
 				<span>

src/pages/index.astro

@@ -20,7 +20,7 @@ import Presentation from '../components/Presentation.astro';
 		}
 	});
 </script>
-<!-- TODO: remove space betwean section --><!-- TODO: Add skills -->
+<!-- TODO: Add skills -->
 <Layout title="Carlos Jorge's personal portfolio website">
 	<Header />
 	<main>

src/styles/styles.css

@@ -49,6 +49,11 @@ a {
 	animation-timeline: view();
 	animation-range: entry 20% cover 30%;
 }
+.last-reveal {
+	animation: reveal-animation linear both;
+	animation-timeline: view();
+	animation-range: entry 10% cover 20%;
+}
 @keyframes reveal-animation {
 	from {
 		opacity: 0;