Skip to content

Chucky22Mendoza/loginlock

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Jesús Mendoza Verduzco — Portfolio

Deploy License HTML5 CSS3 JavaScript

🌐 Live: jesus-mendoza.pages.dev

Personal portfolio and CV landing page for Jesús Mendoza Verduzco, Senior Frontend Developer with 6+ years of experience in React 18, Next.js, TypeScript, and Java/Spring Boot.


📸 Preview

Portfolio Preview


✨ Features

  • 🌍 Bilingual (ES / EN) — Custom vanilla JS i18n system with localStorage persistence
  • 📄 CV Download — Direct download of PDF resume in the active language
  • 🔍 SEO Optimized — Open Graph, Twitter Cards, JSON-LD (Schema.org), hreflang, canonical URL, sitemap.xml, robots.txt
  • Performance — Lazy loading on all portfolio images
  • 📱 Responsive — Mobile-first layout with Bootstrap 4
  • 🎨 Dark theme — Sleek dark design with accent color #18d26e
  • 🧩 Dynamic data — Age and years of experience calculated automatically in JS

🗂️ Project Structure

loginlock/
├── index.html              # Main HTML — all sections, data-i18n attributes
├── robots.txt              # Allow all crawlers, points to sitemap
├── sitemap.xml             # XML sitemap with hreflang for ES/EN
├── assets/
│   ├── css/
│   │   └── style.css       # Main stylesheet (includes i18n UI, Open Source section)
│   ├── js/
│   │   ├── main.js         # Template JS (nav, skills animation, carousel)
│   │   ├── modal.js        # Portfolio image modal
│   │   └── i18n.js         # Bilingual translation system (ES / EN)
│   ├── img/                # Profile photo, background, favicon
│   ├── CV - ES.pdf         # Spanish CV
│   ├── CV - EN.pdf         # English CV
│   └── vendor/             # Bootstrap, jQuery, icofont, boxicons, etc.

🌍 i18n — Language System

The translation system is implemented in pure vanilla JavaScript without any external libraries.

How it works

All translatable elements use a data-i18n attribute with a translation key:

<h2 data-i18n="resume.section_label">Currículum</h2>

The assets/js/i18n.js file contains all translations for both languages and applies them on load and on language toggle:

// Toggle language
toggleLanguage('en'); // or 'es'

The selected language is persisted in localStorage and the <html lang=""> attribute is updated dynamically. The CV download link also switches automatically between CV - ES.pdf and CV - EN.pdf.


🔍 SEO Implementation

Feature Status
<title> — descriptive, keyword-rich
<meta name="description"> — bilingual
<meta name="keywords">
Open Graph (og:title, og:description, og:image, og:locale)
Twitter Card
JSON-LD — Schema.org Person
<link rel="canonical">
hreflang (es, en, x-default)
sitemap.xml
robots.txt
loading="lazy" on images
Semantic HTML5 (<nav aria-label>, <section>, <header>)

📋 Sections

Section Description
Home / Header Name, title, nav, language selector, social links, CV download
About Personal info, dynamic age, professional bio
Skills Animated progress bars — React, TS, Java, Docker, etc.
Interests Icon grid of personal and professional interests
Resume Education + professional experience timeline
Open Source npm packages: just-barcode-hook, loginlock-kit
Portfolio Featured projects with modal image viewer
Contact City, social links, email, phone

💼 Professional Experience

Role Company Period
Senior Frontend Developer AI27 Predictive Intelligence Jul 2024 – Present
Full Stack Developer Xilion.io & Kiotrack Sep 2018 – Jul 2024
Semi-Senior Frontend Dev Archivo Histórico del Estado de Colima 2017 – 2018

📦 Open Source Packages

Package Downloads Link
just-barcode-hook 50+ / week npm
loginlock-kit 20+ / week npm

🚀 Deployment

This site is deployed on Cloudflare Pages via GitHub integration.

Steps to deploy manually

# 1. Clone the repo
git clone https://github.com/Chucky22Mendoza/loginlock.git
cd loginlock

# 2. Open locally (no build step needed — pure HTML/CSS/JS)
# Simply open index.html in a browser, or use a local server:
npx serve .

# 3. Push to GitHub — Cloudflare Pages auto-deploys on push to main
git add .
git commit -m "chore: update portfolio"
git push origin main

🛠️ Tech Stack

  • HTML5 — Semantic structure
  • CSS3 / Vanilla CSS — Custom dark theme, animations
  • JavaScript (ES6+) — i18n engine, dynamic data, modal logic
  • Bootstrap 4 — Responsive grid and utilities
  • jQuery — Used by legacy template scripts (nav, carousel)
  • Boxicons / ICOFont / RemixIcon — Icon libraries

📬 Contact

Channel Value
Email loginlock22@gmail.com
LinkedIn linkedin.com/in/jesúsmendoza22
GitHub github.com/Chucky22Mendoza
WhatsApp +52 312 112 52 86
Location Colima, México

📄 License

This project is open source and available under the MIT License.

About

MY FREELANCE PORTFOLIO

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors