|
1 | | -# Tarek Masryo — Portfolio |
| 1 | +# Tarek Masryo — Portfolio Website |
2 | 2 |
|
3 | | -Static portfolio website (HTML/CSS/JS) showcasing production-minded **ML** & **GenAI** projects and dashboards. |
| 3 | +Production-focused portfolio website for showcasing AI/ML systems, GenAI work, RAG projects, datasets, dashboards, and decision-ready engineering work. |
4 | 4 |
|
5 | | -**Live:** https://tarekmasryo.github.io/ |
| 5 | +**Live site:** https://tarekmasryo.github.io/ |
6 | 6 |
|
7 | | ---- |
| 7 | +## Overview |
8 | 8 |
|
9 | | -## Local run |
| 9 | +This repository powers the public portfolio of **Tarek Masryo**, an **AI/ML Engineer** focused on production-ready systems, evaluation-first workflows, dashboards, APIs, monitoring, and applied GenAI. |
10 | 10 |
|
11 | | -### Option A (recommended): Python |
| 11 | +The site is intentionally built as a **fast static website** using plain HTML, CSS, and JavaScript for simple maintenance, predictable deployment, and clean GitHub Pages hosting. |
12 | 12 |
|
13 | | -From the repo root: |
| 13 | +## What the site presents |
14 | 14 |
|
15 | | -```bash |
16 | | -python -m http.server 8000 |
17 | | -``` |
| 15 | +- professional positioning and hero section |
| 16 | +- curated portfolio projects across ML, GenAI, RAG, dashboards, datasets, and analytics |
| 17 | +- project filtering and search |
| 18 | +- project detail modal with problem framing, approach, signals, stack, and repository links |
| 19 | +- services, technical stack, working style, and contact sections |
| 20 | +- direct links to GitHub, LinkedIn, Kaggle, Hugging Face, Streamlit, and X |
| 21 | + |
| 22 | +## Key characteristics |
18 | 23 |
|
19 | | -Open: |
| 24 | +- **Static-first architecture** — no framework lock-in and no unnecessary runtime complexity |
| 25 | +- **GitHub Pages friendly** — clean deployment as a user site |
| 26 | +- **Responsive layout** — designed for desktop and mobile viewing |
| 27 | +- **Portfolio-driven content model** — project metadata is maintained in `app.js` |
| 28 | +- **SEO foundations** — canonical tags, Open Graph metadata, Twitter cards, `robots.txt`, `sitemap.xml`, and JSON-LD structured data |
| 29 | +- **Custom 404 page** — branded fallback for invalid routes |
| 30 | +- **Web app manifest and icons included** — improved metadata and browser integration on supported platforms |
20 | 31 |
|
21 | | -- http://localhost:8000 |
| 32 | +## Stack |
22 | 33 |
|
23 | | -### Option B: Node tooling (optional) |
| 34 | +- HTML5 |
| 35 | +- CSS3 |
| 36 | +- Vanilla JavaScript |
| 37 | +- GitHub Pages |
| 38 | +- Node-based quality checks for linting, formatting, and static validation |
| 39 | + |
| 40 | +## Repository structure |
| 41 | + |
| 42 | +```text |
| 43 | +. |
| 44 | +├── index.html # Main portfolio page |
| 45 | +├── 404.html # Custom not-found page |
| 46 | +├── styles.css # Site styling and responsive layout |
| 47 | +├── app.js # Project catalog and interactive UI behavior |
| 48 | +├── assets/ # Project covers, profile assets, icons, and brand images |
| 49 | +├── scripts/ |
| 50 | +│ └── validate-static.mjs # Static integrity validation script |
| 51 | +├── site.webmanifest # Web app manifest |
| 52 | +├── robots.txt # Search engine crawl guidance |
| 53 | +├── sitemap.xml # Sitemap for indexing |
| 54 | +├── .nojekyll # Disable Jekyll processing on GitHub Pages |
| 55 | +└── .github/workflows/ci.yml # CI checks for pushes and pull requests |
| 56 | +``` |
24 | 57 |
|
25 | | -Install dev tooling: |
| 58 | +## Local development |
| 59 | + |
| 60 | +### Serve locally |
26 | 61 |
|
27 | 62 | ```bash |
28 | | -npm install |
| 63 | +python -m http.server 8000 |
| 64 | +``` |
| 65 | + |
| 66 | +Then open: |
| 67 | + |
| 68 | +```text |
| 69 | +http://localhost:8000 |
29 | 70 | ``` |
30 | 71 |
|
31 | | -Lint: |
| 72 | +### Install quality-check tooling |
32 | 73 |
|
33 | 74 | ```bash |
34 | | -npm run lint |
| 75 | +npm ci --no-audit --no-fund |
35 | 76 | ``` |
36 | 77 |
|
37 | | -Format: |
| 78 | +## Available commands |
38 | 79 |
|
39 | 80 | ```bash |
| 81 | +npm run start |
| 82 | +npm run serve |
| 83 | +npm run lint |
40 | 84 | npm run format |
| 85 | +npm run format:check |
| 86 | +npm run validate:static |
| 87 | +npm run audit:prod |
| 88 | +npm run check |
41 | 89 | ``` |
42 | 90 |
|
43 | | -Serve locally: |
| 91 | +## Quality workflow |
| 92 | + |
| 93 | +`npm run check` runs the main local quality gate: |
44 | 94 |
|
45 | 95 | ```bash |
46 | | -npm run start |
| 96 | +npm run lint && npm run format:check && npm run validate:static && npm run audit:prod |
47 | 97 | ``` |
48 | 98 |
|
49 | | ---- |
| 99 | +The static validator checks important site integrity rules such as: |
50 | 100 |
|
51 | | -## Deploy (GitHub Pages) |
| 101 | +- required files exist |
| 102 | +- local asset references resolve correctly |
| 103 | +- internal anchor links point to valid section IDs |
| 104 | +- project entries remain consistent |
| 105 | +- repository and image mappings stay valid |
| 106 | +- critical metadata stays present |
52 | 107 |
|
53 | | -This repository is configured as a **User GitHub Pages site**: |
| 108 | +## Content update workflow |
54 | 109 |
|
55 | | -1. GitHub → **Settings** → **Pages** |
56 | | -2. **Source:** Deploy from a branch |
57 | | -3. **Branch:** `main` |
58 | | -4. **Folder:** `/(root)` |
| 110 | +### Add or edit portfolio projects |
59 | 111 |
|
60 | | -The site is served at: |
| 112 | +Project catalog content is maintained in: |
61 | 113 |
|
62 | | -- https://tarekmasryo.github.io/ |
| 114 | +```text |
| 115 | +app.js |
| 116 | +``` |
63 | 117 |
|
64 | | ---- |
| 118 | +Each project entry can define fields such as: |
65 | 119 |
|
66 | | -## Project files |
| 120 | +- category |
| 121 | +- type |
| 122 | +- title |
| 123 | +- description |
| 124 | +- problem framing |
| 125 | +- approach bullets |
| 126 | +- signals / outcomes |
| 127 | +- stack |
| 128 | +- tags |
| 129 | +- repository slug |
| 130 | +- image base name |
67 | 131 |
|
68 | | -- `index.html` — main page |
69 | | -- `styles.css` — styling |
70 | | -- `app.js` — client-side logic |
71 | | -- `assets/` — images + icons (**must be committed**) |
72 | | -- `site.webmanifest` — PWA metadata + app icons |
73 | | -- `robots.txt` — crawler rules |
74 | | -- `sitemap.xml` — sitemap for indexing |
| 132 | +### Update visuals |
75 | 133 |
|
76 | | ---- |
| 134 | +Add or replace project covers and profile assets inside: |
77 | 135 |
|
78 | | -## Notes |
| 136 | +```text |
| 137 | +assets/ |
| 138 | +``` |
| 139 | + |
| 140 | +### Update page copy or layout |
| 141 | + |
| 142 | +- main markup: `index.html` |
| 143 | +- styling: `styles.css` |
| 144 | +- interactions and project rendering: `app.js` |
79 | 145 |
|
80 | | -- **GitHub Pages is case-sensitive**: `Image.png` ≠ `image.png` (same for spaces and extensions). |
81 | | -- Do **not** add `assets/` to `.gitignore` (otherwise images won’t load on Pages). |
82 | | -- If you use ES modules (`import/export`) in `app.js`, update the script tag to: |
| 146 | +## Deployment |
83 | 147 |
|
84 | | - ```html |
85 | | - <script type="module" src="app.js"></script> |
86 | | - ``` |
| 148 | +This repository is configured for **GitHub Pages** deployment as a **user site**. |
87 | 149 |
|
88 | | -- If updates don’t appear immediately, hard refresh (Ctrl+F5) or bump the `?v=` cache-buster in asset URLs. |
89 | | -- Optional: add an empty `.nojekyll` file in the repo root to disable Jekyll processing. |
| 150 | +Expected settings: |
| 151 | + |
| 152 | +1. **Source:** Deploy from a branch |
| 153 | +2. **Branch:** `main` |
| 154 | +3. **Folder:** `/(root)` |
| 155 | + |
| 156 | +## Notes |
90 | 157 |
|
91 | | ---- |
| 158 | +- GitHub Pages is case-sensitive for file paths |
| 159 | +- keep all required assets committed to avoid broken project cards and previews |
| 160 | +- this repository intentionally stays simple and does not require a frontend framework |
92 | 161 |
|
93 | 162 | ## License |
94 | 163 |
|
95 | | -MIT — see `LICENSE`. |
| 164 | +This project is released under the **MIT License**. See `LICENSE` for details. |
0 commit comments