Skip to content

README.md

Latest commit

 

History

History
212 lines (160 loc) · 6.2 KB

README.md

File metadata and controls

212 lines (160 loc) · 6.2 KB

LTS Commerce Portfolio

Professional freelance PHP engineer portfolio website showcasing expertise in modern PHP development, infrastructure automation, and high-performance web applications with hybrid pagination system.

🚀 Live Site

The portfolio is automatically deployed to GitHub Pages at: ltscommerce.dev

📋 Overview

This is a statically generated portfolio site built with modern web technologies and automated CI/CD deployment. The site features:

  • Modern Build System: Vite 5.x with ES modules and asset optimization
  • Template-Driven Development: EJS templating system for maintainable code
  • Automated Deployment: GitHub Actions CI/CD with quality gates
  • Performance Optimized: Lighthouse-tested with automated performance monitoring
  • Content Management: Dynamic article system with syntax highlighting

🏗️ Architecture

Technology Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Templating: EJS (Embedded JavaScript templates)
  • Build Tool: Vite 5.x (ES module bundler)
  • Package Manager: npm with lockfile
  • Syntax Highlighting: Highlight.js
  • CI/CD: GitHub Actions
  • Hosting: GitHub Pages

Project Structure

├── private_html/        # Source files (development)
│   ├── templates/       # EJS template system
│   │   ├── layouts/     # Base layouts (base.ejs, page.ejs, article.ejs)
│   │   ├── partials/    # Reusable components (navigation.ejs, footer.ejs)
│   │   └── components/  # Smaller components (article-card.ejs)
│   ├── pages/           # EJS page templates
│   ├── data/            # Template data (site.json, navigation.json)
│   ├── articles/        # Article EJS templates
│   ├── css/             # Stylesheets
│   ├── js/              # JavaScript modules
│   └── images/          # Static assets
├── public_html/         # Built files (production)
├── scripts/             # Build utilities
├── .github/workflows/   # CI/CD configuration
└── qa-tools/           # Code quality tools

🛠️ Development Setup

Prerequisites

  • Node.js 18+ and npm
  • Git

Local Development

  1. Clone the repository

    git clone <repository-url>
cd site

  2. Install dependencies

    npm install

  3. Start development server

    npm run dev

    The site will be available at http://localhost:3000

  4. Build for production

    npm run build

  5. Preview production build

    npm run preview

Build Process

The site uses a three-stage build process:

  1. Article Registration - Scans EJS templates and extracts metadata
  2. Vite Asset Processing - Bundles and optimizes CSS/JS with hashing
  3. EJS Template Processing - Converts templates to static HTML

📝 Content Management

Creating New Articles

Articles are created using EJS templates with automated metadata extraction:

  1. Create article template

    cp private_html/articles/example-article.ejs private_html/articles/your-article-slug.ejs

  2. Edit the EJS template

    <%- include('../templates/layouts/article', {
    articleTitle: 'Your Article Title',
    articleDescription: 'SEO meta description',
    articleDate: '2025-07-25',
    articleCategory: 'php|infrastructure|database|ai',
    articleReadingTime: '6',
    articleContent: `
        <div class="intro">
            <p class="lead">Lead paragraph...</p>
        </div>
        <section>
            <h2>Section Title</h2>
            <pre><code class="language-php"><?php echo "Hello World"; ?></code></pre>
        </section>
    `
}) %>

  3. Test locally

    npm run dev

  4. Deploy (articles are automatically registered!)

    git add .
git commit -m "Add new article: Your Article Title"
git push origin main

Supported Code Languages

  • CSS, JavaScript, PHP, Bash, SQL, YAML, JSON, Nginx

🚀 Deployment

Automated Deployment

Every push to the main branch triggers the automated CI/CD pipeline:

  1. Auto-Format - Prettier formats all code and commits changes
  2. Quality Checks - Linting and code style validation
  3. Build Process - Three-stage build with asset optimization
  4. Deploy - Built files committed to repository
  5. GitHub Pages - Site deployment (triggered only on CI success)
  6. Performance Audit - Lighthouse testing post-deployment

Manual Deployment

Force deployment using GitHub Actions UI:

gh workflow run "Deploy static content to Pages"

🔧 Development Scripts

npm run dev              # Start development server
npm run build            # Build for production
npm run preview          # Preview built site
npm run format:check     # Check code formatting (CI only)
npm run lint:check       # Check linting (CI only)
npm run syntax-highlight # Process code syntax highlighting

📊 Code Quality

Important: This project uses CI-only formatting. Do NOT run local formatting commands.

  • Auto-Formatting: Prettier automatically formats code on push
  • Auto-Fixing: PHP-CS-Fixer automatically fixes PHP code style
  • Quality Gates: Deployment blocked if CI checks fail
  • Performance Monitoring: Automated Lighthouse auditing

🐛 Debugging

Taking Screenshots

Debug layout issues by taking screenshots of live pages:

node scripts/screenshot.js
# Modify the URL in the script as needed

Screenshots are saved to the var/ directory (gitignored).

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make changes and test locally with npm run dev
  4. Push to your fork - CI will handle formatting and quality checks
  5. Create a pull request

Code Style

  • Focus on functionality - CI handles all formatting automatically
  • Use semantic HTML and accessible markup
  • Follow the existing EJS template patterns
  • Include proper syntax highlighting for code blocks

📄 License

This is a personal portfolio project. Please respect the content and code structure.

Portfolio Site | Built with ♥️ using modern web technologies