diff --git a/astro.config.mjs b/astro.config.mjs index 0123017..413fc03 100644 --- a/astro.config.mjs +++ b/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()] -}); \ No newline at end of file + integrations: [react()], + experimental: { + assets: true, + }, +}); diff --git a/src/assets/images/portrait.jpg b/src/assets/images/portrait.jpg new file mode 100644 index 0000000..bedf1c5 Binary files /dev/null and b/src/assets/images/portrait.jpg differ diff --git a/src/assets/style/global.css b/src/assets/style/global.css index bc77f66..d582740 100644 --- a/src/assets/style/global.css +++ b/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 { diff --git a/src/assets/style/utils.css b/src/assets/style/utils.css index e0d178c..a46ade9 100644 --- a/src/assets/style/utils.css +++ b/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; +} diff --git a/src/env.d.ts b/src/env.d.ts index acef35f..4170bce 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1,2 +1,2 @@ /// -/// +/// diff --git a/src/pages/index.astro b/src/pages/index.astro index 941cff6..960b9e7 100644 --- a/src/pages/index.astro +++ b/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'; --- - + +
+
+ portrait of Alexander Navarro +

Alexander Navarro

+
-

Welcome to My Page :D

-

- To get started, open the directory src/pages in your project.
- Code Challenge: Tweak the "Welcome to Astro" message above. -

+

+ Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim + labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. + Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum + 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. +

+
+