Creación del proyecto con Vanilla

Author: repollodev

.gitignore

@@ -1 +0,0 @@
-utils/*

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "cSpell.words": [
+        "crismon",
+        "evergarden",
+        "Evergarden",
+        "wikipedia",
+        "wikiwand"
+    ],
+    "css.styleSheets": [
+        "source/styles/**/*.css",
+    ]
+}

README.md

@@ -1,24 +1,53 @@
 <p align='center'>
-    <img alt='Violet Evergarden Wiki - FavIcon' src='./source/assets/favicon.svg' width='100' height='100'/>
+    <img alt='Violet Evergarden Wiki - FavIcon' src='./statuc/favicon.svg' width='100' height='100'/>
 </p>
 <h1 align='center'>Violet Evergarden Wiki</h1>
 <p align='center'>
-    <img alt='HTML5 icon' src='https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white'/>
-    <img alt='CSS3 icon' src='https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white'/>
-    <img alt='JavaScript icon' src='https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E'/>
+    <a href='https://www.notion.so/Violet-Evergarden-Wiki-129fa5acd16a80c89414f9d433e30ee0?pvs=4'>
+        <img alt='Notion Badge' src='https://img.shields.io/badge/documentación-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white'/>
+    </a>
+    <a href='https://repollodev.github.io/Violet-Evergarden-Wiki'>
+        <img alt='Browser Badge' src='https://img.shields.io/badge/Ver en vivo-FF7139?style=for-the-badge&logo=Firefox-Browser&logoColor=white'/>
+    </a>
+</p>
+
+<p align='center'>
+    <img src="./static/photos/capture-landing.png" width="800"/>
 </p>
 
 > 🚧 Desarrollador trabajando ...
 
-**Página web temática dedicada** exlusivamente con contenido sobre la serie anime _Violet Evergarden_. Una Wiki con basta información sobre los eventos y personajes de la serie, explora y sorprendete por detalles que suceden en segundo plano.
+**Página web temática temática** de la serie anime _Violet Evergarden_. Basta información sobre los eventos y personajes de la serie, explora y sorpréndete por detalles que suceden en segundo plano.
 
-Un proyecto FrontEnd para aplicar lo aprendido en la materia de programación web II, utilizando únicamente tecnologías _vanilla_ y algunas librerías para agilizar el proceso de desarrollo.
+> [!IMPORTANT]
+> Este proyecto es parte del curso de Programación web 2 utilizando únicamente **tecnologías vanilla**, todo para tener a _flex_ y _grid_ en acción.
 
 ## 🎭 Inspiración
 
-Sorprendentemente, la serie de _Violet Evergarden_ no tiene una página web dedicada a su contenido, al menos no en español.
-
-Una Wiki de una serie no es novedad, ya que existen várias plataformas que coleccionan información sobre series animadas como [Fandom.com](https://www.fandom.com/) o incluso la propia [Wikipedia](https://es.wikipedia.org/), pero todas ellas **difunden información de manera plana**, a comparación de páginas completamente dedicadas a una franquicia como el de [Bluey](https://espanol.bluey.tv/ver/).
+Una Wiki de una serie no es novedad, ya que existen páginas como [Fandom.com](https://www.fandom.com/) o incluso la propia [Wikipedia](https://es.wikipedia.org/) que almacenan información series. Pero siempre lo hacen de forma muy plana y aburrida.
+
+<table>
+    <tr>
+        <img src="https://assets.recogmedia.net/1/139/Entry_Uploads/288186-thumb.jpg"/>
+    </tr>
+    <tr>
+        <td>
+            <img src="https://img.gadgethacks.com/img/80/62/63475360070019/0/make-your-own-simpsons-avatar-for-online-profiles.1280x600.jpg"/>
+        </td>
+        <td>
+            <img src="https://charrad.wordpress.com/wp-content/uploads/2012/05/screen-shot-2012-05-12-at-10-51-33-am.png"/>
+        </td>
+    </tr>
+<table>
+
+Las páginas webs que explotan una temática para aplicarla
+en su deseño me parece muy genial, desde páginas oficiales
+o conceptos.
+
+Tener algo especializado en vez de solo un
+_layout_ de una plataforma con puro texto plano me
+parece un gran trabajo para los diseñadores y los
+programadores que hicieron eso posible.
 
 ## 🌐 Páginas y contenido
 
@@ -32,14 +61,21 @@ El proyecto tiene varias páginas que contienen información sobre la serie, cad
 
 ## 🧰 Documentación
 
-En el carpeta `./docs` se encuentra toda la documentación del proceso que se realizo para desarrollar el proyecto, desde la parte de diseño, maquetación e implementación.
-
-1. [Conceptualización](./docs/1_Conceptalizacion.md)
-2. [Entorno de trabajo](./docs/2_Entorno_de_trabajo.md)
-3. [Despliegue](./docs/3_Despliegue.md)
-4. [La paleta perfecta](./docs/4_La_paleta_perfecta.md)
-5. [Creando contenido](./docs/5_Creando_contenido.md)
-6. [Inspiración](./docs/7_Inspiracion.md)
+La Documentación se encuentra publicada en [Notion](https://www.notion.so),
+la misma describe el proceso de desarrollo del
+proyecto desde la propia concepción hasta
+el despliegue para que puede ser visto en internet.
+
+1. [🥸 Recopilando información](https://dorian-pike-610.notion.site/1-Recopilando-informaci-n-0da29f9724df444fa2d260d50ccbf43f)
+2. [📊 Estructura del proyecto](https://dorian-pike-610.notion.site/2-Estructura-del-proyecto-c1edcf7502cd4fe3ae456cad5ff310bb)
+3. [🖋️ Conceptualización](https://dorian-pike-610.notion.site/129fa5acd16a809ab23fe97b72aaa819?v=690607fa82bd44749dc823f498274cdc)
+4. [🎨 La paleta perfecta](https://dorian-pike-610.notion.site/4-La-paleta-perfecta-129fa5acd16a80b49798f797d526945d)
+5. [😤 Inspiración](https://dorian-pike-610.notion.site/5-Inspiraci-n-129fa5acd16a80378a88c4ccffa8a09a)
+6. [📦 Recursos](https://dorian-pike-610.notion.site/6-Recursos-129fa5acd16a80f69952f2dcfb96b7b1)
+7. [🐧 Diseñando](https://dorian-pike-610.notion.site/7-Dise-ando-129fa5acd16a8041acc7fc540e58d889)
+8. [🪟 Layout](https://dorian-pike-610.notion.site/8-Layout-129fa5acd16a806eb351f2c71f361e54)
+9. [💻 Programando páginas](https://dorian-pike-610.notion.site/9-Programando-p-ginas-129fa5acd16a805ea27acf987eb5d31b)
+10. [🚀 Despliegue](https://dorian-pike-610.notion.site/10-Despliegue-129fa5acd16a803bb797e97f56f9153c)
 
 ## 🚀 Correr el proyecto