Aziz Saif — Website Technical Documentation

1. Overview & Stats

Single-page portfolio website for Aziz Saif — VP Operations, Managing Partner & AI Business Builder, Dubai-based with deep GCC retail experience. The site showcases 4 companies, AI services, 39+ industry reports, 24 AI implementation cases, 12 portfolio websites, and a blog.

Key Numbers Displayed on Site

2. Technology Stack

Frontend

Design System — Tata Elxsi Corporate Style

Hosting & Deployment

AI Tools Used to Build

3. File Structure & Assets

Directory Tree

aziz-saif-story/
├── index.html                  (1,501 lines — the entire website)
├── website-documentation.html  (this file)
├── brand-logos/                 (6 files)
│   ├── all-brands.png
│   ├── lepearl-logo.jpg / .png
│   ├── sana-logo.jpg
│   └── yoyoso-logo.jpg / .png
├── lepearl-catalogue/          (16 files)
│   └── page-01.jpg → page-16.jpg
├── yoyoso-catalogue/           (17 files)
│   └── page-01.jpg → page-16.jpg + PDF preview
├── yoyoso-photos/              (20 files)
│   └── signing ceremony, contract, team photos
├── portfolio-thumbs/           (12 files)
│   └── eatcookjoy.jpg, maroten.jpg, etc.
└── reports/                    (27 HTML files)
    └── retail-consultancy-guide.html, etc.

Total Asset Count

4. All Website Sections (Top to Bottom)

5. CSS Design System

CSS Variables (Root)

:root {
  --primary: #0a1628;        /* Dark navy — headings, nav, dark sections */
  --primary-light: #152238;  /* Slightly lighter navy */
  --accent: #c9a84c;         /* Gold — accents, hovers, CTAs */
  --accent-light: #e8d5a0;   /* Light gold */
  --accent-dark: #a8872e;    /* Dark gold — labels */
  --white: #fff;
  --off-white: #f7f8fa;      /* Light gray backgrounds */
  --gray-50: #f1f3f5;
  --gray-100: #e4e7eb;       /* Grid separators, borders */
  --gray-200: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;       /* Body text */
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --green: #16a34a;
  --section-pad: clamp(72px, 9vw, 120px);
}

Key CSS Patterns

Responsive Breakpoints

6. JavaScript Features

Functions (11 Total)

Event Listeners & Observers

7. Industry Reports (27 Files)

All reports are standalone HTML files in the reports/ directory. Each opens in a new tab when clicked from the main website.

Filter Categories

ALL RETAIL & FASHION F&B & RESTAURANT SALON & GROOMING FRANCHISE & KIOSK HEALTH & PHARMA E-COMMERCE REAL ESTATE OTHER INDUSTRIES

Sanitized Names (Confidential)

8. AI Implementation Cases (24 Cards)

Dark navy section (#ai-implementation) with white cards in 3-column grid. All company names are generic.

9. Catalogues & Galleries

Total gallery/catalogue items: 72 images — all use the same .gallery-grid / .gallery-item pattern with lightbox support.

10. Blog Section

All links point to azizsaif.xyz/blog/[slug] and open in new tabs. Description: "Curated articles on business, technology, geopolitics & investing — compiled from across the internet."

11. Portfolio Websites (12)

12. All External Links & URLs

Social & Contact

Company Websites

AI Tool Links (in Tools Section)

13. Contact Information (on website)

14. Change Log & Git Commits

1. Tata Elxsi-style redesign — Full CSS overhaul with clean corporate design system (frosted glass nav, 1px grids, gold accents, squared corners)
2. Add 27 industry reports — Portfolio thumbnails, brand catalogues & logos, 27 sanitized HTML report files
3. Unify all catalogues — Converted Le Pearl & YOYOSO from catalogue-grid to gallery-grid format
4. Apply Tata Elxsi grid to all sections — 1px separator gaps, gold accent-line hovers on gallery items, squared lightbox, hidden report icons with tab-style filters
5. Fix LinkedIn URL — Corrected to linkedin.com/in/aziz-akbar-853698225
6. Remove company names — all confidential clients mapped to generic industry labels (Perfume Brand, Cookware Brand, Audit & Consulting Firm, etc.). Added consulting tip quote.
7. Add futuristic AI hero slide — Particle effects, circuit lines, "AI" watermark, dark gradient background
8. Add AI Implementation Case History — 24 industry cases in new dark section with tool tags
9. Add Blog section — 13 articles from azizsaif.xyz in 5 categories, nav link added, "compiled from internet" description

15. How to Make Changes

Edit Content

Everything is in one file: index.html. Open it in any text editor (VS Code, Notepad++, etc.)

To change text/headings:

Search for the text you want to change and edit it directly. All content is plain HTML.

To add a new report card:

<a href="reports/your-new-report.html" target="_blank" class="report-card" data-cat="retail">
  <div class="rpt-icon" style="background:linear-gradient(135deg,#c9a84c,#a8872e)">&#128202;</div>
  <div class="rpt-body">
    <h4>Your Report Title</h4>
    <p>Description here.</p>
    <span class="rpt-tag">TAG1</span>
    <span class="rpt-tag">TAG2</span>
  </div>
</a>

To add a new blog link:

<li><a href="https://azizsaif.xyz/blog/your-slug" target="_blank">Blog Title</a></li>

To add a new AI Implementation card:

<div class="ai-impl-card">
  <div class="ai-impl-industry">INDUSTRY NAME</div>
  <h4>Project Title</h4>
  <p>Description of what was done.</p>
  <div class="ai-impl-tools">
    <span>CLAUDE</span>
    <span>GAMMA</span>
  </div>
</div>

Deploy Changes

# From terminal in the aziz-saif-story folder:
git add .
git commit -m "Your change description"
git push origin main

# Changes go live in ~1 minute on GitHub Pages

To Point azizsaif.com Here

Add these DNS records at your domain registrar:

Then in GitHub: Settings → Pages → Custom domain → type azizsaif.com → Save → Enable HTTPS.