Documentation

Last updated: September 25, 2026.

Overview

samueltorres.dev is Samuel Torres Pichardo's portfolio. It is a static, bilingual (Spanish / English) site built on top of the Ashley HTML template. There is no framework and no build step for the pages themselves: every page is a hand-written .html file that the server delivers as-is.

The only moving parts are:

• SCSS, compiled locally into a single css/style.css (with Prepros).
• JavaScript in the browser: page transitions, animations, sliders, the language switch and the contact form.
• PHP on the server, used only by mail.php (contact form) and, optionally, by the in-house analytics.

Project structure

Everything lives in one folder. The HTML pages sit at the root; assets and server code live in subfolders. The Uploaded? column says whether the item belongs on the server.

Pages and languages

Every page exists twice, once per language, as two separate files. There is no translation engine: each file already contains its final text.

Naming convention

• English is the base name: contact.html, cv.html, case-study-bea.html…
• Spanish adds -es: contact-es.html, cv-es.html, case-study-bea-es.html…
• The one exception is the home page: the Spanish home is index.html (served at /) and its English twin is home-1.html. The old home-1-es.html is retired and redirects to /.
• 404.html is the only page without a twin.

Page groups

ES · EN language switch

initLangSwitch() in js/main.js adds the ES · EN button to the top bar of every page. It works out the twin page from the file name (applying the naming convention and the home exception above) and simply links to it. It remembers the choice in localStorage but never redirects on its own, so whoever shares a Spanish link always gets the Spanish page. On 404.html the button is disabled.

HTML markup

Every page follows the same skeleton. Knowing what each block does makes it easy to edit any page without breaking the template:

<!DOCTYPE html>
<html lang="en"> <!-- or "es" on the Spanish twin -->

<head>
    <!-- meta, description, 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>

        <!-- scrollbar progress -->
        <div class="mil-progress-track"> ... </div>

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

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

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

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

                <!-- banner --> ...
                <!-- page sections --> ...
                <!-- footer --> ...
                <!-- hidden elements --> ...

            </div>
        </div>

    </div>
    <!-- wrapper end -->

    <!-- scripts: plugins, then js/main.js, then page scripts -->

</body>
</html>

Useful classes

• mil-up: the element fades in and rises as it enters the screen (GSAP ScrollTrigger).
• mil-mb-30, mil-mb-60, mil-p-120-90…: spacing helpers (bottom margin, section padding) in pixels.
• mil-dark-bg, mil-muted, mil-light-soft, mil-thin: background and text tones.

CSS and SCSS

Pages load four plugin stylesheets plus the site's own stylesheet, always in this order:

<!-- 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: only the grid system (container, row, col-lg-*), not the rest of Bootstrap.
• Font Awesome: icons.
• Swiper: slider styles.
• Fancybox: lightbox styles (enlarged images and certificates).

The site's own styles (SCSS)

css/style.css is generated; do not edit it by hand. Edit the files in scss/ and compile with Prepros (the prepros.config file in the root already has the configuration). scss/style.scss is the entry point that imports the rest:

JavaScript

Every page loads the same libraries and then js/main.js. After that come only the scripts that page needs.

<!-- 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>
<!-- page scripts (only where needed) -->
<script src="/js/contact-form.js"></script>

Libraries

Site scripts

Preloader

Every page starts with a short black-screen animation in two stages, run by GSAP from the "preloader" section of js/main.js:

1. Three words (.mil-animation-1) appear and fade one after another.
2. The domain (.mil-animation-2): a colour block sweeps across and reveals samueltorres.dev.
3. The screen fades out, gets the mil-hidden class and the page becomes usable.

<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">Applied</p>
            <p class="mil-h3 mil-muted">Engineering</p>
            <p class="mil-h3 mil-muted mil-thin">Results</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>

Contact form

The form on contact.html / contact-es.html sends an email to Samuel's inbox. It involves three pieces:

1. HTML: <form id="mil-contact-form" action="/mail.php" method="POST"> with the fields name, email, message and a hidden anti-bot field, website. The data-msg-* attributes hold the messages shown to the visitor in each language.
2. js/contact-form.js: checks that nothing is empty, disables the button ("Sending…"), sends the data with fetch plus the X-Requested-With: XMLHttpRequest header, and then shows the success or error message.
3. mail.php: validates everything again on the server and sends the email with PHP's mail() function.

Checks in mail.php, in order

When everything passes, the answer is {"success": true}. The email goes out as [email protected] with the visitor's address in Reply-To, so clicking "Reply" in Gmail answers the visitor directly. The recipient is written into the server code and never comes from the browser, which means nobody can use the form to send email to anyone else.

In-house analytics

The site includes its own visit counter, with no Google Analytics or any other third party. It is built but not switched on: no page loads track.js yet. It has four parts:

Privacy: the IP address is never stored. The server keeps only a one-way fingerprint (SHA-256 of IP + browser + the day's date) that changes every day, so it groups the pages seen in one visit but cannot identify anyone or follow them from one day to the next. Full steps to switch it on (database, config/db.php, first admin, cron) are in README-analytics.md.

SEO

• canonical: each page declares its own final URL, so Google does not treat variants as duplicates.
• hreflang: each page points to its English twin, its Spanish twin, and an x-default. This tells Google which version to show to each visitor.
• Open Graph: the title, description and image (img/og-cover.jpg) used when a link is shared on LinkedIn, WhatsApp and similar apps. Currently present on the home pages, the portfolio, the case studies and the certifications page.
• sitemap.xml: the list of the 60 public URLs with their language pairs. Do not edit it by hand. Regenerate it with php tools/build-sitemap.php from the project root. The script skips 404.html, documentation*.html and the retired home-1-es.html.
• robots.txt: allows the whole site, blocks /admin/, /api/, /config/, /sql/, /docs/, /cron/ and /tools/, and points to the sitemap.

Server (.htaccess)

The .htaccess file in the root tells Apache how to serve the site:

Deployment

Changes are published by hand, uploading files through the cPanel File Manager into public_html, keeping the same folder structure as the project.

1. Make and review the changes locally (open the pages in the browser).
2. If you touched SCSS, compile with Prepros so css/style.css gets updated.
3. If you added or removed pages, regenerate sitemap.xml.
4. Note the changed files in DEPLOY-PENDIENTE.txt (a local list in the form file → upload to public_html/folder/, never uploaded or committed to git).
5. Upload each file to its folder in public_html, replacing the old one.
6. Check the live site: the edited pages, the ES · EN switch and, if you touched mail.php, send a test from the form.

Fonts

• Outfit (weights 100–900) from Google Fonts. It is imported in scss/_variables.scss and used across the whole site.
• Code blocks on this page use the system monospace font (Courier New).

Icons

• Font Awesome 5: social-network icons, envelope, arrows. Usage: <i class="fab fa-linkedin"></i> (brands) or <i class="fas fa-chevron-down"></i> (solid).
• Inline SVGs from the template: the cursor arrow, the decorative lines and the arrows on buttons (in .mil-hidden-elements).
• Site icons: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png and img/icon-192.png / icon-512.png (declared in site.webmanifest).

Versión en español