index.html

<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title id="page-title">Ossama Hashim — IT Manager, Builder & AI Engineer</title>
<meta id="description" name="description" content="Ossama Hashim — IT Manager, AI Engineer and builder.">
<link rel="canonical" href="https://samotech.github.io/"><meta name="robots" content="index,follow">
<meta property="og:type" content="website"><meta property="og:url" content="https://samotech.github.io/"><meta property="og:title" content="Ossama Hashim — IT Manager, Builder & AI Engineer"><meta property="og:description" content="GitHub-driven portfolio of Ossama Hashim.">
<link rel="icon" href="https://avatars.githubusercontent.com/SamoTech"><link rel="preconnect" href="https://api.fontshare.com"><link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=cabinet-grotesk@600,700,800,900&display=swap" rel="stylesheet">
<style>
:root{--bg:#090b0f;--panel:#10141a;--panel2:#151a22;--text:#f4f7fb;--muted:#8994a3;--line:#202834;--accent:#63e6be;--max:1180px;--r:20px;--sans:'General Sans',system-ui,sans-serif;--display:'Cabinet Grotesk',system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--sans);background:radial-gradient(circle at 10% 0%,#63e6be14,transparent 30%),radial-gradient(circle at 90% 10%,#6ea8fe14,transparent 26%),var(--bg);color:var(--text);line-height:1.65}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}header{position:sticky;top:0;z-index:20;background:#090b0fd1;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}nav{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{font:800 20px var(--display);display:flex;gap:10px;align-items:center}.brand-mark{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center}.navlinks{display:flex;gap:28px;color:var(--muted);font-size:14px}.navright{display:flex;gap:10px;align-items:center}.pill,.btn{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:10px 14px;font-size:13px}.pill.cta,.btn.primary{background:var(--accent);color:#06110c;border-color:var(--accent);font-weight:700}.hero{padding:110px 0 70px;display:grid;grid-template-columns:1.4fr .9fr;gap:60px;align-items:end}.kicker,.eyebrow{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:8px}h1{font:800 clamp(58px,9vw,112px)/.9 var(--display);letter-spacing:-.055em;margin:20px 0 26px}h1 em{font-style:normal;color:var(--accent)}.lede{font-size:clamp(18px,2vw,23px);color:var(--muted);max-width:760px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-card,.panel,.project{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--panel2))}.hero-card{padding:24px}.hero-card h2{font:800 32px/1 var(--display);margin:10px 0 18px}.status{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);font-size:14px}.status span:last-child,.section-desc,.project p,.repo-meta{color:var(--muted)}section{padding:85px 0;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}.section-title{font:800 clamp(38px,5vw,64px)/.95 var(--display);letter-spacing:-.04em;margin-top:8px}.section-desc{max-width:560px}.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.metric{background:var(--panel);padding:24px}.metric strong{display:block;font:800 42px/1 var(--display)}.metric span{color:var(--muted);font-size:13px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter{border:1px solid var(--line);background:var(--panel);padding:8px 13px;border-radius:999px;color:var(--muted);cursor:pointer}.filter.active{background:var(--text);color:var(--bg)}.project-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.project{grid-column:span 4;min-height:250px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}.project:hover{transform:translateY(-3px);border-color:#63e6be66}.project.featured{grid-column:span 8}.tagrow{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px}.project h3{font:750 29px/1 var(--display);margin:16px 0 10px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.tag{border:1px solid var(--line);padding:5px 9px;border-radius:999px;font-size:11px;color:var(--muted)}.loading{padding:50px;text-align:center;color:var(--muted)}.error{padding:25px;border:1px solid #ff6b6b55;border-radius:16px;color:#ff9b9b}.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.contact-box{padding:36px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(135deg,#63e6be1a,#6ea8fe12),var(--panel)}.contact-box h2{font:800 clamp(42px,6vw,72px)/.92 var(--display)}.links{display:grid;gap:10px}.link{display:flex;justify-content:space-between;border:1px solid var(--line);padding:14px 16px;border-radius:14px;background:var(--panel)}.link span{display:block;color:var(--muted);font-size:13px}footer{padding:30px 0 45px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;border-top:1px solid var(--line)}@media(max-width:900px){.hero,.contact{grid-template-columns:1fr}.project{grid-column:span 6}.project.featured{grid-column:span 12}.proof{grid-template-columns:repeat(2,1fr)}.navlinks{display:none}}@media(max-width:620px){.wrap{width:calc(100% - 26px)}.hero{padding-top:78px}.project,.project.featured{grid-column:span 12}.section-head{display:block}.section-desc{margin-top:13px}.status{display:block}.status span:last-child{display:block;margin-top:3px}footer{display:block}}
</style></head>
<body><header><div class="wrap"><nav><a class="brand" href="/"><span class="brand-mark">S</span>SamoTech</a><div class="navlinks"><a href="#work">Work</a><a href="#about">About</a><a href="#stack">Stack</a><a href="#contact">Contact</a></div><div class="navright"><a class="pill cta" href="https://www.linkedin.com/in/ossamahashim/" target="_blank" rel="noopener">LinkedIn</a></div></nav></div></header>
<main><section class="wrap hero"><div><div class="kicker"><span class="dot"></span><span id="role">IT Manager · Builder · AI Engineer</span></div><h1>I build systems that <em>actually ship.</em></h1><p class="lede" id="bio">Loading profile from GitHub…</p><div class="actions"><a class="btn primary" href="#work">Explore the work →</a><a class="btn" id="github" href="https://github.com/SamoTech" target="_blank" rel="noopener">GitHub ↗</a><a class="btn" id="email" href="mailto:samo.hossam@gmail.com">Email me</a></div></div><aside class="hero-card"><div class="eyebrow">Live GitHub profile</div><h2 id="focus">Loading repository data…</h2><div class="status"><span>Repositories</span><span id="repo-count">—</span></div><div class="status"><span>Followers</span><span id="followers">—</span></div><div class="status"><span>Public Gists</span><span id="gists">—</span></div><div class="status"><span>Location</span><span id="location">—</span></div></aside></section>
<section><div class="wrap"><div class="proof"><div class="metric"><strong id="m-repos">—</strong><span>Public repositories</span></div><div class="metric"><strong id="m-stars">—</strong><span>Total repository stars</span></div><div class="metric"><strong id="m-followers">—</strong><span>GitHub followers</span></div><div class="metric"><strong id="m-forks">—</strong><span>Total forks</span></div></div></div></section>
<section id="work"><div class="wrap"><div class="section-head"><div><div class="eyebrow">GitHub projects</div><h2 class="section-title">Always in sync.</h2></div><p class="section-desc">Projects are fetched directly from the public SamoTech GitHub account. New repositories, descriptions, languages, stars, forks and update dates appear without editing this page.</p></div><div class="filters" id="filters"></div><div id="projects" class="project-grid"><div class="loading">Reading GitHub…</div></div></div></section>
<section id="about"><div class="wrap contact"><div class="panel" style="padding:28px"><div class="eyebrow">About</div><h3 style="font:750 28px var(--display);margin:10px 0">GitHub is the source of truth.</h3><p class="section-desc">This portfolio intentionally avoids maintaining a second static project database. Repository metadata comes from GitHub at page load, so the portfolio follows the account instead of drifting away from it.</p></div><div class="panel" id="stack" style="padding:28px"><div class="eyebrow">Stack from repositories</div><div id="languages" style="margin-top:18px" class="tags"></div></div></div></section>
<section id="contact"><div class="wrap contact"><div class="contact-box"><div class="eyebrow">Contact</div><h2>Have a real problem worth solving?</h2><p class="section-desc" style="margin:18px 0 25px">Infrastructure, AI, automation, internal tools and products.</p><a class="btn primary" id="contact-email" href="mailto:samo.hossam@gmail.com">samo.hossam@gmail.com ↗</a></div><div class="links"><a class="link" href="https://github.com/SamoTech" target="_blank" rel="noopener"><div><b>GitHub</b><span>Source and active builds</span></div><strong>↗</strong></a><a class="link" href="https://www.linkedin.com/in/ossamahashim/" target="_blank" rel="noopener"><div><b>LinkedIn</b><span>Professional profile</span></div><strong>↗</strong></a></div></div></section></main>
<footer class="wrap"><span>© <span id="year"></span> <span id="footer-name">Ossama Hashim</span> · SamoTech</span><span>GitHub-driven static site · GitHub Pages</span></footer>
<script>
const API='https://api.github.com';const USER='SamoTech';
const $=id=>document.getElementById(id);const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
function repoType(r){const t=((r.topics||[]).join(' ')+' '+(r.description||'')).toLowerCase();if(/agent|ai|llm|openai|ml/.test(t))return'AI';if(/mikrotik|router|network|vpn|infra/.test(t))return'Infrastructure';if(/flutter|android|desktop|qt|iptv/.test(t))return'Apps';if(/cli|tool|registry|automation/.test(t))return'Tools';return'Web';}
async function get(url){const r=await fetch(url,{headers:{Accept:'application/vnd.github+json'}});if(!r.ok)throw Error('GitHub API '+r.status);return r.json()}
function renderRepos(repos){const active='All';const cats=['All',...new Set(repos.map(repoType))];$('filters').innerHTML=cats.map(c=>`<button class="filter ${c===active?'active':''}" data-cat="${esc(c)}">${esc(c)}</button>`).join('');const draw=cat=>{$('filters').querySelectorAll('.filter').forEach(b=>b.classList.toggle('active',b.dataset.cat===cat));const list=cat==='All'?repos:repos.filter(r=>repoType(r)===cat);$('projects').innerHTML=list.map((r,i)=>{const lang=r.language||'Git';const updated=new Date(r.updated_at).toLocaleDateString(undefined,{year:'numeric',month:'short'});return `<a class="project ${i===0?'featured':''}" href="${esc(r.html_url)}" target="_blank" rel="noopener"><div><div class="tagrow"><span>${String(i+1).padStart(2,'0')} · ${esc(repoType(r))}</span><span>${esc(lang)}</span></div><h3>${esc(r.name)}</h3><p>${esc(r.description||'Open-source project by SamoTech.')}</p><div class="tags"><span class="tag">★ ${r.stargazers_count}</span><span class="tag">⑂ ${r.forks_count}</span><span class="tag">Updated ${esc(updated)}</span>${(r.topics||[]).slice(0,3).map(t=>`<span class="tag">${esc(t)}</span>`).join('')}</div></div><strong>Open repository ↗</strong></a>`}).join('')||'<div class="loading">No repositories found.</div>'};$('filters').onclick=e=>{const b=e.target.closest('.filter');if(b)draw(b.dataset.cat)};draw(active)}
(async()=>{try{const [u,repos]=await Promise.all([get(`${API}/users/${USER}`),get(`${API}/users/${USER}/repos?per_page=100&sort=updated`)]);$('bio').textContent=u.bio||'IT Manager and builder working across AI engineering, automation, networking, web products and DevOps.';$('repo-count').textContent=u.public_repos;$('followers').textContent=u.followers;$('gists').textContent=u.public_gists;$('location').textContent=u.location||'Egypt';$('github').href=u.html_url;$('m-repos').textContent=u.public_repos;const stars=repos.reduce((n,r)=>n+r.stargazers_count,0),forks=repos.reduce((n,r)=>n+r.forks_count,0);$('m-stars').textContent=stars;$('m-followers').textContent=u.followers;$('m-forks').textContent=forks;$('footer-name').textContent=u.name||u.login;$('focus').textContent=u.bio?'Live from GitHub':'Building in public';$('year').textContent=new Date().getFullYear();const langs={};repos.forEach(r=>{if(r.language)langs[r.language]=(langs[r.language]||0)+1});$('languages').innerHTML=Object.entries(langs).sort((a,b)=>b[1]-a[1]).map(([k,v])=>`<span class="tag">${esc(k)} · ${v}</span>`).join('');renderRepos(repos)}catch(e){$('bio').textContent='GitHub data could not be loaded right now. The site remains available, but live repository data is temporarily unavailable.';$('projects').innerHTML=`<div class="error">${esc(e.message)}. Refresh to retry.</div>`;$('focus').textContent='GitHub temporarily unavailable'}})();
</script></body></html>