Updates, header responsive and new photos

Gerartam · Jul 31, 2024 · 4273def · 4273def
1 parent 7e5fd58
commit 4273def
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 16 deletions.
diff --git a/src/assets/cusenier.jpeg b/src/assets/cusenier.jpeg
diff --git a/src/assets/cusenier2.jpeg b/src/assets/cusenier2.jpeg
diff --git a/src/assets/insomnia.jpg b/src/assets/insomnia.jpg
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -0,0 +1,28 @@
+---
+import perImage2 from '../assets/cusenier2.jpeg';
+import perImage from '../assets/cusenier.jpeg';
+import { Image } from 'astro:assets';
+---
+
+<div class="flex md:flex-row flex-col">
+    <div class="bg-gray-900 text-white md:w-1/2">
+        <Image src={perImage} alt="..." class="bg-cover h-full"></Image>
+    </div>
+    <div class="md:w-1/2 w-full h-auto bg-white">
+        <h1 class="text-3xl text-center my-7">Paisajes</h1>
+        <p class="mx-6 text-justify text-sm pb-12">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus minima dignissimos voluptates delectus eveniet aut! Minima nam et nisi maiores quia beatae enim impedit. Harum beatae rem cumque magnam cum.	
+        </p>
+    </div>
+</div>
+<div class="flex md:flex-row flex-col">
+    <div class="bg-gray-900 text-white md:w-1/2">
+        <Image src={perImage2} alt="..." class="bg-cover h-full"></Image>
+    </div>
+    <div class="md:w-1/2 w-full h-auto bg-white">
+        <h1 class="text-3xl text-center my-7">Paisajes</h1>
+        <p class="mx-6 text-justify text-sm pb-12">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus minima dignissimos voluptates delectus eveniet aut! Minima nam et nisi maiores quia beatae enim impedit. Harum beatae rem cumque magnam cum.	
+        </p>
+    </div>
+</div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,9 +1,10 @@
-<header class="flex justify-between py-10 border-b-2 border-gray-700 mx-40 text-gray-700">
-    <div class="text-5xl font-light">
+<header class="fixed flex flex-col sm:flex-row justify-between py-6 w-full text-white backdrop-brightness-50 backdrop-blur-sm shadow-lg px-14 lg:px-36 top-0">
+    <div class="text-4xl lg:text-5xl font-light justify-center sm:justify-normal text-center">
         <h1>Gerardo Tamayo</h1>
     </div>
-    <div class="flex flex-row pt-4 gap-10 text-2xl font-light">
-        <h1>About</h1>
-        <h1>Contact</h1>
+    <div class="flex flex-row pt-4 gap-10 text-lg lg:text-2xl font-light justify-center sm:justify-normal">
+        <button class="hover:text-red-800">About</button>
+        <button class="hover:text-red-800">Contact</button>
+        <button class="hover:text-red-800">Work</button>
     </div>
 </header>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -20,7 +20,7 @@ import Header from '../components/Header.astro';
 	</head>
 	<body>
 		<Header/>
-		<slot />
+		<slot/>
 	</body>
 </html>
 <style is:global>
@@ -37,7 +37,7 @@ import Header from '../components/Header.astro';
 	}
 	html {
 		font-family: system-ui, sans-serif;
-		background: #cbcbcb;
+		background: #ffffff;
 		background-size: 224px;
 	}
 	code {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -2,20 +2,22 @@
 import Layout from '../layouts/Layout.astro';
 import perImage from '../assets/paisaje1.jpg';
 import { Image } from 'astro:assets';
+import Card from '../components/Card.astro';
 ---
 
 <Layout title="Gerardo Tamayo">
 	<main class="justify-between items-center">
-		<div class="flex md:flex-row flex-col">
-			<div class="mt-10 bg-gray-900 text-white md:w-1/2">
-				<Image src={perImage} alt="..." class="rounded-2xl bg-cover"></Image>
-			</div>
-			<div class="md:mt-10 md:w-1/2 w-full bg-white">
-				<h1 class="text-3xl text-center my-7">Pasisajes</h1>
-				<p class="mx-6 text-justify">
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus minima dignissimos voluptates delectus eveniet aut! Minima nam et nisi maiores quia beatae enim impedit. Harum beatae rem cumque magnam cum.	
-				</p>
+		<div class="h-full">
+			<div class="bg-center">
+				<Image src={perImage} alt="..." class="bg-cover h-max"></Image>
 			</div>
 		</div>
+		<div class="h-[700px] text-center">
+			<h1 class="text-3xl my-20 mx-16">Sobre mi</h1>
+			<p class="mx-24 md:mx-64">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit autem modi veniam, cum ipsa sed blanditiis alias cupiditate. Nostrum obcaecati odio id deleniti voluptate eius facilis praesentium voluptatum aliquid aliquam.</p>
+		</div>
+
+		<Card/>
+		<Card/>
 	</main>
 </Layout>