Initial Commit

.gitignore

@@ -0,0 +1,278 @@
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,intellij,node
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,intellij,node
+
+### Intellij ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Intellij Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+# https://plugins.jetbrains.com/plugin/7973-sonarlint
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator-enh.xml
+.idea/**/markdown-navigator/
+
+# Cache file creation bug
+# See https://youtrack.jetbrains.com/issue/JBR-2257
+.idea/$CACHE_FILE$
+
+# CodeStream plugin
+# https://plugins.jetbrains.com/plugin/12206-codestream
+.idea/codestream.xml
+
+# Azure Toolkit for IntelliJ plugin
+# https://plugins.jetbrains.com/plugin/8053-azure-toolkit-for-intellij
+.idea/**/azureSettings.xml
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+.idea
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+pnpm-lock.yaml

README.md

@@ -0,0 +1,8 @@
+# Portfolio Freelance
+
+
+### TODOS:
+
+- [ ] Buscar mejores textos
+- [ ] Nosé porque pude hacer el build bien, pero las imagenes no las toma. Creo q por el nombre del archivo.
+

eslint.config.js

@@ -0,0 +1,8 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "portfolio-freelance",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "eslint": "eslint ./src",
+    "eslint:fix": "eslint ./src --fix"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "eslint": "^9.18.0",
+    "globals": "^15.14.0",
+    "vite": "^6.0.5",
+    "vite-plugin-minify": "^2.1.0",
+    "vite-plugin-static-copy": "^2.2.0"
+  },
+  "dependencies": {
+    "@emailjs/browser": "^4.4.1",
+    "photoswipe": "5.4.4"
+  }
+}

public/assets/css/svgstyles.css

@@ -0,0 +1,108 @@
+.st0 {
+    fill: #68e1fd
+}
+
+.st1 {
+    fill: #093f68
+}
+
+.st2 {
+    fill: #fff
+}
+
+.st3 {
+    fill: #f56132
+}
+
+.st4 {
+    fill: #dfeaef
+}
+
+.st5 {
+    fill: #ffbc0e
+}
+
+.st6 {
+    fill: #70cc40
+}
+
+.st0-c {
+    fill: #fff
+}
+
+.st1-c {
+    fill: #152837
+}
+
+.st2-c {
+    fill: #ffc9b0
+}
+
+.st3-c {
+    fill: #0172ad
+}
+
+.st5-c {
+    fill: #dfeaef
+}
+
+#panel-small, #panel-big, #cursor {
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+}
+
+#panel-small {
+    animation-name: move;
+}
+
+#panel-big {
+    animation-name: move-right;
+}
+
+#cursor {
+    animation-name: cursor-click;
+    animation-duration: 4s;
+}
+
+@keyframes move {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(-30px);
+    }
+}
+
+@keyframes move-right {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(30px);
+    }
+}
+
+@keyframes cursor-click {
+    0% {
+        transform: translateX(0);
+    }
+    40% {
+        transform: translateX(38px);
+    }
+    60% {
+        transform: scale(1.2, 1.11);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+#message {
+  animation: move-top 3s infinite;
+}
+
+@keyframes move-top {
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-50px); }
+  100% { transform: translateY(0); }
+}

src/data/getLatestJobs.js

@@ -0,0 +1,50 @@
+const getLatestJobs = (client = false) => {
+    const clients = ["zonis", "multipago", "vakoSRL"];
+    if (client) {
+        const allData = {
+            'zonis': {
+                id: 1,
+                images: getPublic(client),
+                description: "Estudio contable."
+            },
+            'multipago': {
+                id: 2,
+                images: getPublic(client),
+                description: "Pagina institucional de empresa de servicio de cobro."
+            },
+            'vakoSRL': {
+                id: 3,
+                images: getPublic(client),
+                description: "Web Auto-Administrable para publicar viajes de cargas para transportistas."
+            }
+        }
+        return allData[client]
+    } else {
+        return clients
+    }
+}
+
+export {
+    getLatestJobs,
+}
+
+const getPublic = (client) => {
+    let readFiles;
+    switch (client) {
+      case "zonis":
+        readFiles = import.meta.glob('/src/assets/img/jobs/zonis/*.webp');
+        break;
+      case "multipago":
+        readFiles = import.meta.glob('/src/assets/img/jobs/multipago/*.webp');
+        break;
+      case "vakoSRL":
+        readFiles = import.meta.glob('/src/assets/img/jobs/vakoSRL/*.webp');
+        break;
+    }
+
+    if (readFiles) {
+        return Object.keys(readFiles).map(file => file.split("/").at(-1).replace(".webp", ""));
+    } else {
+        console.error("Error al leer las imágenes")
+    }
+};

src/index.css

@@ -0,0 +1,267 @@
+@import url("@assets/css/pico.min.css") layer(picocss);
+@import url("@assets/css/svgstyles.css");
+
+/* General changes */
+:root {
+    --color-lines: #8790a115;
+    --gradient-background: conic-gradient(from 90deg at 2px 2px, #0000 90deg, var(--color-lines) 0),
+    conic-gradient(from 90deg at 1px 1px, #0000 90deg, var(--color-lines) 0),
+    var(--pico-background-color);
+
+    --size: 100px;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+body {
+    position: relative;
+}
+
+body > main {
+    padding-top: 0;
+    overflow: hidden;
+}
+
+.full-height.not-navbar {
+    height: calc(100vh - 102px);
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-col {
+    flex-direction: column;
+}
+
+.vertical-center {
+    align-items: center;
+}
+
+.horizontal-center {
+    display: flex;
+    justify-content: center;
+}
+
+.text-center {
+    text-align: center;
+}
+
+p {
+    text-wrap: pretty;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    max-inline-size: 66ch;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+}
+
+span {
+    font-size: medium;
+    line-height: 1;
+}
+
+.regular-font {
+    font-weight: normal;
+}
+
+section {
+    padding: 4rem 0;
+}
+
+.padding-vertical {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.margin-vertical {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+}
+
+.icons {
+    width: 150px;
+    height: 150px;
+    color: var(--pico-primary);
+}
+
+.icons-social {
+    background-color: var(--pico-primary);
+    color: #fff;
+    padding: .3rem;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+}
+
+.icons-social:hover {
+    cursor: pointer;
+}
+
+img {
+    object-fit: contain;
+}
+
+form input:not(input[type='submit']):invalid {
+    border: 1px solid #911d1d;
+}
+
+#contact-form textarea {
+    min-height: 300px;
+    max-height: 300px;
+}
+
+/* Custom changes */
+
+#change-theme {
+    height: 0;
+    width: 0;
+    display: none;
+}
+
+label[for="change-theme"] {
+    cursor: pointer;
+    text-indent: -9999px;
+    width: 3.5rem;
+    height: 2rem;
+    background: grey;
+    display: block;
+    border-radius: 100px;
+    position: relative;
+}
+
+label[for="change-theme"]:after {
+    content: '';
+    position: absolute;
+    top: 16%;
+    left: 5px;
+    width: 1.3rem;
+    height: 1.3rem;
+    background: var(--pico-color);
+    border-radius: 90px;
+    transition: 0.3s;
+}
+
+#change-theme:checked + label[for="change-theme"] {
+    background: var(--pico-primary);
+}
+
+#change-theme:checked + label[for="change-theme"]:after {
+    left: calc(100% - 0.313rem); /*5px*/
+    transform: translateX(-100%);
+    max-width: 8.125rem;
+}
+
+label[for="change-theme"]:active:after {
+    width: 1.3rem; /*130px*/
+}
+
+.bg-pattern {
+    background: var(--gradient-background);
+    background-size: var(--size) var(--size), calc(var(--size) / 5) calc(var(--size) / 5);
+    margin-bottom: 4rem;
+    min-height: 100vh;
+}
+
+.hero svg {
+    scale: 1.2;
+}
+
+article > footer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & p {
+        font-size: medium;
+        margin-top: 0.5rem;
+    }
+}
+
+.pswp-hidden-images {
+    display: none;
+}
+
+.hero.grid {
+    place-items: center;
+    min-height: 100vh;
+}
+
+.alert {
+    position: fixed;
+    background-color: var(--pico-background-color);
+    max-width: max-content;
+    color: var(--pico-color);
+    padding: 0.5rem 1rem;
+    margin: 1rem;
+    border-radius: 5px;
+    font-family: "Segoe UI Emoji", sans-serif;
+    box-shadow: -14px -5px 69px 4px #ffffff10;
+    border: 1px solid #ccc;
+
+    transform: translateX(-200%);
+    transition: transform 0.5s ease-in-out;
+}
+
+.go-top {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+    position: fixed;
+    background-color: var(--pico-primary);
+    padding: .5rem;
+    border-radius: 10px;
+
+    & svg {
+        color: #fff;
+    }
+}
+
+.alert.active {
+    transform: translateX(0);
+}
+
+.no-link {
+    text-decoration: none;
+}
+
+@media (width <= 48rem) {
+    /*  Celulares  */
+    nav.container {
+        padding-inline: 17px;
+    }
+
+    .container {
+        padding: 0 2rem;
+    }
+
+    .hero div:nth-child(1) {
+        margin-top: 118px;
+        text-align: center;
+    }
+
+    .hero div:nth-child(2) {
+        max-width: 100%;
+        overflow: hidden;
+    }
+
+    .hero svg {
+        scale: 1.5;
+        padding: 3rem 0;
+        height: 100%;
+    }
+
+    #contacto {
+        margin-top: 4rem;
+    }
+
+    nav > ul:nth-child(2) > li:last-child {
+        display: none;
+    }
+}

