Merge pull request #11 from raulfdeztdo:development

Development
raulfdeztdo · May 15, 2024 · 01c8778 · 01c8778
2 parents 989bab3 + 7f7302d
commit 01c8778
Show file tree

Hide file tree

Showing 13 changed files with 63 additions and 41 deletions.
diff --git a/assets/data/data_en.json b/assets/data/data_en.json
@@ -57,13 +57,21 @@
         }
     ],
     "experience": [
+        {
+            "icon": "box-select",
+            "title": "Emais Grupo",
+            "subtitle": "Backend Developer (Remote)",
+            "description": "Development with PHP and Symfony of internal company projects. Using docker, git and jira for teamwork and project management",
+            "image": "/images/companies/emais.webp",
+            "dates": ["May 2024 - Actualidad"]
+        },
         {
             "icon": "box-select",
             "title": "ITGallery SLU",
             "subtitle": "Full Stack Developer (Remote)",
             "description": "Experience in developing and maintaining web projects in PHP, creating APIs with Laravel, customizing templates in Shopify using Liquid and developing Python scripts. Outstanding integration of multiple third-party APIs. Professional use of Bitbucket and Docker for remote work, collaboration in agile teams under SCRUM methodology and project management with Jira",
             "image": "/images/companies/itg.webp",
-            "dates": ["Ago 2022 - Actualidad"]
+            "dates": ["Ago 2022 - May 2024"]
         },
         {
             "icon": "box-select",

diff --git a/assets/data/data_es.json b/assets/data/data_es.json
@@ -57,13 +57,21 @@
         }
     ],
     "experience": [
+        {
+            "icon": "box-select",
+            "title": "Emais Grupo",
+            "subtitle": "Desarrollador Backend (En remoto)",
+            "description": "Desarrollo con PHP y Symfony de proyectos internos de la empresa. Uso de docker, git y jira para el trabajo en equipo y gestión de proyectos",
+            "image": "/images/companies/emais.webp",
+            "dates": ["May 2024 - Actualidad"]
+        },
         {
             "icon": "box-select",
             "title": "ITGallery SLU",
             "subtitle": "Desarrollador Full Stack (En remoto)",
             "description": "Experiencia en el desarrollo y mantenimiento de proyectos web en PHP, creación de APIs con Laravel, personalización de plantillas en Shopify mediante Liquid y desarrollo de scripts en Python. Destacada integración de múltiples APIs de terceros. Uso profesional de Bitbucket y Docker para trabajo remoto, colaboración en equipos ágiles bajo metodología SCRUM y gestión de proyectos con Jira",
             "image": "/images/companies/itg.webp",
-            "dates": ["Ago 2022 - Actualidad"]
+            "dates": ["Ago 2022 - May 2024"]
         },
         {
             "icon": "box-select",

diff --git a/assets/images/companies/emais.webp b/assets/images/companies/emais.webp
diff --git a/assets/images/favicon/safari-pinned-tab.svg b/assets/images/favicon/safari-pinned-tab.svg
diff --git a/assets/scripts.js b/assets/scripts.js
@@ -1,13 +1,10 @@
+var path = window.location.pathname;
+var htmlTag = document.documentElement;
 
-window.onload = function() {
-    var path = window.location.pathname;
-    var htmlTag = document.documentElement;
-
-    if (path === "/") {
-        htmlTag.lang = "es";
-    } else if (path === "/en") {
-        htmlTag.lang = "en";
-    }
+if (path.startsWith("/en")) {
+    htmlTag.lang = "en";
+} else {
+    htmlTag.lang = "es";
 }
 
 // Obtenemos los botones de cambio de idioma
@@ -76,12 +73,23 @@ function initializeDarkMode() {
 
 document.head.innerHTML += `
     <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon//favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon//favicon-16x16.png">
-    <link rel="manifest" href="/images/favicon//site.webmanifest">
-    <link rel="mask-icon" href="/images/favicon//safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/images/favicon/site.webmanifest">
+    <link rel="mask-icon" href="/images/favicon/apple-touch-icon.png" color="#5bbad5">
+    <link rel="canonical" href="https://raulfdez.dev">
     <meta name="msapplication-TileColor" content="#000000">
     <meta name="theme-color" content="#000000">
+    <meta property=”og:title” content=”Portfolio RFT”/
+    <meta property=”og:description” content=”Portfolio personal de Raúl Fernández, desarrollador de software”/>
+    <meta property=”og:url” content=”https://raulfdez.dev” />
+    <meta property=”og:image” content=”https://raulfdez.dev/images/logo.png” />
+    <meta property=»og:site_name» content=»Marketing de Contenidos Para Todos» />
+    <meta name=”twitter:card” content=”Porfolio" />
+    <meta name=”twitter:creator” content=”@raulfdeztdo” />
+    <meta name=”twitter:title” content=”Porfolio RFT” />
+    <meta name=”twitter:description content=”Portfolio personal de Raúl Fernández, desarrollador de software” />
+    <meta name=”twitter:url content=”https://raulfdez.dev” />
 `;
 
 initializeDarkMode();

diff --git a/assets/styles.css b/assets/styles.css
@@ -465,7 +465,7 @@ video {
 .box-s:hover{
   outline-style: solid;
   outline-width: 1px;
-  outline-color: #7dd3fc;
+  outline-color: #a5b4fc;
 }
 :is(.dark .box-s){
   --tw-bg-opacity: 1;
@@ -521,9 +521,15 @@ video {
 .h-24{
   height: 6rem;
 }
+.h-40{
+  height: 10rem;
+}
 .h-96{
   height: 24rem;
 }
+.w-40{
+  width: 10rem;
+}
 .w-full{
   width: 100%;
 }

diff --git a/assets/tailwind.css b/assets/tailwind.css
@@ -5,6 +5,6 @@
 
 @layer components {
     .box-s {
-        @apply shadow-md p-7 md:p-10 dark:shadow-slate-950 hover:outline hover:outline-1 hover:outline-sky-300 bg-stone-100 rounded-2xl dark:bg-slate-800;
+        @apply shadow-md p-7 md:p-10 dark:shadow-slate-950 hover:outline hover:outline-1 hover:outline-indigo-300 bg-stone-100 rounded-2xl dark:bg-slate-800;
     }
 }
diff --git a/portafolio_personal/components/banner.py b/portafolio_personal/components/banner.py
@@ -4,10 +4,11 @@
 
 def banner(lang) -> rx.Component:
     return rx.vstack(
-        rx.text(
+        rx.heading(
             "",
             id="typed-text",
             class_name="font-extrabold text-center text-base md:text-xl md:text-2xl text-slate-600 dark:text-slate-300 noto-sans-mono",
+            _as="h1"
         ),
         rx.script(
             """

diff --git a/portafolio_personal/components/heading.py b/portafolio_personal/components/heading.py
@@ -7,15 +7,15 @@ def heading(text: str, h1=False) -> rx.Component:
         rx.tablet_and_desktop(
             rx.heading(
                 text,
-                as_="h1" if h1 else "h2",
+                as_="h2",
                 size=Size.LARGE.value if h1 else Size.MEDIUM.value,
                 font_family="Rubik",
             )
         ),
         rx.mobile_only(
             rx.heading(
                 text,
-                as_="h1" if h1 else "h2",
+                as_="h2",
                 size=Size.MEDIUM.value if h1 else Size.SMALL.value,
                 font_family="Rubik",
             )

diff --git a/portafolio_personal/components/icon_button.py b/portafolio_personal/components/icon_button.py
@@ -5,9 +5,11 @@ def icon_button(icon: str, url: str, text="", solid=False) -> rx.Component:
         rx.button(
             rx.icon(icon),
             text,
-            variant="solid" if solid else "surface"
+            variant="solid" if solid else "surface",
+            title="Button: " + icon + " - " + text
         ),
         href=url,
         is_external=True,
-        class_name="flex justify-center"
+        class_name="flex justify-center",
+        title="Link: " + icon + " - " + text
     )
diff --git a/portafolio_personal/components/navbar.py b/portafolio_personal/components/navbar.py
@@ -40,7 +40,7 @@ def navbar() -> rx.Component:
                     spacing=Size.SMALL.value,
                 ),
                 rx.html(
-                    '<input id="darkmode-toggle" type="checkbox"><label for="darkmode-toggle"><svg id="lightMode" class="sun" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 473.931 473.931" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#F2BE3E;" cx="236.966" cy="236.966" r="236.966"></circle> <circle style="fill:#F1EB75;" cx="236.966" cy="236.966" r="117.154"></circle> </g></svg><svg id="darkMode" class="moon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 473.935 473.935" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#344E5D;" cx="236.967" cy="236.967" r="236.967"></circle> <path style="fill:#F1EB75;" d="M248.443,242.685c0-52.318,28.516-97.945,70.832-122.289c-15.757-6.601-33.055-10.26-51.21-10.26 c-73.204,0-132.549,59.341-132.549,132.549c0,73.201,59.341,132.549,132.549,132.549c18.155,0,35.453-3.663,51.21-10.267 C276.96,340.63,248.443,294.995,248.443,242.685z"></path> </g></svg></label><span class="fake-body"></span>',
+                    '<input id="darkmode-toggle" type="checkbox"><label for="darkmode-toggle"><svg id="lightMode" class="sun" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 473.931 473.931" xml:space="preserve" fill="#000000" width="24" height="24"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#F2BE3E;" cx="236.966" cy="236.966" r="236.966"></circle> <circle style="fill:#F1EB75;" cx="236.966" cy="236.966" r="117.154"></circle> </g></svg><svg id="darkMode" class="moon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 473.935 473.935" xml:space="preserve" fill="#000000" width="32" height="32"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#344E5D;" cx="236.967" cy="236.967" r="236.967"></circle> <path style="fill:#F1EB75;" d="M248.443,242.685c0-52.318,28.516-97.945,70.832-122.289c-15.757-6.601-33.055-10.26-51.21-10.26 c-73.204,0-132.549,59.341-132.549,132.549c0,73.201,59.341,132.549,132.549,132.549c18.155,0,35.453-3.663,51.21-10.267 C276.96,340.63,248.443,294.995,248.443,242.685z"></path> </g></svg></label><span class="fake-body"></span>',
                     class_name="flex darkThemeBtn"
                 ),
                 spacing=Size.DEFAULT.value,

diff --git a/portafolio_personal/portafolio_personal.py b/portafolio_personal/portafolio_personal.py
@@ -44,7 +44,10 @@ def index(lang='es') -> rx.Component:
 
 app = rx.App(
     stylesheets=STYLESHEETS,
-    style=BASE_STYLE
+    style=BASE_STYLE,
+    theme= rx.theme(
+        accent_color="indigo"
+    )
 )
 
 app.add_page(index("es"), route="/", title=get_translation("page_title", "es"))

diff --git a/portafolio_personal/views/header.py b/portafolio_personal/views/header.py
@@ -7,9 +7,10 @@
 
 def  header(data: Data) -> rx.Component:
     return rx.flex(
-        rx.avatar(
+        rx.image(
             src=data.avatar,
-            size=Size.EXTRALARGE.value
+            class_name="shadow-xl rounded-xl w-40 h-40",
+            alt="Logo R"
         ),
         rx.vstack(
             heading(data.name, h1=True),