Ariel Parra Website

A simple, lightweight personal website. Previously hosted at arielparra.tech.

Built with plain HTML, CSS, and JavaScript—following HTML5 standards without bloated frameworks. Features custom mobile responsiveness, auto language detection, design, animations, and a Python-based static site generator.

Quick Start

make              # Build all pages
make index        # Build specific page
make clean        # Remove generated HTML

Project Structure

├── Makefile            # Build automation
├── *.md                # Source files with YAML frontmatter
├── scripts/            # Python build and management scripts
│   ├── md2html.py             # Python static site generator
│   ├── manage_portfolio.py    # CLI tool to manage portfolio JSON
│   ├── manage_credentials.py  # CLI tool to manage credentials JSON
│   └── base_manager.py        # OOP Base class for CLI tools
├── css/                # Modular stylesheets
│   ├── theme.css       # Color palette, light/dark themes
│   ├── common.css      # Base styles (nav, buttons, cards, scrollbar)
│   ├── credentials.css # Credentials card styles
│   ├── portfolio.css   # Portfolio grid styles
│   └── 404.css         # 404 page styles
├── js/                 # JavaScript modules
├── portfolio/          # Portfolio page sources
│   ├── data/
│   │   └── projects.json      # All portfolio projects data
│   ├── index.md               # Source markdown
│   └── index.html             # Generated output
├── contact/            # Contact page sources
└── credentials/        # Credentials page sources
    ├── data/
    │   └── credentials.json   # All credentials data (education, certs, etc.)
    ├── docs/                  # PDF documentation files
    ├── img/                   # Credential images
    ├── index.md               # Source markdown
    └── index.html             # Generated output

Markdown Frontmatter Format

---
title: Page Title
lang: en
base_href: ./
nav_current: 1
js: [main, menu, theme, language]
css: [theme, common, credentials]
---

content here

i18n Syntax

((en))English text((/en))((es))Texto en español((/es))

Features

• No dependencies for core website: Vanilla HTML, CSS, JavaScript
• Lightweight: No frameworks, no bundlers for the frontend.
• Custom site generator: Python-based md2html.py
• Theming: Manual light/dark mode support
• Internationalization: Auto language detection
• Responsive: Custom mobile-first design
• Animated: Subtle CSS animations

Quality Assurance & Validation

To maintain high code quality and standard compliance, the project includes an automated linting and validation pipeline:

• HTML & CSS Validation: Uses scripts/validate.py to check all generated HTML and CSS files against the official W3C Validation APIs (Nu HTML Checker & Jigsaw CSS Validator).
• JavaScript Linting: Uses ESLint with a relaxed airbnb-base configuration tailored for a vanilla global-scope architecture.
• Python Linting: Uses Flake8 to enforce PEP8 standards and Autopep8 for automatic formatting of the custom CLI tools.

Run the full validation suite using:

make validate  # Validates HTML and CSS via W3C
make lint      # Lints JS files via ESLint and Python files via Flake8

Credentials Management

The site uses a JSON-based data source for credentials, processed into HTML by manage_credentials.py.

credentials.json

Contains all education records, certifications, certificates, and badges organized by type:

• type: Category (education, certification, certificate, badge, award)
• issuer: Issuing organization
• title: Credential name (with i18n syntax)
• level: Rank or level achieved
• score: Achievement score
• issuedOn: Date issued (YYYY-MM format)
• topics: Tags (cybersecurity, devops, ai, cloud, etc.)
• skills: List of skills gained
• image: Path to credential image
• link: Verification URL or PDF
• description: Bilingual description (en/es)

manage_credentials.py

A CLI tool for managing credentials data:

python scripts/manage_credentials.py add          # Add new credential (interactive)
python scripts/manage_credentials.py list        # List all credentials
python scripts/manage_credentials.py list --sort year    # Sort by year
python scripts/manage_credentials.py list --type certification  # Filter by type
python scripts/manage_credentials.py get <id>    # View specific credential
python scripts/manage_credentials.py delete <id>  # Delete credential
python scripts/manage_credentials.py sort           # Sort credentials by type then date
python scripts/manage_credentials.py generate    # Generate credentials/index.md from JSON

After adding or modifying credentials in credentials.json, run generate to rebuild credentials/index.md, then run make credentials to build the final HTML.

Portfolio Projects Management

Similar to credentials, the portfolio uses a JSON-based data source, processed into HTML by manage_portfolio.py.

projects.json

Contains all your portfolio projects:

• id: Unique identifier for the project
• title: Project name
• date: Project date (YYYY-MM format)
• technologies: Array of technology tags used in the project
• description: Bilingual description (en/es)
• image: Path or URL to project preview image/gif
• link: URL to the project repository or live demo

manage_portfolio.py

A CLI tool for managing portfolio data:

python scripts/manage_portfolio.py add          # Add new project (interactive)
python scripts/manage_portfolio.py list         # List all projects
python scripts/manage_portfolio.py get <id>     # View specific project
python scripts/manage_portfolio.py delete <id>  # Delete project
python scripts/manage_portfolio.py sort         # Sort projects alphabetically
python scripts/manage_portfolio.py generate     # Generate portfolio/index.md from JSON

After adding or modifying projects in projects.json, run generate to rebuild portfolio/index.md, then run make portfolio to build the final HTML.

Credits

• Unknown Pleasures visualization for 404 page, originally from Max Halford/procedural-art
• 88x31 Button Maker by sadgrl