src/index.html

@@ -0,0 +1,353 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Desarrollo Páginas Web: Atrae más clientes y aumenta tus ventas con un diseño web profesional y efectivo.">
+    <link rel="stylesheet" href="index.css">
+    <script defer type="module" src="index.js"></script>
+    <link rel="icon" href="favicon.ico" type="image/x-icon">
+    <title>Desarrollo de páginas webs</title>
+</head>
+
+<body>
+    <div id="alert" class="alert"></div>
+    <main>
+        <div class="bg-pattern">
+            <nav class="container">
+                <ul>
+                    <li><strong>PP</strong></li>
+                </ul>
+                <ul>
+                    <li><a href="#servicios" aria-label="Servicios">Servicios</a></li>
+                    <li><a href="#trabajos" aria-label="Trabajos">Trabajos</a></li>
+                    <li><a href="#contacto" aria-label="Contacto">Contacto</a></li>
+                    <li>
+                        <input type="checkbox" id="change-theme" />
+                        <label for="change-theme">Toggle</label>
+                    </li>
+                </ul>
+            </nav>
+            <header id="main" class="">
+                <div class="hero container not-navbar grid vertical-center">
+                    <div>
+                        <h1>Desarrollo Páginas Web: La Puerta a Tu Presencia Online</h1>
+                        <h3 class="regular-font">Atrae más clientes y aumenta tus ventas con un diseño web profesional y
+                            efectivo.</h3>
+                        <a role="button" href="#contacto">¡Solicita tu cotización ahora!</a>
+                    </div>
+                    <div class="horizontal-center">
+                        <svg x="0" y="0" width="600" height="600" viewBox="0 0 500 500">
+                            <g id="panel-big">
+                                <path d="M219.8 207.3h174.4v163.2H219.8z" class="st0" />
+                                <path
+                                    d="M394.2 372.4H219.8c-1 0-1.8-.8-1.8-1.8V207.4c0-1 .8-1.8 1.8-1.8h174.4c1 0 1.8.8 1.8 1.8v163.2c0 1-.8 1.8-1.8 1.8zm-172.5-3.7h170.7V209.2H221.7v159.5z"
+                                    class="st1" />
+                                <path
+                                    d="M394.2 225.8H252.4c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8h141.8c1 0 1.8.8 1.8 1.8.1.9-.8 1.8-1.8 1.8z"
+                                    class="st1" />
+                            </g>
+                            <g>
+                                <path
+                                    d="M370.3 113.6v265.1c0 7.1-5.7 12.8-12.8 12.8h-212c-7.1 0-12.8-5.7-12.8-12.8V113.6c0-10.2 8.2-18.4 18.4-18.4H352c10 0 18.3 8.2 18.3 18.4z"
+                                    class="st2" />
+                                <path
+                                    d="M357.5 393.3h-212c-8.1 0-14.7-6.6-14.7-14.7v-265c0-11.2 9.1-20.2 20.2-20.2h200.9c11.2 0 20.2 9.1 20.2 20.2v265.1c0 8.1-6.6 14.6-14.6 14.6zM151 97c-9.1 0-16.5 7.4-16.6 16.6v265.1c0 6.1 4.9 11 11 11h212c6.1 0 11-4.9 11-11V113.6c0-9.2-7.4-16.6-16.6-16.6H151z"
+                                    class="st1" />
+                                <path
+                                    d="M370.3 113.6v8.1H132.6v-8.1c0-10.2 8.2-18.4 18.4-18.4h200.9c10.1 0 18.4 8.2 18.4 18.4z"
+                                    class="st2" />
+                                <path
+                                    d="M370.3 123.5H132.6c-1 0-1.8-.8-1.8-1.8v-8.1c0-11.2 9.1-20.2 20.2-20.2h200.9c11.2 0 20.2 9.1 20.2 20.2v8.1c0 1-.8 1.8-1.8 1.8zm-235.9-3.7h234v-6.3c0-9.1-7.4-16.6-16.6-16.6H151c-9.1 0-16.6 7.4-16.6 16.6v6.3z"
+                                    class="st1" />
+                                <path d="M132.6 121.7h237.7v70.1H132.6z" class="st0" />
+                                <path
+                                    d="M370.3 193.6H132.6c-1 0-1.8-.8-1.8-1.8v-70.1c0-1 .8-1.8 1.8-1.8h237.7c1 0 1.8.8 1.8 1.8v70.1c0 1-.8 1.8-1.8 1.8zM134.4 190h234v-66.5h-234V190z"
+                                    class="st1" />
+                                <circle cx="193.1" cy="239.3" r="25.8" class="st3" />
+                                <path
+                                    d="M193.1 266.9c-15.3 0-27.6-12.4-27.6-27.6s12.4-27.6 27.6-27.6 27.6 12.4 27.6 27.6c0 15.2-12.3 27.6-27.6 27.6zm0-51.6c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z"
+                                    class="st1" />
+                                <path
+                                    d="M335.5 222h-90.1c-1 .1-1.9-.7-2-1.7s.7-1.9 1.7-2H335.5c1-.1 1.9.7 2 1.7.1 1-.7 1.9-1.7 2h-.3zM335.5 241.1h-90.1c-1 0-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8h90.1c1 0 1.8.8 1.8 1.8.1 1-.7 1.8-1.8 1.8zM307 260.3h-16.5c-1-.1-1.8-1-1.7-2 .1-.9.8-1.6 1.7-1.7H307c1 .1 1.8 1 1.7 2-.1.9-.8 1.6-1.7 1.7zM276.2 260.3h-30.8c-1 .1-1.9-.7-2-1.7-.1-1 .7-1.9 1.7-2h31.1c1-.1 1.9.7 2 1.7.1 1-.7 1.9-1.7 2h-.3z"
+                                    class="st4" />
+                                <circle cx="309.8" cy="322.3" r="25.8" class="st5" />
+                                <path
+                                    d="M309.8 349.9c-15.3 0-27.6-12.4-27.6-27.6s12.4-27.6 27.6-27.6c15.3 0 27.6 12.4 27.6 27.6 0 15.2-12.4 27.6-27.6 27.6zm0-51.6c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.8-24-24-24z"
+                                    class="st1" />
+                                <path
+                                    d="M257.5 305h-90.2c-1 .1-1.9-.7-2-1.7-.1-1 .7-1.9 1.7-2h90.5c1 .1 1.8 1 1.7 2-.1.9-.8 1.6-1.7 1.7zM257.5 324.1h-90.2c-1 .1-1.9-.7-2-1.7-.1-1 .7-1.9 1.7-2h90.5c1 .1 1.8 1 1.7 2-.1.9-.8 1.6-1.7 1.7zM233.7 343.2h-66.4c-1 .1-1.9-.7-2-1.7-.1-1 .7-1.9 1.7-2h66.7c1-.1 1.9.7 2 1.7.1 1-.7 1.9-1.7 2-.1.1-.2.1-.3 0z"
+                                    class="st4" />
+                                <path d="m132.6 191.8 79.8-57.9 48.4 40.8 42.2-34.3 67.3 51.4z" class="st6" />
+                                <path
+                                    d="M370.3 193.6H132.6c-1 0-1.8-.8-1.8-1.8 0-.6.3-1.2.8-1.5l79.8-57.9c.7-.5 1.6-.5 2.3.1l47.2 39.8 41-33.4c.7-.5 1.6-.5 2.3 0l67.2 51.4c.8.6.9 1.8.3 2.6-.4.5-.9.8-1.4.7zm-232-3.6h226.6l-61.8-47.2-41.1 33.3c-.7.6-1.7.6-2.3 0l-47.3-39.9-74.1 53.8z"
+                                    class="st1" />
+                                <path
+                                    d="M271.2 185.3c-.4 0-.8-.1-1.2-.4l-10.4-8.7c-.8-.6-1-1.8-.3-2.6.6-.8 1.8-1 2.6-.3l.1.1 10.4 8.7c.8.6.9 1.8.2 2.6-.3.3-.8.5-1.4.6z"
+                                    class="st1" />
+                                <circle cx="151.8" cy="107.2" r="3.7" class="st3" />
+                                <path
+                                    d="M151.8 103.5c2.1 0 3.7 1.7 3.7 3.7 0 2.1-1.7 3.7-3.7 3.7s-3.7-1.7-3.7-3.7c-.1-2.1 1.6-3.7 3.7-3.7-.1 0-.1 0 0 0m0-2.8c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5c-.1-3.6-3-6.5-6.5-6.5z"
+                                    class="st1" />
+                                <circle cx="167.3" cy="107.2" r="3.7" class="st5" />
+                                <path
+                                    d="M167.3 103.5c2.1 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7c-2.1 0-3.7-1.7-3.7-3.7 0-2.1 1.7-3.7 3.7-3.7m0-2.8c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5-2.9-6.5-6.5-6.5z"
+                                    class="st1" />
+                                <circle cx="182.9" cy="107.2" r="3.7" class="st6" />
+                                <path
+                                    d="M182.9 103.5c2.1 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7c-2.1 0-3.7-1.7-3.7-3.7 0-2.1 1.7-3.7 3.7-3.7m0-2.8c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5 6.5-2.9 6.5-6.5-2.9-6.5-6.5-6.5z"
+                                    class="st1" />
+                            </g>
+                            <g id="cursor">
+                                <path
+                                    d="m117.9 244.4 37-9.8c.7-.2 1.4.2 1.5.9.1.2.1.4 0 .6l-9.8 37c-.2.7-.9 1.1-1.5.9l-.6-.3-8-8-16.2 16.3c-.5.5-1.3.5-1.8 0l-9.4-9.4c-.5-.5-.5-1.3 0-1.8l16.3-16.3-8-8c-.5-.5-.6-1.3-.1-1.8l.6-.3z"
+                                    class="st2" />
+                                <path
+                                    d="M119.3 284.1c-.8 0-1.6-.3-2.2-.9l-9.4-9.4c-1.2-1.2-1.2-3.2 0-4.4l15-15-6.8-6.7c-1.2-1.2-1.2-3.2 0-4.4.4-.4.9-.7 1.4-.8l37-9.8c1.6-.4 3.3.5 3.8 2.2.1.5.1 1.1 0 1.6l-9.8 37c-.4 1.7-2.1 2.6-3.8 2.2-.5-.1-1-.4-1.4-.8l-6.7-6.7-15 15c-.5.6-1.3.9-2.1.9zm-8.5-12.4 8.6 8.5 15.9-15.9c.7-.7 1.9-.7 2.6 0l7.3 7.3 9.3-35.1-35.1 9.3 7.3 7.3c.7.7.7 1.9 0 2.6l-15.9 16z"
+                                    class="st1" />
+                            </g>
+                            <g id="panel-small">
+                                <path
+                                    d="M122.2 331h82.9c1.3 0 2.3 1 2.3 2.3v69.8c0 1.3-1 2.3-2.3 2.3h-82.9c-1.3 0-2.3-1-2.3-2.3v-69.8c-.1-1.3 1-2.3 2.3-2.3z"
+                                    class="st0" />
+                                <path
+                                    d="M203.1 407.3h-79c-3.4 0-6.1-2.7-6.1-6.1v-65.9c0-3.4 2.7-6.1 6.1-6.1h79c3.4 0 6.1 2.7 6.1 6.1v65.9c0 3.4-2.7 6.1-6.1 6.1zm-79-74.5c-1.3 0-2.4 1.1-2.4 2.4v65.9c0 1.4 1.1 2.5 2.4 2.5h79c1.4 0 2.4-1.1 2.4-2.5v-65.9c0-1.3-1.1-2.4-2.4-2.4h-79z"
+                                    class="st1" />
+                                <path
+                                    d="M207 347h-86.2c-1 .1-1.9-.7-2-1.7-.1-1 .7-1.9 1.7-2H207c1-.1 1.9.7 2 1.7.1 1-.7 1.9-1.7 2h-.3z"
+                                    class="st1" />
+                                <path
+                                    d="M191.7 366.4h-56.2c-1-.1-1.8-1-1.7-2 .1-.9.8-1.6 1.7-1.7h56.2c1 .1 1.8 1 1.7 2 0 .9-.8 1.6-1.7 1.7zM178.8 384.3h-43.2c-1-.1-1.8-1-1.7-2 .1-.9.8-1.6 1.7-1.7h43.2c1 .1 1.8 1 1.7 2-.1.9-.8 1.6-1.7 1.7z"
+                                    class="st2" />
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+            </header>
+        </div>
+        <section id="servicios" class="services container">
+            <h2>Lo que ofrezco</h2>
+            <div class="grid padding-vertical">
+                <article class="flex flex-col">
+                    <main class="horizontal-center padding-vertical">
+                        <svg class="icons" fill="currentColor" viewBox="0 0 488.477 488.477">
+                            <path
+                                d="M472.227 35.998H16.25C7.29 35.998 0 43.288 0 52.248v383.98c0 8.96 7.29 16.25 16.25 16.25h455.977c8.96 0 16.25-7.29 16.25-16.25V52.248c0-8.96-7.291-16.25-16.25-16.25zM8.5 335.307h62.574a4.249 4.249 0 0 0 4.25-4.25 4.249 4.249 0 0 0-4.25-4.25H8.5V102.805h471.477v43.834h-88.883a4.249 4.249 0 0 0-4.25 4.25 4.249 4.249 0 0 0 4.25 4.25h88.883v201.668H377.404a4.249 4.249 0 0 0-4.25 4.25 4.249 4.249 0 0 0 4.25 4.25h102.572v45.998H8.5v-75.998zm7.75-290.809h455.977c4.273 0 7.75 3.477 7.75 7.75v15.057H170.094a4.249 4.249 0 0 0-4.25 4.25 4.249 4.249 0 0 0 4.25 4.25h309.883v18.5H8.5V52.248c0-4.273 3.477-7.75 7.75-7.75zm455.977 399.48H16.25c-4.273 0-7.75-3.476-7.75-7.75v-16.424h471.477v16.424c0 4.274-3.477 7.75-7.75 7.75z" />
+                            <path
+                                d="M38.094 84.805c8.409 0 15.25-6.841 15.25-15.25s-6.841-15.25-15.25-15.25c-8.409 0-15.25 6.841-15.25 15.25s6.841 15.25 15.25 15.25zm0-22a6.758 6.758 0 0 1 6.75 6.75 6.758 6.758 0 0 1-6.75 6.75 6.758 6.758 0 0 1-6.75-6.75 6.758 6.758 0 0 1 6.75-6.75zM80.594 84.805c8.409 0 15.25-6.841 15.25-15.25s-6.841-15.25-15.25-15.25c-8.409 0-15.25 6.841-15.25 15.25s6.841 15.25 15.25 15.25zm0-22a6.758 6.758 0 0 1 6.75 6.75 6.758 6.758 0 0 1-6.75 6.75 6.758 6.758 0 0 1-6.75-6.75 6.758 6.758 0 0 1 6.75-6.75zM123.094 84.805c8.409 0 15.25-6.841 15.25-15.25s-6.841-15.25-15.25-15.25c-8.409 0-15.25 6.841-15.25 15.25s6.841 15.25 15.25 15.25zm0-22a6.758 6.758 0 0 1 6.75 6.75 6.758 6.758 0 0 1-6.75 6.75 6.758 6.758 0 0 1-6.75-6.75 6.758 6.758 0 0 1 6.75-6.75zM142.726 184.751c-.001-3.085-1.549-6.019-4.248-8.048l-75.264-56.591a11.882 11.882 0 0 0-7.191-2.397c-3.762 0-7.352 1.786-9.602 4.777l-5.923 7.876c-3.974 5.285-2.906 12.818 2.38 16.794l48.325 36.335c.544.409.856.866.856 1.255 0 .39-.313.848-.856 1.258l-48.326 36.334c-5.284 3.975-6.352 11.508-2.379 16.792l5.923 7.88c2.249 2.99 5.838 4.775 9.599 4.775 2.619 0 5.106-.829 7.194-2.4l75.266-56.589c2.699-2.032 4.247-4.966 4.246-8.051zm-9.356 1.258-75.264 56.588a3.452 3.452 0 0 1-2.087.693 3.474 3.474 0 0 1-2.805-1.383l-5.923-7.879a3.5 3.5 0 0 1 .693-4.892l48.326-36.334c2.7-2.031 4.248-4.967 4.248-8.052-.001-3.086-1.55-6.019-4.249-8.048l-48.324-36.334a3.499 3.499 0 0 1-.694-4.893l5.922-7.875a3.476 3.476 0 0 1 2.809-1.387c.53 0 1.322.12 2.084.691l75.263 56.59c.544.409.856.867.856 1.256.001.392-.312.851-.855 1.259zM234.075 218.512h-89.207c-9.175 0-16.64 7.464-16.64 16.639 0 9.176 7.465 16.641 16.64 16.641h89.207c9.175 0 16.64-7.465 16.64-16.641 0-9.175-7.465-16.639-16.64-16.639zm0 24.779h-89.207c-4.488 0-8.14-3.652-8.14-8.141 0-4.487 3.651-8.139 8.14-8.139h89.207c4.488 0 8.14 3.651 8.14 8.139 0 4.489-3.651 8.141-8.14 8.141z" />
+                        </svg>
+                    </main>
+                    <footer class="text-center">
+                        <h6>Diseño de sitio web personalizado</h6>
+                    </footer>
+                </article>
+                <article class="flex flex-col">
+                    <main class="horizontal-center padding-vertical">
+                        <svg class="icons" fill="currentColor" viewBox="0 0 491.148 491.148">
+                            <path
+                                d="M216.396 252.217c-11.836 0-21.466 9.63-21.466 21.467 0 11.836 9.629 21.466 21.466 21.466 11.837 0 21.467-9.629 21.467-21.466-.001-11.837-9.631-21.467-21.467-21.467zm0 34.432c-7.149 0-12.966-5.816-12.966-12.966 0-7.15 5.816-12.967 12.966-12.967 7.15 0 12.967 5.817 12.967 12.967-.001 7.15-5.818 12.966-12.967 12.966z" />
+                            <path
+                                d="M464.13 197.664h-32.585V30.074C431.545 13.491 418.054 0 401.472 0H31.324C14.741 0 1.25 13.491 1.25 30.074v265.883c0 16.583 13.491 30.074 30.074 30.074h129.511l-15.448 59.592h-1.221c-12.84 0-23.286 10.447-23.286 23.288v17.303a4.25 4.25 0 0 0 4.25 4.25h182.535a4.25 4.25 0 0 0 4.25-4.25v-17.303c0-12.841-10.447-23.288-23.289-23.288h-1.22l-15.449-59.592h48.057V465.38c0 14.209 11.56 25.768 25.769 25.768H464.13c14.209 0 25.768-11.56 25.768-25.77V223.433c0-14.209-11.559-25.769-25.768-25.769zm-135.616 30.02 152.885-.001v201.443H328.514V227.684zm152.334-8.501-151.783.001c1.901-7.47 8.665-13.02 16.718-13.02H464.13c8.053 0 14.816 5.549 16.718 13.019zm-135.066-21.519c-14.209 0-25.769 11.56-25.769 25.77v10.321H9.75V33.16h413.295v164.504h-77.263zM31.324 8.5h370.147c10.023 0 18.446 6.881 20.858 16.16H10.465C12.877 15.381 21.301 8.5 31.324 8.5zm272.091 400.411v13.053H129.38v-13.053c0-8.154 6.633-14.788 14.786-14.788h144.46c8.155 0 14.789 6.634 14.789 14.788zm-24.789-23.288H154.169l15.448-59.592h93.56l15.449 59.592zM31.324 317.531c-11.896 0-21.574-9.678-21.574-21.574v-26.31h65.618a4.25 4.25 0 0 0 0-8.5H9.75v-18.893h310.264v75.276H31.324zM464.13 482.648H345.782c-9.522 0-17.269-7.747-17.269-17.268v-8.548h40.037a4.25 4.25 0 0 0 0-8.5h-40.037v-10.706h152.885v27.753c0 9.522-7.746 17.269-17.268 17.269z" />
+                            <path
+                                d="M404.956 443.603c-8.596 0-15.59 6.995-15.59 15.592 0 8.596 6.994 15.59 15.59 15.59 8.597 0 15.592-6.994 15.592-15.591s-6.995-15.591-15.592-15.591zm0 22.681c-3.909 0-7.09-3.181-7.09-7.09 0-3.911 3.181-7.092 7.09-7.092 3.911 0 7.092 3.181 7.092 7.091s-3.181 7.091-7.092 7.091zM459.369 250.47h-41.718a4.25 4.25 0 0 0-4.25 4.25v38.465a4.25 4.25 0 0 0 4.25 4.25h41.718a4.25 4.25 0 0 0 4.25-4.25V254.72a4.25 4.25 0 0 0-4.25-4.25zm-4.25 38.465h-33.218V258.97h33.218v29.965zM353.478 297.435h41.745a4.25 4.25 0 0 0 4.25-4.25V254.72a4.25 4.25 0 0 0-4.25-4.25h-41.745a4.25 4.25 0 0 0-4.25 4.25v38.465a4.25 4.25 0 0 0 4.25 4.25zm4.25-38.465h33.245v29.965h-33.245V258.97zM459.369 310.397H353.478a4.25 4.25 0 0 0-4.25 4.25v33.789a4.25 4.25 0 0 0 4.25 4.25H459.37a4.25 4.25 0 0 0 4.25-4.25v-33.789a4.252 4.252 0 0 0-4.251-4.25zm-4.25 33.79h-97.392v-25.289h97.392v25.289zM459.369 365.99H353.478a4.25 4.25 0 0 0 0 8.5H459.37a4.25 4.25 0 1 0-.001-8.5zM459.369 384.387H353.478a4.25 4.25 0 0 0 0 8.5H459.37a4.25 4.25 0 1 0-.001-8.5zM390.106 48.02h-229a4.25 4.25 0 0 0-4.25 4.25v46a4.25 4.25 0 0 0 4.25 4.25h229a4.25 4.25 0 0 0 4.25-4.25v-46a4.249 4.249 0 0 0-4.25-4.25zm-4.25 46h-220.5v-37.5h220.5v37.5zM43.106 102.52h86a4.25 4.25 0 0 0 4.25-4.25v-46a4.25 4.25 0 0 0-4.25-4.25h-86a4.25 4.25 0 0 0-4.25 4.25v46a4.25 4.25 0 0 0 4.25 4.25zm4.25-46h77.5v37.5h-77.5v-37.5zM390.106 119.687h-347a4.25 4.25 0 0 0-4.25 4.25v20.067a4.25 4.25 0 0 0 4.25 4.25h347a4.25 4.25 0 0 0 4.25-4.25v-20.067a4.249 4.249 0 0 0-4.25-4.25zm-4.25 20.067h-338.5v-11.567h338.5v11.567zM125.106 165.828h-82a4.25 4.25 0 0 0 0 8.5h82a4.25 4.25 0 0 0 0-8.5zM125.106 187.828h-82a4.25 4.25 0 0 0 0 8.5h82a4.25 4.25 0 0 0 0-8.5zM389.115 165.828H162.17a4.25 4.25 0 0 0 0 8.5h226.945a4.25 4.25 0 0 0 0-8.5zM250.106 187.828H162.17a4.25 4.25 0 0 0 0 8.5h87.936a4.25 4.25 0 0 0 0-8.5z" />
+                        </svg>
+                    </main>
+                    <footer class="text-center">
+                        <hgroup>
+                            <h6>Diseño responsivo</h6>
+                            <p>Funciona perfectamente en teléfonos, tabletas y computadoras de escritorio.</p>
+                        </hgroup>
+                    </footer>
+                </article>
+                <article class="flex flex-col">
+                    <main class="horizontal-center padding-vertical">
+                        <svg class="icons" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 64 64">
+                            <path d="m28.79 44-9.4-9.4S31.76 5.41 56.77 7c0 0 3.48 23.12-27.98 37Z" />
+                            <path d="M56 16.82a10.87 10.87 0 0 1-6-3.08 11 11 0 0 1-3.11-6.15" />
+                            <circle cx="42.32" cy="21.44" r="5.48" />
+                            <path
+                                d="M30.61 43.16 30 47.84a.24.24 0 0 0 .33.25l8-3.47a2.32 2.32 0 0 0 1.3-1.62l1.22-5.83M20 33.29l-4.69.6a.23.23 0 0 1-.24-.32l3.46-7.95a2.33 2.33 0 0 1 1.67-1.35l5.82-1.22M21.49 36.68c-6.55 2.1-6.88 12.47-6.88 12.47s10.08.11 12.59-6.76" />
+                            <path stroke-linecap="round"
+                                d="m10.88 52.82-3.76 3.77M10.6 45.63l-3.19 3.18M17.94 53.11l-3.18 3.19" />
+                        </svg>
+                    </main>
+                    <footer class="text-center">
+                        <hgroup>
+                            <h6>Rápido y confiable</h6>
+                            <p>Tiempos de carga rápidos y funcionalidad confiable.</p>
+                        </hgroup>
+                    </footer>
+                </article>
+                <article class="flex flex-col">
+                    <main class="horizontal-center padding-vertical">
+                        <svg CLASS="icons" fill="currentColor" viewBox="0 0 512 512" stroke-width="1">
+                            <g id="SVGRepo_iconCarrier">
+                                <path
+                                    d="M435.244 391.19c32.805-41.18 52.518-93.432 52.503-150.118.015-66.486-27.029-126.93-70.608-170.464C373.593 27.021 313.149-.016 246.667 0 180.181-.016 119.742 27.021 76.2 70.608 32.616 114.142 5.576 174.586 5.591 241.072 5.576 307.55 32.616 367.994 76.2 411.536c43.542 43.587 103.982 70.624 170.468 70.608 50.948.016 98.312-15.91 137.281-42.94L456.756 512l49.653-49.653-71.165-71.157zm-56.736-18.274c-33.826 33.773-80.267 54.591-131.841 54.606-51.574-.015-98.015-20.833-131.845-54.606-33.784-33.834-54.595-80.271-54.61-131.844.015-51.574 20.826-98.011 54.61-131.844 33.83-33.78 80.271-54.591 131.845-54.606 51.574.015 98.014 20.826 131.841 54.606 33.791 33.833 54.602 80.271 54.617 131.844-.015 51.574-20.826 98.01-54.617 131.844z"
+                                    class="st0" />
+                                <path
+                                    d="m155.926 235.105-5.696-.792c-14.558-2.058-19.782-7.117-19.782-14.555 0-8.389 6.012-14.402 16.932-14.402 9.018 0 17.088 2.691 25.794 8.39.789.473 1.582.313 2.214-.48l7.597-11.704c.633-.953.473-1.585-.32-2.218-8.542-6.484-21.359-10.76-34.809-10.76-22.156 0-36.398 12.977-36.398 32.44 0 17.877 11.712 27.852 32.44 30.694l5.696.792c14.875 2.058 19.622 7.125 19.622 14.875 0 9.022-7.437 15.507-20.255 15.507-12.024 0-22.312-5.852-29.273-11.392-.632-.632-1.581-.632-2.214.16l-9.811 11.392c-.632.792-.316 1.737.316 2.378 8.386 7.909 23.733 14.234 39.561 14.234 26.739 0 40.509-14.234 40.509-33.384 0-18.518-11.397-28.324-32.123-31.175zM275.566 190.322h-67.408c-.949 0-1.581.632-1.581 1.585v104.435c0 .953.632 1.585 1.581 1.585h67.408c.953 0 1.585-.632 1.585-1.585V282.74c0-.952-.632-1.585-1.585-1.585h-49.368l-.949-.953V252.99l.949-.952h41.614c.953 0 1.586-.633 1.586-1.586v-13.609c0-.945-.633-1.577-1.586-1.577h-41.614l-.949-.953v-26.266l.949-.945h49.368c.953 0 1.585-.64 1.585-1.585v-13.61c0-.953-.632-1.585-1.585-1.585zM334.448 188.584c-18.514 0-32.439 8.863-37.975 25.954-2.218 6.645-2.85 12.658-2.85 29.589 0 16.932.632 22.944 2.85 29.589 5.536 17.092 19.462 25.947 37.975 25.947 18.677 0 32.591-8.855 38.139-25.947 2.21-6.645 2.85-12.657 2.85-29.589s-.64-22.944-2.85-29.589c-5.548-17.091-19.463-25.954-38.139-25.954zm20.094 80.226c-3.003 8.702-9.327 14.082-20.095 14.082-10.6 0-16.932-5.38-19.938-14.082-1.265-3.955-1.898-9.495-1.898-24.682 0-15.355.633-20.734 1.898-24.69 3.007-8.702 9.339-14.082 19.938-14.082 10.768 0 17.092 5.38 20.095 14.082 1.265 3.955 1.904 9.335 1.904 24.69.001 15.187-.639 20.726-1.904 24.682z" />
+                            </g>
+                        </svg>
+                    </main>
+                    <footer class="text-center">
+                        <hgroup>
+                            <h6>SEO</h6>
+                            <p>Le damos importancia a mejorar la visibilidad de la web para atraer más visitantes.</p>
+                        </hgroup>
+                    </footer>
+                </article>
+            </div>
+        </section>
+        <section id="trabajos" class="container">
+            <h2>Trabajos previos</h2>
+            <div class="grid container-galleries padding-vertical">
+                <!-- Acá van los trabajos -->
+            </div>
+            <div>
+                <span>
+                    <em>* Este portafolio muestra una selección de mis proyectos. Cada proyecto puede incluir más páginas y detalles no mostrados aquí.</em>
+                </span>
+            </div>
+        </section>
+        <section id="contacto" class="container">
+            <h2>Contacto</h2>
+            <p>¿Listo para llevar tu negocio al siguiente nivel? ¡Contáctame ahora!</p>
+            <div class="grid container-galleries padding-vertical">
+                <form id="contact-form">
+                    <label>
+                        Nombre:
+                        <input name="nombre" placeholder="Nombre y Apellido" autocomplete="Nombre y apellido" />
+                    </label>
+                    <label>
+                        Correo:
+                        <input type="email" name="email" placeholder="Correo" autocomplete="email" />
+                    </label>
+                    <label>
+                        Mensaje:
+                        <textarea name="mensaje"
+                            placeholder="Cuéntame sobre tu negocio y sobre lo que quieres que tenga tu próxima página. Basándonos en esos datos, te enviaremos la variabilidad y un presupuesto aproximado."
+                            aria-label="" rows="5" style="max-height: 300px"></textarea>
+                    </label>
+                    <input type="submit" id="button-send" value="Enviar" />
+                </form>
+                <div class="horizontal-center">
+                    <svg x="0" y="0" viewBox="0 0 500 500" width="500">
+                        <g id="circle">
+                            <path
+                                d="M427.9 258.4c.1 32.5-8.9 64.4-25.8 92.2-3.4 5.7-7.2 11.1-11.2 16.4-3.9 5.1-8.1 9.9-12.5 14.6-14.8 15.4-32.2 28.1-51.5 37.3-8.1 3.9-16.4 7.2-25 9.8-1.6.5-3.2 1-4.8 1.4-29.2 7.9-60 8.3-89.4 1.2-1.6-.4-3-.8-4.6-1.2-13.4-3.7-26.4-8.9-38.5-15.6l-1.2-.6C77.6 365.7 47 257.4 95 171.6s156.4-116.3 242.1-68.3c3.8 2.1 7.4 4.3 11 6.7 5.1 3.4 10 7 14.7 10.9 14.9 12.2 27.7 26.8 37.9 43.1 2.1 3.3 4 6.6 5.9 10.1 14 26 21.3 54.9 21.3 84.3z"
+                                class="st0-c" />
+                            <path
+                                d="M250 438.1c-14.4 0-28.8-1.7-42.9-5.1-1.6-.4-3.1-.8-4.6-1.2-13.6-3.7-26.7-9-39-15.8-.3-.1-.6-.3-1-.5l-.2-.1c-56.9-31.8-92.1-91.8-92.1-156.9 0-99.1 80.6-179.7 179.7-179.7 35.3-.1 69.8 10.3 99.2 29.9 21.4 14.2 39.6 32.8 53.2 54.6 2 3.2 4 6.5 5.9 10.2 30.1 56 28.3 123.7-4.6 178.1 0 .1 0 .1-.1.2-6.8 11.2-14.9 21.7-24 31.2-14.9 15.6-32.5 28.3-52 37.6l-.1.1c-8.2 3.9-16.6 7.2-25.3 9.9-1.6.5-3.2 1-4.9 1.4-15.2 4-31.2 6.1-47.2 6.1zm0-355.7c-97 0-176 78.9-176 176 0 63.8 34.5 122.6 90.2 153.7l.2.1c.3.2.6.3.8.5 12.1 6.7 24.9 11.9 38.2 15.5l4.5 1.2c29.1 7.1 59.5 6.6 88.4-1.2 1.6-.4 3.2-.9 4.8-1.4 8.4-2.6 16.7-5.8 24.6-9.6l.1-.1c19.1-9.1 36.4-21.6 51-36.9 4.4-4.6 8.5-9.4 12.4-14.4 4-5.1 7.6-10.5 11-16 0-.1.1-.1.1-.2 32.3-53.3 34-119.7 4.5-174.6-1.9-3.6-3.8-6.8-5.8-9.9-10.1-16.2-22.8-30.6-37.5-42.7-4.7-3.8-9.5-7.4-14.6-10.8-28.6-19-62.4-29.2-96.9-29.2zm152.1 268.2z"
+                                class="st1-c" />
+                        </g>
+                        <g id="device">
+                            <path
+                                d="M402.1 350.6c-3.4 5.7-7.2 11.1-11.2 16.4-3.9 5.1-8.1 9.9-12.5 14.6-14.8 15.4-32.2 28.1-51.5 37.3-8.1 3.9-16.4 7.2-25 9.8v-17.2c0-5.5-17.4-25.4-31.9-40.9-10.3-11-19.1-19.9-19.1-19.9l15.5-28.2 22.2-40.5.1-.3 2.8-5.1 7.3-13.3s17.8 8.4 38.4 20.6c24.9 14.8 54 35.1 61.2 52.9 1.6 4.5 2.9 9.1 3.7 13.8z"
+                                class="st2-c" />
+                            <path
+                                d="M301.8 430.5c-1 0-1.9-.8-1.9-1.9v-17.1c0-1.4-2.3-8.4-31.4-39.6-10.1-10.9-18.9-19.7-19-19.8-.6-.6-.7-1.5-.3-2.2l48-87.4c.5-.9 1.6-1.2 2.5-.8.2.1 18.1 8.5 38.5 20.7 35.2 20.8 56 38.9 62 53.8 1.7 4.6 3 9.4 3.8 14.2v.3c0 .4-.1.7-.3 1-6.8 11.2-14.9 21.7-24 31.2-14.9 15.6-32.5 28.3-52 37.6l-.1.1c-8.2 3.9-16.6 7.2-25.3 9.9h-.5zm-48.7-80.1c2.6 2.6 9.9 10.1 18.1 18.9 32.4 34.8 32.4 40.1 32.4 42.2V426c7.6-2.4 15-5.4 22.2-8.8l.1-.1c19.1-9.1 36.4-21.6 51-36.9 4.4-4.6 8.5-9.4 12.4-14.4 3.9-5 7.4-10.2 10.7-15.5-.8-4.4-1.9-8.7-3.5-12.8-5.6-13.9-26.4-31.9-60.4-52-16.8-9.9-31.8-17.4-36.6-19.7l-46.4 84.6z"
+                                class="st1-c" />
+                            <path
+                                d="M177.8 112.3h144.3c8.3 0 15 6.7 15 15v271.8c0 8.3-6.7 15-15 15H177.8c-8.3 0-15-6.7-15-15V127.4c0-8.3 6.7-15.1 15-15.1z"
+                                class="st3-c" />
+                            <path
+                                d="M321.4 416.1H178.6c-9.8 0-17.7-7.9-17.7-17.7V128.2c0-9.8 7.9-17.7 17.7-17.7h142.7c9.8 0 17.7 7.9 17.7 17.7v270.2c.1 9.8-7.9 17.7-17.6 17.7zM178.6 114.2c-7.7 0-14 6.3-14 14v270.2c0 7.7 6.3 14 14 14h142.7c7.7 0 14-6.3 14-14V128.2c0-7.7-6.3-14-14-14H178.6z"
+                                class="st1-c" />
+                            <path
+                                d="M249 404.4c-6.9 0-12.6-5.6-12.6-12.5s5.6-12.6 12.5-12.6 12.6 5.6 12.6 12.5c0 7-5.6 12.6-12.5 12.6zm0-21.3c-4.8 0-8.8 3.9-8.8 8.8s3.9 8.8 8.8 8.8 8.8-3.9 8.8-8.8-4-8.8-8.8-8.8zM162.8 135.4h174.4v235.1H162.8z"
+                                class="st1-c" />
+                            <path
+                                d="M337.2 372.4H162.8c-1 0-1.9-.9-1.9-1.9V135.4c0-1 .8-1.9 1.9-1.9h174.4c1 0 1.9.8 1.9 1.9v235.1c0 1.1-.9 1.9-1.9 1.9zm-172.5-3.7h170.6V137.3H164.7v231.4zM241.3 126.2h-3.6c-1-.1-1.8-1-1.7-2 .1-.9.8-1.7 1.7-1.7h3.6c1-.1 1.9.7 2 1.7.1 1-.7 1.9-1.7 2h-.3zM262.2 126.2h-16c-1-.1-1.8-1-1.7-2 .1-.9.8-1.7 1.7-1.7h16c1 .1 1.8 1 1.7 2 0 .8-.7 1.6-1.7 1.7z"
+                                class="st1-c" />
+                            <path id="button-phone" fill="#ffbc0e"
+                                d="M195.4 274.6h109.3c8.2 0 14.9 6.6 14.9 14.9v25.3c0 8.2-6.6 14.9-14.9 14.9H195.4c-8.2 0-14.9-6.6-14.9-14.9v-25.3c0-8.3 6.7-14.9 14.9-14.9z" />
+                            <path
+                                d="M304.9 331.5H195.1c-9.1 0-16.4-7.4-16.4-16.5v-25.9c0-9.1 7.4-16.4 16.4-16.4H305c9.1 0 16.4 7.4 16.4 16.4V315c0 9.1-7.4 16.5-16.5 16.5zm-109.8-55c-7 0-12.7 5.7-12.7 12.7V315c0 7 5.7 12.7 12.7 12.7H305c7 0 12.7-5.7 12.7-12.7v-25.9c0-7-5.7-12.7-12.7-12.7l-109.9.1z"
+                                class="st1-c" />
+                            <path
+                                d="m244.1 318.8-14.5-16c-1.1-1.2-1-3.1.2-4.2l4-3.7c1.2-1.1 3.1-1 4.2.2l8.7 9.6 24-22.4c1.2-1.1 3.1-1.1 4.2.2l3.7 4c1.1 1.2 1.1 3.1-.1 4.2L248.4 319c-1.3 1.1-3.1 1-4.3-.2z"
+                                class="st0-c" />
+                            <path
+                                d="M246.4 321.6h-.2c-1.3-.1-2.5-.6-3.4-1.6l-14.5-16c-1.8-2-1.7-5.1.3-6.9l4-3.7c2-1.8 5.1-1.7 6.9.3l7.4 8.2 22.7-21c2-1.8 5.1-1.7 6.9.3l3.7 4c1.8 2 1.7 5.1-.2 6.9l-30.3 28.2c-.9.9-2.1 1.3-3.3 1.3zM235.9 296c-.3 0-.5.1-.8.3l-4 3.7c-.5.4-.5 1.1-.1 1.6l14.5 16c.2.2.5.3.8.4.3 0 .6-.1.8-.3l30.3-28.2c.5-.4.5-1.1.1-1.6l-3.7-4c-.4-.4-1.1-.5-1.6-.1l-24 22.4c-.7.7-1.9.7-2.6-.1l-8.7-9.6c-.3-.4-.6-.5-1-.5z"
+                                class="st1-c" />
+                            <path
+                                d="M215.4 414.3c-1 4.8-2.8 9.4-5.4 13.6-.7 1.2-1.5 2.3-2.4 3.3-1.6-.4-3-.8-4.6-1.2-13.4-3.7-26.4-8.9-38.5-15.6l5.6-2.6c9.9-4.5 26.6-11.8 33.9-12.7 7.7-1.1 13.3 4.7 11.4 15.2z"
+                                class="st2-c" />
+                            <path
+                                d="M207.6 433.1c-.2 0-.3 0-.4-.1-1.6-.4-3.1-.8-4.6-1.2-13.6-3.7-26.7-9-39-15.8-.9-.5-1.2-1.7-.7-2.6.2-.3.5-.6.8-.8l1.5-.7c1.2-.5 2.6-1.2 4.1-1.9 11.7-5.4 27.2-12 34.4-12.9 3.8-.6 7.8.6 10.5 3.4 3 3.2 4.1 8.2 3.1 14.1-1 5-2.9 9.8-5.7 14.2-.8 1.3-1.6 2.5-2.6 3.6-.4.4-.9.6-1.4.7zm-38.9-18.6c11.1 5.8 22.8 10.4 34.9 13.7 1.1.3 2.2.6 3.4.9.6-.7 1.1-1.4 1.5-2.2 2.5-4 4.3-8.4 5.2-13 .8-4.7.1-8.5-2.1-10.8-1.9-1.9-4.7-2.7-7.3-2.2-7.1.9-23.9 8.3-33.3 12.6l-2.3 1z"
+                                class="st1" />
+                            <path
+                                d="M166.5 408.6c-1.1 1.7-2.1 3.4-3.2 5.1-29.1-16.3-53.1-40.4-69.2-69.7 7.3-2.7 15.3-3 22.8-.6 4.1 1.3 38.2 14 38.2 14s3.3-5.4 7.8-12.7c5.7-9.4 13.3-21.8 18.5-30.3.7-1.2 1.4-2.2 2-3.2 3.9-6.4 14.9-22.7 28.9-17.4 13.6 5.1 7.4 17.7 2.6 28.8-.2.4-.3.8-.5 1.2-6.9 16.2-14.9 31.8-24 46.9-7.2 11.9-14.9 23.6-23.9 37.9z"
+                                class="st2-c" />
+                            <path
+                                d="M163.3 415.6c-.3 0-.6-.1-.9-.2-29.4-16.5-53.6-40.8-69.9-70.4-.3-.5-.3-1.1-.1-1.6.2-.5.6-.9 1.1-1.1 7.7-2.9 16.1-3.1 24-.7 3.6 1.1 30.2 11 36.8 13.5l6.9-11.4c5.7-9.4 13.3-21.8 18.5-30.3l.9-1.4 1.1-1.8c12.4-20.1 23.8-21 31.2-18.2 4.2 1.6 7.1 4.1 8.5 7.3 2.8 6.5-.8 14.7-4.2 22.6l-.6 1.4c-.1.4-.3.8-.5 1.2-6.9 16.2-15 32-24.1 47-4.6 7.7-9.5 15.4-14.7 23.6-2.9 4.6-6 9.4-9.2 14.5-.8 1.2-1.5 2.4-2.3 3.6l-.9 1.5c-.3.6-.9.9-1.6.9zm-66.4-70.5c15.6 27.5 38.4 50.3 65.8 66.1.8-1.2 1.5-2.4 2.3-3.6 3.2-5.1 6.3-9.9 9.2-14.5 5.2-8.1 10-15.8 14.6-23.5 9.1-14.9 17-30.5 23.9-46.6.2-.4.3-.8.5-1.2l.6-1.4c3-6.8 6.4-14.5 4.2-19.6-1-2.3-3-4-6.3-5.3-11.1-4.1-20.6 6.8-26.7 16.6-.3.6-.7 1.2-1.1 1.8l-.9 1.4c-5.2 8.5-12.8 21-18.5 30.3-4.5 7.3-7.8 12.7-7.8 12.7-.5.8-1.4 1.1-2.3.8-.3-.1-34.1-12.8-38.1-14-6.3-1.8-13.1-1.9-19.4 0zm69.6 63.5z"
+                                class="st1-c" />
+                            <path
+                                d="M340.3 405.5s-1.3-1.2-3.5-3.4c-6.3-5.9-19.8-18.9-31.7-31.6-10-10.7-18.8-21.1-21.1-26.9-3.3-8.1-1.9-15.7 2.4-21.2 4.1-5 10-8.1 16.4-8.6 2.7-.3 7.1 1.9 12.4 5.6 6.4 4.5 14.1 11.4 22 18.9 17.9 17.1 32.8 31.7 37.6 37"
+                                class="st2-c" />
+                            <path
+                                d="M340.3 407.4c-.5 0-.9-.2-1.3-.5 0 0-1.3-1.2-3.6-3.4-4.2-3.9-18.9-17.9-31.7-31.7-12.1-13-19.4-22.2-21.5-27.5-3.3-8.2-2.4-16.6 2.6-23 4.4-5.4 10.8-8.8 17.7-9.4 3.1-.3 7.5 1.5 13.7 5.9 5.9 4.1 13.4 10.6 22.3 19.1 21.1 20.2 33.4 32.4 37.7 37.2.7.8.6 2-.2 2.7s-2 .6-2.7-.2c-4.1-4.7-16.8-17.1-37.5-36.9-8.8-8.4-16.1-14.7-21.8-18.7-6.9-4.9-9.9-5.4-11.1-5.3-5.9.5-11.3 3.4-15.1 7.9-4.2 5.4-5 12.2-2.1 19.3 1.3 3.3 6 10.6 20.7 26.3 12.8 13.7 27.4 27.6 31.6 31.5 2.2 2.1 3.5 3.3 3.5 3.3.8.7.8 1.9.1 2.7-.3.5-.8.7-1.3.7z"
+                                class="st1" />
+                        </g>
+                        <g id="message">
+                            <path
+                                d="M309.8 71.3V223c0 4.2-3.4 7.5-7.6 7.5H197.8c-4.2 0-7.6-3.4-7.6-7.5V71.3c0-4.2 3.4-7.6 7.6-7.6h104.4c4.2.1 7.6 3.4 7.6 7.6z"
+                                class="st0-c" />
+                            <path
+                                d="M301.6 232.4H198.4c-5.6 0-10.1-4.5-10.1-10.1V72c0-5.6 4.5-10.1 10.1-10.1h103.1c5.6 0 10.1 4.5 10.1 10.1v150.3c.1 5.6-4.5 10.1-10 10.1zM198.4 65.6c-3.5 0-6.3 2.8-6.3 6.3v150.3c0 3.5 2.8 6.3 6.3 6.3h103.1c3.5 0 6.3-2.8 6.3-6.3V72c0-3.5-2.8-6.3-6.3-6.3l-103.1-.1z"
+                                class="st1-c" />
+                            <path
+                                d="M307.5 229.8c-.5 0-1.1-.2-1.4-.6l-71-80.8c-.6-.7-.6-1.8 0-2.5l71-80.8c.7-.8 1.9-.9 2.7-.2.8.7.9 1.9.2 2.7l-69.9 79.6 69.9 79.6c.7.8.6 1.9-.1 2.6-.5.2-.9.4-1.4.4z"
+                                class="st1-c" />
+                            <path
+                                d="M192.5 229.8c-.5 0-.9-.2-1.2-.5-.8-.7-.9-1.9-.2-2.6l57.7-65.3c.7-.8 1.9-.9 2.7-.2.8.7.9 1.9.2 2.7L194 229.2c-.5.4-1 .6-1.5.6zM250.2 133.5c-.5 0-1.1-.2-1.4-.6l-57.7-65.3c-.7-.8-.6-2 .2-2.7s2-.6 2.7.2l57.7 65.3c.7.8.6 2-.2 2.7-.4.2-.9.4-1.3.4z"
+                                class="st1-c" />
+                            <path
+                                d="M272.1 260.3c-1 0-1.9-.8-1.9-1.9v-44.7c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9v44.7c-.1 1-.9 1.9-1.9 1.9zM249 269.7c-1 0-1.9-.8-1.9-1.9v-78.5c.1-1 1-1.8 2-1.7.9.1 1.7.8 1.7 1.7v78.5c.1 1-.8 1.9-1.8 1.9zM220.5 257c-1 0-1.9-.8-1.9-1.9v-19c.1-1 1-1.8 2-1.7.9.1 1.7.8 1.7 1.7v19c.1 1-.7 1.9-1.8 1.9z"
+                                class="st3-c" />
+                        </g>
+                        <g id="lines">
+                            <path
+                                d="M132.2 255.6c-1 0-1.9-.8-1.9-1.9v-68.4c0-1 .8-1.9 1.9-1.9s1.9.8 1.9 1.9v68.4c0 1.1-.9 1.9-1.9 1.9zM103.6 297.9c-1 0-1.9-.9-1.9-1.9v-56.5c.1-1 1-1.8 2-1.7.9.1 1.7.8 1.7 1.7V296c0 1.1-.8 1.9-1.8 1.9zM365.4 230.4c-1 0-1.9-.8-1.9-1.9v-49.3c-.1-1 .7-1.9 1.7-2 1-.1 1.9.7 2 1.7V228.5c.1 1.1-.7 1.9-1.8 1.9zM381 257.3c-1 0-1.9-.8-1.9-1.9v-31.8c.1-1 1-1.8 2-1.7.9.1 1.7.8 1.7 1.7v31.9c.1 1-.8 1.8-1.8 1.8zM402.1 283.5c-1 0-1.9-.8-1.9-1.9v-62c-.1-1 .7-1.9 1.7-2 1-.1 1.9.7 2 1.7v62.3c.1 1-.8 1.9-1.8 1.9z"
+                                class="st5-c" />
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </section>
+        <footer class="container grid margin-vertical">
+            <div class="flex flex-col">
+                Paula Pereyra
+                <span class="copyright"></span>
+            </div>
+            <div class="flex flex-col">
+                <p>Información de contacto:</p>
+                <div class="">
+                    <a href="https://www.linkedin.com/in/paula-pereyra-4b3127327" target="_blank" class="no-link" aria-label="Ir a linkedin de Paula Pereyra">
+                        <svg width="32" height="32" class="icons-social" viewBox="0 0 32 32">
+                            <path
+                                    d="M17.3 14.4zM32 0v32H0V0h32zM10 12.3H5.1v14.3h4.7V12.3zm.2-4.5c0-1.4-1-2.4-2.6-2.4-1.7 0-2.7 1-2.7 2.4s1 2.5 2.6 2.5c1.7 0 2.7-1 2.7-2.5zm17 10.6c0-4.4-2.4-6.5-5.6-6.5a4.7 4.7 0 0 0-4.3 2.4v-2h-4.7v14.3h4.7v-8c0-.4 0-.8.2-1.1.3-.9 1.1-1.8 2.4-1.8 1.8 0 2.5 1.3 2.5 3.3v7.6H27v-8.2z" />
+                        </svg>
+                    </a>
+                    <a href="mailto:paulapereyrallorens@gmail.com" class="no-link" aria-label="Escribir correo a Paula Pereyra">
+                        <svg width="32" height="32" class="icons-social" viewBox="0 0 512 512">
+                            <path d="M36.2 68.3 256 288.1 475.8 68.3z" />
+                            <path d="M256 360.5 0 104.5v339.2h512V104.5z" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </footer>
+        <a class="go-top" href="#main" aria-label="Ir hacia arriba">
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
+                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                    d="m12 4.5l5 5m-5-5l-5 5m5-5v10c0 1.667-1 5-5 5" />
+            </svg>
+        </a>
+    </main>
+
+</body>
+
+</html>

