add basic presentation

astro.config.mjs

@@ -1,8 +1,11 @@
 import { defineConfig } from 'astro/config';
 
-import react from "@astrojs/react";
+import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()]
+  integrations: [react()],
-});
+  experimental: {
+    assets: true,
+  },
+});

src/assets/style/global.css

@@ -4,6 +4,9 @@
 html {
   background-color: var(--prj-bg);
   color: var(--prj-text);
+
+  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
+  font-size: calc(15px + 0.390625vw);
 }
 
 body {

src/assets/style/utils.css

@@ -1,9 +1,42 @@
+:root {
+  --prj-spacing-1: 0.25rem;
+  --prj-spacing-2: 0.5rem;
+  --prj-spacing-3: 1rem;
+  --prj-spacing-4: 2rem;
+  --prj-spacing-5: 3rem;
+}
+
 .hstack {
   display: flex;
   gap: 1rem;
   align-items: center;
 }
 
+.gap-1 {
+  gap: var(--prj-spacing-1);
+}
+
+.gap-2 {
+  gap: var(--prj-spacing-2);
+}
+
+.gap-3 {
+  gap: var(--prj-spacing-3);
+}
+
+.gap-4 {
+  gap: var(--prj-spacing-4);
+}
+
+.gap-5 {
+  gap: var(--prj-spacing-5);
+}
+
 .list-unstyle {
   list-style: none;
 }
+
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
+/// <reference types="astro/client-image" />

src/pages/index.astro

@@ -1,14 +1,50 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';
+import { Image } from 'astro:assets';
+
+import portrait from '../assets/images/portrait.jpg';
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title="aleidk">
+  <section>
+    <div class="hstack gap-5">
+      <Image
+        id="portrait"
+        src={portrait}
+        alt="portrait of Alexander Navarro"
+        loading="eager"
+        width={200}
+      />
+      <h1>Alexander Navarro</h1>
+    </div>
 
-		<h1>Welcome to <span class="text-gradient">My Page :D</span></h1>
+    <p class="text-justify">
-		<p class="instructions">
+      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
-			To get started, open the directory <code>src/pages</code> in your project.<br />
+      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
-			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
-		</p>
+      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
+      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
+      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
+      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
+      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
+      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
+      ut ea consectetur et est culpa et culpa duis.
+    </p>
+  </section>
 </Layout>
 
+<style>
+  #portrait {
+    border-radius: 50%;
+    border: 5px solid var(--prj-text);
+  }
+
+  h1 {
+    font-size: 3rem;
+  }
+
+  p {
+    margin-top: var(--prj-spacing-3);
+  }
+</style>