minh-de-rien · minh-de-rien · Jan 25, 2024 · Jan 24, 2024 · Jan 24, 2024 · Jan 25, 2024
diff --git a/public/background.png b/public/background.png
diff --git a/public/fonts/montserrat-alternates-black.ttf b/public/fonts/montserrat-alternates-black.ttf
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -21,8 +21,8 @@ const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->
-<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
+<link rel="preload" href="/fonts/open-sans-regular.woff" as="font" type="font/woff" crossorigin />
+<link rel="preload" href="/fonts/open-sans-bold.woff" as="font" type="font/woff" crossorigin />
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,8 +1,9 @@
 ---
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE } from '../consts';
-import Instagram from './icons/Instagram.astro'
-import GitHub from './icons/Github.astro'
+import Instagram from './icons/Instagram.astro';
+import GitHub from './icons/Github.astro';
+import Magnifying from './icons/Magnifying.astro';
 ---
 
 <header class="sticky top-0 z-40">
@@ -20,23 +21,23 @@ import GitHub from './icons/Github.astro'
 					</a>
 				</div>
 				<div></div>
-				<div class="flex justify-center items-center">Search____________</div>
+				<div class="flex justify-center items-center">____________<Magnifying /></div>
 			</div>
 		</div>
 		<div class="border-b-2 border-navy">
 			<div class="grid grid-cols-3 items-center m-3">
-				<div class="flex justify-center items-center">
+				<div class="flex justify-center items-center text-navy">
 					<a href="/" class="mx-5"><span class="sr-only">Home</span>
 						Home
 					</a>
-					<a href="/" class="mx-5"><span class="sr-only">About</span>
+					<a href="/about" class="mx-5"><span class="sr-only">About</span>
 						About
 					</a>
 				</div>
 				<h1
 					class="flex justify-center text-sm font-semibold text-gray-900 sm:text-xl"
 				>
-					LOGO
+					MDR
 				</h1>
 				<div class="flex justify-center">
 					<a href="/" class="mx-5"><span class="sr-only">Dinning</span>

diff --git a/src/components/icons/Magnifying.astro b/src/components/icons/Magnifying.astro
@@ -0,0 +1,4 @@
+<!-- License: CC Attribution. Made by geakstr: https://github.com/geakstr/entypo-icons -->
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="w-6 h-6 text-current">
+  <path d="M17.545 15.467l-3.779-3.779a6.15 6.15 0 0 0 .898-3.21c0-3.417-2.961-6.377-6.378-6.377A6.185 6.185 0 0 0 2.1 8.287c0 3.416 2.961 6.377 6.377 6.377a6.15 6.15 0 0 0 3.115-.844l3.799 3.801a.953.953 0 0 0 1.346 0l.943-.943c.371-.371.236-.84-.135-1.211zM4.004 8.287a4.282 4.282 0 0 1 4.282-4.283c2.366 0 4.474 2.107 4.474 4.474a4.284 4.284 0 0 1-4.283 4.283c-2.366-.001-4.473-2.109-4.473-4.474z"/>
+</svg>
diff --git a/src/components/widgets/Button.astro b/src/components/widgets/Button.astro
@@ -0,0 +1,17 @@
+---
+const { buttonName, className } = Astro.props;
+---
+
+<button 
+  class:list={["border-2 border-navy m-9 button-shadow text-4xl", 
+  "transition delay-150 hover:bg-navy hover:text-white",
+  className]}
+>
+  {buttonName}
+</button>
+<style>
+  .button-shadow {
+    box-shadow: 10px 10px;
+    color: #141E46;
+  }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,62 +1,31 @@
 ---
-import Layout from '../layouts/BlogPost.astro';
+import Header from '../components/Header.astro'
+import '@fontsource/montserrat-alternates';
 ---
 
