Documentación

Última actualización: 25 de septiembre de 2026.

Resumen

samueltorres.dev es el portafolio de Samuel Torres Pichardo. Es un sitio estático y bilingüe (español / inglés) construido sobre la plantilla HTML Ashley. No usa framework ni proceso de compilación para las páginas: cada página es un archivo .html escrito a mano que el servidor entrega tal cual.

Las únicas piezas que se mueven son:

• SCSS, que se compila en local a un solo css/style.css (con Prepros).
• JavaScript en el navegador: transiciones entre páginas, animaciones, sliders, el selector de idioma y el formulario de contacto.
• PHP en el servidor, solo para mail.php (formulario de contacto) y, opcionalmente, para la analítica propia.

Estructura del proyecto

Todo vive en una sola carpeta. Las páginas HTML están en la raíz y los recursos y el código del servidor en subcarpetas. La columna ¿Se sube? indica si el elemento va al servidor.

Páginas e idiomas

Cada página existe dos veces, una por idioma, como dos archivos separados. No hay motor de traducción: cada archivo ya trae su texto definitivo.

Convención de nombres

• El inglés lleva el nombre base: contact.html, cv.html, case-study-bea.html…
• El español agrega -es: contact-es.html, cv-es.html, case-study-bea-es.html…
• La única excepción es el home: el home en español es index.html (se sirve en /) y su gemelo en inglés es home-1.html. El viejo home-1-es.html está retirado y redirige a /.
• 404.html es la única página sin gemela.

Grupos de páginas

Selector de idioma ES · EN

initLangSwitch(), en js/main.js, agrega el botón ES · EN a la barra superior de todas las páginas. Deduce la página gemela a partir del nombre del archivo (con la convención y la excepción del home de arriba) y simplemente enlaza a ella. Guarda la elección en localStorage, pero nunca redirige por su cuenta: quien comparte un enlace en español siempre recibe la página en español. En 404.html el botón aparece deshabilitado.

Marcado HTML

Todas las páginas siguen el mismo esqueleto. Si sabes qué hace cada bloque, puedes editar cualquier página sin romper la plantilla:

<!DOCTYPE html>
<html lang="es"> <!-- o "en" en la gemela en inglés -->

<head>
    <!-- meta, descripción, canonical, hreflang, favicons, CSS -->
</head>

<body>

    <!-- wrapper -->
    <div class="mil-wrapper" id="top">

        <!-- cursor -->
        <div class="mil-ball"> ... </div>

        <!-- preloader -->
        <div class="mil-preloader"> ... </div>

        <!-- barra de progreso -->
        <div class="mil-progress-track"> ... </div>

        <!-- menú -->
        <div class="mil-menu-frame"> ... </div>

        <!-- cortina -->
        <div class="mil-curtain"></div>

        <!-- marco -->
        <div class="mil-frame"> ... </div>

        <!-- contenido -->
        <div class="mil-content">
            <div id="swupMain" class="mil-main-transition">

                <!-- banner --> ...
                <!-- secciones de la página --> ...
                <!-- footer --> ...
                <!-- elementos ocultos --> ...

            </div>
        </div>

    </div>
    <!-- fin del wrapper -->

    <!-- scripts: plugins, luego js/main.js, luego los de la página -->

</body>
</html>

Clases útiles

• mil-up: el elemento aparece y sube al entrar en pantalla (GSAP ScrollTrigger).
• mil-mb-30, mil-mb-60, mil-p-120-90…: ayudas de espaciado (margen inferior, relleno de sección) en píxeles.
• mil-dark-bg, mil-muted, mil-light-soft, mil-thin: tonos de fondo y de texto.

CSS y SCSS

Las páginas cargan cuatro hojas de estilo de plugins y la hoja propia del sitio, siempre en este orden:

<!-- bootstrap grid css -->
<link rel="stylesheet" href="/css/plugins/bootstrap-grid.css">
<!-- font awesome css -->
<link rel="stylesheet" href="/css/plugins/font-awesome.min.css">
<!-- swiper css -->
<link rel="stylesheet" href="/css/plugins/swiper.min.css">
<!-- fancybox css -->
<link rel="stylesheet" href="/css/plugins/fancybox.min.css">
<!-- ashley scss -->
<link rel="stylesheet" href="/css/style.css">

Plugins

• Bootstrap grid: solo el sistema de rejilla (container, row, col-lg-*), no el resto de Bootstrap.
• Font Awesome: iconos.
• Swiper: estilos de los sliders.
• Fancybox: estilos del visor ampliado (imágenes y certificados).

Estilos propios (SCSS)

css/style.css es un archivo generado: no lo edites a mano. Edita los archivos de scss/ y compila con Prepros (el archivo prepros.config de la raíz ya trae la configuración). scss/style.scss es la entrada que importa a los demás:

JavaScript

Todas las páginas cargan las mismas librerías y después js/main.js. Al final van solo los scripts que esa página necesita.

<!-- jQuery js -->
<script src="/js/plugins/jquery.min.js"></script>
<!-- swup js -->
<script src="/js/plugins/swup.min.js"></script>
<!-- swiper js -->
<script src="/js/plugins/swiper.min.js"></script>
<!-- fancybox js -->
<script src="/js/plugins/fancybox.min.js"></script>
<!-- gsap js -->
<script src="/js/plugins/gsap.min.js"></script>
<!-- scroll smoother -->
<script src="/js/plugins/smooth-scroll.js"></script>
<!-- scroll trigger js -->
<script src="/js/plugins/ScrollTrigger.min.js"></script>
<!-- scroll to js -->
<script src="/js/plugins/ScrollTo.min.js"></script>
<!-- ashley js -->
<script src="/js/main.js"></script>
<!-- scripts de la página (solo donde hacen falta) -->
<script src="/js/contact-form.js"></script>