src/index.js

@@ -0,0 +1,180 @@
+import PhotoSwipe from "photoswipe";
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import 'photoswipe/style.css';
+import { getLatestJobs } from "./data/getLatestJobs.js"
+import emailjs from "@emailjs/browser";
+
+const theme = document.querySelector("#change-theme");
+const html = document.querySelector("html");
+const containerGalleries = document.querySelector(".container-galleries");
+const copyright = document.querySelector(".copyright");
+const alert = document.getElementById("alert");
+
+const serviceID = 'default_service';
+const templateID = 'template_758pkwo';
+
+copyright.innerHTML = `@ ${new Date().getFullYear()} - Todos los derechos reservados.`
+
+document.addEventListener("DOMContentLoaded", () => {
+    html.setAttribute("data-theme", window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light")
+
+    theme.addEventListener("change", () => {
+        if (html.getAttribute("data-theme") === "dark") {
+            html.setAttribute("data-theme", "light");
+        } else {
+            html.setAttribute("data-theme", "dark");
+        }
+    })
+
+})
+
+const configureEmailSendContact = () => {
+    emailjs.init({
+        publicKey: 'KjgzLqUvLg29kOMXi',
+    });
+
+    const form = document.querySelector("#contact-form");
+    const btnSend = document.getElementById("button-send");
+
+    form.addEventListener("submit", (event) => {
+        event.preventDefault();
+        btnSend.disabled = true;
+        btnSend.value = "Enviando...";
+
+        const formData = new FormData(event.target);
+        const formObject = {};
+
+        for (let [key, value] of formData.entries()) {
+            formObject[key] = value;
+        }
+
+        if (!formObject.mensaje || !formObject.email) {
+            alert.innerHTML = `Los campos <b>"Mensaje"</b> e <b>"Correo"</b> son obligatorios.`
+            alert.classList.add("active");
+            btnSend.disabled = false;
+            btnSend.value = "Enviar";
+            setTimeout(() => {
+                alert.classList.remove("active");
+            }, 5000);
+        } else {
+            emailjs.sendForm(serviceID, templateID, form)
+                .then(() => {
+                    btnSend.value = 'Enviar';
+                    alert.innerHTML = `El correo ha sido enviado!`
+
+                    alert.classList.add("active");
+                    form.reset();
+                    btnSend.disabled = false;
+                })
+                .catch((err) => {
+                    btnSend.value = 'Enviar';
+                    console.log(JSON.stringify(err));
+                    btnSend.disabled = false;
+                });
+
+            setTimeout(() => {
+                alert.classList.remove("active");
+            }, 5000);
+        }
+    });
+};
+
+configureEmailSendContact()
+
+// Trabajos previos
+const setDataToGaleries = (client, id, info) => {
+    const gallery = document.createElement("div");
+    gallery.id = id;
+    gallery.classList.add('pswp-gallery');
+
+    const images = getLatestJobs(client).images;
+    console.log(images);
+    
+
+    // Crea el primer elemento de imagen visible
+    const firstImage = document.createElement("article");
+    firstImage.style.maxHeight = "515px";
+    firstImage.style.minHeight = "515px";
+    firstImage.classList.add('flex', 'flex-col');
+    const firstImageLink = document.createElement("a");
+    firstImageLink.href = `/assets/img/jobs/${client}/${images[0]}.webp`;
+    firstImageLink.dataset.pswpWidth = "3000";
+    firstImageLink.dataset.pswpHeight = "2000";
+    firstImageLink.dataset.cropped = "true";
+    firstImageLink.ariaLabel = `Imagen correspondiente a cliente ${client}`
+    const firstImageImg = document.createElement("img");
+    firstImageImg.src = `/assets/img/jobs/${client}/${images[0]}.webp`;
+    firstImageImg.width = 500;
+    firstImageImg.height = 500;
+    firstImageImg.alt = `${client.toLowerCase()}-0`; // Asignar el atributo alt aquí
+    firstImageLink.append(firstImageImg);
+    
+    // Encabezado y footer de la tarjeta
+    const header = document.createElement("header");
+    header.textContent = client.toUpperCase();
+    header.style.textAlign = "center";
+    const footer = document.createElement("footer");
+    footer.textContent = info.description;
+
+    firstImage.append(firstImageLink);
+    firstImage.insertAdjacentElement("afterbegin", header);
+    firstImage.insertAdjacentElement("beforeend", footer);
+    gallery.append(firstImage);
+
+    // Crea un contenedor para ocultar las imágenes restantes inicialmente
+    const hiddenImagesContainer = document.createElement('div');
+    hiddenImagesContainer.classList.add('pswp-hidden-images'); // Agregar una clase personalizada para diseñar
+
+    // Crear y ocultar elementos restantes
+    images.slice(1).forEach((job, i) => {
+        const hiddenImage = document.createElement("article");
+        const hiddenImageLink = document.createElement("a");
+        hiddenImageLink.href = `/assets/img/jobs/${client}/${job}.webp`;
+        hiddenImageLink.dataset.pswpWidth = '1280';
+        hiddenImageLink.dataset.pswpHeight = '720';
+        hiddenImageLink.dataset.cropped = 'true';
+        hiddenImageLink.ariaLabel = `Imagen correspondiente a cliente ${client}-${i}`
+        const hiddenImageImg = document.createElement("img");
+        hiddenImageImg.src = `/assets/img/jobs/${client}/${job}.webp`;
+        hiddenImageImg.alt = `${client.toLowerCase()}-${i}`
+        hiddenImageLink.append(hiddenImageImg);
+        hiddenImage.append(hiddenImageLink);
+        hiddenImagesContainer.append(hiddenImage);
+    });
+
+    gallery.append(hiddenImagesContainer);
+    containerGalleries.appendChild(gallery);
+
+    const lightbox = new PhotoSwipeLightbox({
+        gallery: `#${id}`,
+        children: 'a',
+        pswpModule: PhotoSwipe,
+        arrowKeys: true,
+        initialZoomLevel: 'fit',
+        secondaryZoomLevel: 1.5,
+        maxZoomLevel: 1,
+    });
+
+    // Detector de eventos de clic a la primera imagen para activar PhotoSwipe
+    firstImageLink.addEventListener('click', () => lightbox.init());
+
+    lightbox.init();
+};
+
+const clients = ["zonis", "multipago", "vakoSRL"];
+clients.forEach((job, i) => {
+    const info = getLatestJobs(job);
+    const index = i + 1;
+    if (info) {
+        const idGallery = `gallery-${job}-${index}`;
+        setDataToGaleries(job, idGallery, info);
+    }
+});
+
+const topTop = document.querySelector(".go-top");
+window.addEventListener("scroll", () => {
+    const scrollPos = window.scrollY;
+    topTop.style.display = (scrollPos > 800)
+        ? "block"
+        : "none"
+})

vite.config.js

@@ -0,0 +1,47 @@
+import { defineConfig } from "vite";
+import { ViteMinifyPlugin } from 'vite-plugin-minify'
+import { dirname } from 'path'
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const projectRoot = dirname(import.meta.filename);
+
+const paths = {
+  src: `${projectRoot}/src`,
+  assets: `${projectRoot}/public/assets`
+}
+
+export default defineConfig({
+  root: './src',
+  base: '/',
+  resolve: {
+    alias: {
+      '@': paths.src, // Alias para acceder a la carpeta src
+      '@assets': paths.assets, // Alias para acceder a los assets
+    },
+  },
+  build: {
+    outDir: '../dist',
+    minify: "esbuild",
+    emptyOutDir: true,
+    build: {
+      rollupOptions: {
+        output: {
+          assetFileNames: (assetInfo) => {
+            if (assetInfo.name.endsWith('.css')) return 'assets/[name][extname]';
+          },
+        },
+      },
+    }
+  },
+  plugins: [
+    ViteMinifyPlugin({}),
+    viteStaticCopy({
+      targets: [
+        {
+          src: `${paths.src}/assets/img/jobs/**/`, // Ruta de origen
+          dest: 'assets/img/jobs'        // Carpeta de destino dentro de dist
+        }
+      ]
+    })
+  ],
+});