-<Layout
-	title="About Me"
-	description="Lorem ipsum dolor sit amet"
-	pubDate={new Date('August 08 2021')}
-	heroImage="/blog-placeholder-about.jpg"
->
-	<p>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-		labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
-		viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam
-		adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus
-		et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus
-		vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque
-		sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
-	</p>
-
-	<p>
-		Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non
-		tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non
-		blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna
-		porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis
-		massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc.
-		Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis
-		bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra
-		massa massa ultricies mi.
-	</p>
-
-	<p>
-		Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam sit amet nisl
-		suscipit. Lacus viverra vitae congue eu consequat ac felis donec. Egestas integer eget aliquet
-		nibh praesent tristique magna sit amet. Eget magna fermentum iaculis eu non diam. In vitae
-		turpis massa sed elementum. Tristique et egestas quis ipsum suspendisse ultrices. Eget lorem
-		dolor sed viverra ipsum. Vel turpis nunc eget lorem dolor sed viverra. Posuere ac ut consequat
-		semper viverra nam. Laoreet suspendisse interdum consectetur libero id faucibus. Diam phasellus
-		vestibulum lorem sed risus ultricies tristique. Rhoncus dolor purus non enim praesent elementum
-		facilisis. Ultrices tincidunt arcu non sodales neque. Tempus egestas sed sed risus pretium quam
-		vulputate. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Fringilla
-		urna porttitor rhoncus dolor purus non. Amet dictum sit amet justo donec enim.
-	</p>
-
-	<p>
-		Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper
-		viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc
-		scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur
-		gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus
-		pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim
-		blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id
-		cursus metus aliquam eleifend mi.
-	</p>
-
-	<p>
-		Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta
-		nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam
-		tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci
-		ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar
-		proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
-	</p>
-</Layout>
+<body>
+	<Header />
+	<main class="mx-16 my-20 text-navy">
+		<h1 class="font-bold text-5xl flex justify-center items-center">Minh de rien</h1>
+		<div class="px-72 pt-4 font-montserrat text-center">
+			<p>
+				Greetings! My name is Minh Ngoc Do. I am a Computer Engineering student currently 
+				crafting her personalized blog. In addition to my technical pursuits, 
+				I'm an enthusiast of the written words.
+			</p>
+			<p>
+				Minh de rien will be my personal guide to leisure in and around the city of Montreal! 
+				This website is designed to be a casual destination for individuals seeking enjoyable 
+				activities that go beyond the typical tourist spots as well as recommendations for lovable 
+				restaurants and cafes. The website aims to enhance your leisure experience by providing 
+				informative articles, captivating visuals and insightful reviews.
+			</p>
+			<p>
+				At its core, Minh de Rien is a reflection of my personal journey through Montreal. 
+				It serves as a digital journal, a living history of my adventures and discoveries 
+				in this dynamic city. Though ideally, it would also serve as a helping hand to fellow 
+				enthusiasts and explorers.
+			</p>
+		</div>
+		<hr class="w-48 h-1 mx-auto my-4 bg-navy border-0 rounded md:my-10">
+	</main>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,8 +1,9 @@
 ---
 import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
+import Button from '../components/widgets/Button.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import '@fontsource/montserrat-alternates';
 ---
 
 <!doctype html>
@@ -12,39 +13,26 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 	</head>
 	<body>
 		<Header title={SITE_TITLE} />
-		<main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-			<p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
-				a personal website, blog, or portfolio with Astro.
-			</p>
-			<p>
-				This template comes with a few integrations already configured in your
-				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
-				React, or Vue to your project.
-			</p>
-			<p>Here are a few ideas on how to get started with the template:</p>
-			<ul>
-				<li>Edit this page in <code>src/pages/index.astro</code></li>
-				<li>Edit the site header items in <code>src/components/Header.astro</code></li>
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-				<li>Check out the included blog posts in <code>src/pages/blog/</code></li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-			</ul>
-			<p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
-					>read the docs
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
-			</p>
-			<p>
-				Looking for a blog template with a bit more personality? Check out <a
-					href="https://github.com/Charca/astro-blog-template"
-					>astro-blog-template
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-			</p>
+		<main class="m-3 grid grid-rows-2 text-navy">
+			<div class="grid grid-cols-3">
+				<h1 class="col-span-2 font-bold text-9xl flex justify-self-start items-center">MINH DE RIEN</h1>
+				<div></div>
+			</div>
+			<div class="grid grid-cols-3 justify-center py-12">
+				<h2 class="col-span-2 font-montserrat text-4xl flex items-center font-navy">
+					An Intimate Collection of Cherished Locations in Montreal
+				</h2>
+				<div>
+					<!-- <div class="w-1 h-5 bg-navy flex"></div> -->
+					<Button className="h-24 w-96" buttonName="EXPLORE" class="p-9"/>
+					<!-- <div class="w-1 h-5 bg-navy"></div> -->
+				</div>
+			</div>
 		</main>
-		<Footer />
 	</body>
 </html>
+<style>
+	body {
+		background-image: url('public/background.png');
+	}
+</style>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -7,6 +7,9 @@ export default {
 				'navy': '#141E46'
 			}
 		},
+		fontFamily: {
+			'montserrat': '"Montserrat Alternates"',
+		}
 	},
 	plugins: [],
 }