Librerías

Scripts del sitio

Preloader

Cada página arranca con una animación breve sobre fondo negro, en dos etapas, que GSAP ejecuta desde la sección "preloader" de js/main.js:

1. Tres palabras (.mil-animation-1) aparecen y se desvanecen una tras otra.
2. El dominio (.mil-animation-2): un bloque de color lo barre y revela samueltorres.dev.
3. La pantalla se desvanece, recibe la clase mil-hidden y la página queda lista para usarse.

<div class="mil-preloader">
    <div class="mil-preloader-animation">
        <div class="mil-pos-abs mil-animation-1">
            <p class="mil-h3 mil-muted mil-thin">Ingeniería</p>
            <p class="mil-h3 mil-muted">Aplicada</p>
            <p class="mil-h3 mil-muted mil-thin">Resultados</p>
        </div>
        <div class="mil-pos-abs mil-animation-2">
            <div class="mil-reveal-frame">
                <p class="mil-reveal-box"></p>
                <p class="mil-h3 mil-muted mil-thin">samueltorres.dev</p>
            </div>
        </div>
    </div>
</div>

Formulario de contacto

El formulario de contact.html / contact-es.html envía un correo a la bandeja de Samuel. Participan tres piezas:

1. HTML: <form id="mil-contact-form" action="/mail.php" method="POST"> con los campos name, email, message y un campo oculto antibots, website. Los atributos data-msg-* guardan los mensajes que ve el visitante en cada idioma.
2. js/contact-form.js: revisa que nada esté vacío, desactiva el botón ("Enviando…"), manda los datos con fetch más la cabecera X-Requested-With: XMLHttpRequest y luego muestra el mensaje de éxito o de error.
3. mail.php: vuelve a validar todo en el servidor y envía el correo con la función mail() de PHP.

Revisiones de mail.php, en orden

Si todo pasa, la respuesta es {"success": true}. El correo sale como [email protected] con la dirección del visitante en Reply-To, así que al pulsar "Responder" en Gmail le contestas directo al visitante. El destinatario está escrito en el código del servidor y nunca viene del navegador, por lo que nadie puede usar el formulario para mandar correos a otra persona.

Analítica propia

El sitio trae su propio contador de visitas, sin Google Analytics ni ningún otro tercero. Está construido pero no activado: todavía ninguna página carga track.js. Tiene cuatro partes:

Privacidad: la dirección IP nunca se guarda. El servidor solo conserva una huella de un solo sentido (SHA-256 de IP + navegador + la fecha del día) que cambia a diario: sirve para agrupar las páginas de una misma visita, pero no permite identificar a nadie ni seguirlo de un día a otro. Los pasos completos para activarla (base de datos, config/db.php, primer administrador, cron) están en README-analytics.md.

SEO

• canonical: cada página declara su propia URL definitiva, para que Google no trate las variantes como duplicados.
• hreflang: cada página apunta a su gemela en inglés, a su gemela en español y a un x-default. Así Google sabe qué versión mostrarle a cada visitante.
• Open Graph: el título, la descripción y la imagen (img/og-cover.jpg) que se usan al compartir un enlace en LinkedIn, WhatsApp y apps parecidas. Hoy está en los home, el portafolio, los casos de estudio y certificaciones.
• sitemap.xml: la lista de las 60 URL públicas con sus pares de idioma. No lo edites a mano. Regenéralo con php tools/build-sitemap.php desde la raíz del proyecto. El script omite 404.html, documentation*.html y el retirado home-1-es.html.
• robots.txt: permite todo el sitio, bloquea /admin/, /api/, /config/, /sql/, /docs/, /cron/ y /tools/, y apunta al sitemap.

Servidor (.htaccess)

El archivo .htaccess de la raíz le dice a Apache cómo servir el sitio:

Publicación

Los cambios se publican a mano: se suben los archivos con el Administrador de archivos de cPanel a public_html, respetando la misma estructura de carpetas del proyecto.

1. Haz y revisa los cambios en local (abre las páginas en el navegador).
2. Si tocaste SCSS, compila con Prepros para actualizar css/style.css.
3. Si agregaste o quitaste páginas, regenera sitemap.xml.
4. Anota los archivos modificados en DEPLOY-PENDIENTE.txt (una lista local con el formato archivo → subir a public_html/carpeta/; no se sube al servidor ni a git).
5. Sube cada archivo a su carpeta dentro de public_html, reemplazando el anterior.
6. Revisa el sitio en vivo: las páginas editadas, el selector ES · EN y, si tocaste mail.php, manda una prueba desde el formulario.

Fuentes

• Outfit (pesos 100–900), de Google Fonts. Se importa en scss/_variables.scss y se usa en todo el sitio.
• Los bloques de código de esta página usan la fuente monoespaciada del sistema (Courier New).

Iconos

• Font Awesome 5: iconos de redes sociales, sobre, flechas. Uso: <i class="fab fa-linkedin"></i> (marcas) o <i class="fas fa-chevron-down"></i> (sólidos).
• SVG propios de la plantilla: la flecha del cursor, las líneas decorativas y las flechas de los botones (en .mil-hidden-elements).
• Iconos del sitio: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png e img/icon-192.png / icon-512.png (declarados en site.webmanifest).

English version