Publish GitHub-linked AI project index

README.md

@@ -1,11 +1,17 @@
 ---
 title: AI Engineering Projects
-emoji: ⚡
-colorFrom: green
-colorTo: gray
+emoji: 🧠
+colorFrom: indigo
+colorTo: blue
 sdk: static
-pinned: false
+app_file: index.html
 short_description: AI, ML, vision and robotics projects with GitHub links
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Engineering Projects
+
+A browsable index of Lakshitha Perera's public AI, machine learning, computer vision, and related engineering repositories. Each project links to its original GitHub source. The projects include research prototypes and older experiments; they are not all hosted demos.
+
+Featured Hugging Face model: [PhishNet](https://huggingface.co/lakshitha1629/PhishNet-Phishing-Detection).
+
+GitHub: https://github.com/lakshitha1629

index.html

@@ -1,19 +1,90 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#0b1220">
+  <meta name="description" content="AI, machine learning, computer vision, and robotics projects by Lakshitha Perera, linked to their GitHub source.">
+  <title>AI Engineering Projects · Lakshitha Perera</title>
+  <style>
+    :root { color-scheme: dark; --bg:#0b1220; --panel:#111c2e; --line:#2a3b52; --ink:#eef5ff; --muted:#a7b9cf; --accent:#72b7ff; --accent2:#b3a1ff; }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin:0; background:radial-gradient(circle at 85% 0%, #1b2d51 0%, transparent 33%), var(--bg); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
+    a { color:var(--accent); text-underline-offset:3px; }
+    a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
+    .wrap { width:min(1100px, calc(100% - 36px)); margin:auto; }
+    .hero { padding:70px 0 42px; border-bottom:1px solid var(--line); }
+    .eyebrow { color:var(--accent); font-size:.82rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
+    h1 { max-width:850px; margin:12px 0 15px; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.08; letter-spacing:-.04em; }
+    .lead { max-width:720px; color:var(--muted); font-size:1.1rem; }
+    .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
+    .button { display:inline-block; padding:10px 15px; border:1px solid #5987bb; border-radius:9px; color:var(--ink); text-decoration:none; font-weight:650; background:#213657; }
+    .button.secondary { background:transparent; border-color:var(--line); }
+    main { padding:32px 0 64px; }
+    section { margin-top:36px; }
+    h2 { margin:0 0 6px; font-size:1.5rem; }
+    .section-intro { margin:0 0 17px; color:var(--muted); }
+    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
+    .card { display:flex; flex-direction:column; min-height:180px; padding:19px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
+    .card.featured { border-color:#5578ac; background:linear-gradient(145deg,#162d4d,#151d35); }
+    .tag { color:var(--accent2); font-size:.75rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
+    h3 { margin:8px 0; font-size:1.15rem; line-height:1.3; }
+    .card p { margin:0 0 20px; color:var(--muted); font-size:.94rem; }
+    .links { display:flex; flex-wrap:wrap; gap:15px; margin-top:auto; font-size:.91rem; font-weight:650; }
+    .note { margin-top:34px; padding:18px 20px; border-left:3px solid var(--accent2); background:#152036; color:var(--muted); border-radius:0 9px 9px 0; }
+    footer { border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:.9rem; }
+    @media (max-width:560px) { .hero { padding-top:44px; } .wrap { width:min(100% - 28px,1100px); } }
+  </style>
+</head>
+<body>
+  <header class="hero">
+    <div class="wrap">
+      <div class="eyebrow">Lakshitha Perera · Project index</div>
+      <h1>AI engineering projects, with the source to explore.</h1>
+      <p class="lead">A curated view of public machine learning, computer vision, language, and robotics repositories. Each card links to the GitHub project; PhishNet also has a Hugging Face model page.</p>
+      <div class="actions">
+        <a class="button" href="https://github.com/lakshitha1629" target="_blank" rel="noopener noreferrer">GitHub profile ↗</a>
+        <a class="button secondary" href="https://huggingface.co/lakshitha1629" target="_blank" rel="noopener noreferrer">Hugging Face profile ↗</a>
+      </div>
+    </div>
+  </header>
+  <main class="wrap">
+    <section aria-labelledby="ml-heading">
+      <h2 id="ml-heading">Machine learning and language</h2>
+      <p class="section-intro">Model experiments and application code.</p>
+      <div class="grid">
+        <article class="card featured"><div class="tag">Featured model · PyTorch</div><h3>PhishNet</h3><p>Experimental tabular classifier for phishing website features, with training code and saved weights.</p><div class="links"><a href="https://huggingface.co/lakshitha1629/PhishNet-Phishing-Detection" target="_blank" rel="noopener noreferrer">Hugging Face model ↗</a><a href="https://github.com/lakshitha1629/PhishNet_Deep_Learning_for_Phishing_Detection" target="_blank" rel="noopener noreferrer">GitHub ↗</a></div></article>
+        <article class="card"><div class="tag">Natural language</div><h3>Offensive Language Detector</h3><p>Notebooks and data for Sinhala offensive language detection and preprocessing.</p><div class="links"><a href="https://github.com/lakshitha1629/Offensive_Language_Detector" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Recommendation</div><h3>Product Recommendation Engine</h3><p>Recommendation experiment with notebooks, sample data, and a serialized model artifact.</p><div class="links"><a href="https://github.com/lakshitha1629/Product_Recommendation_Engine" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Optimization</div><h3>SDN Resource Allocation</h3><p>Software-defined networking project with genetic algorithm, prediction, API, and monitoring components.</p><div class="links"><a href="https://github.com/lakshitha1629/SDN_Resource_Allocation" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+      </div>
+    </section>
+    <section aria-labelledby="vision-heading">
+      <h2 id="vision-heading">Computer vision and applied research</h2>
+      <p class="section-intro">Image-processing and classification prototypes.</p>
+      <div class="grid">
+        <article class="card"><div class="tag">Full-stack AI</div><h3>Pet Disease Detection</h3><p>Application repository with frontend, backend, OpenCV work, and a Keras model component.</p><div class="links"><a href="https://github.com/lakshitha1629/Pet_Disease_Detection" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Agriculture</div><h3>Crop Disorder Detection</h3><p>Plant-disorder image-processing project with application, frontend, backend, and documentation.</p><div class="links"><a href="https://github.com/lakshitha1629/Crop_Disorder_Detection" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">OpenCV</div><h3>Number Plate Recognition</h3><p>Python experiments for number-plate recognition from images and camera input.</p><div class="links"><a href="https://github.com/lakshitha1629/OpenCV-NumberPlate" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Computer vision</div><h3>Parking Management System</h3><p>Parking application designed around number-plate detection and fee calculation.</p><div class="links"><a href="https://github.com/lakshitha1629/Parking_Management_System" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Measurement</div><h3>MeasureDistances-AI</h3><p>Bicycle measurement system with Python and application components.</p><div class="links"><a href="https://github.com/lakshitha1629/MeasureDistances-AI" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Research prototype</div><h3>Movement Assessment AI</h3><p>Research code for classifying general movement patterns; not a clinical diagnostic tool.</p><div class="links"><a href="https://github.com/lakshitha1629/MovementAssessment-AI" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Legacy prototype</div><h3>Thief Identifier</h3><p>Older identification-system repository with model and application components.</p><div class="links"><a href="https://github.com/lakshitha1629/Thief_Identifier" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+      </div>
+    </section>
+    <section aria-labelledby="related-heading">
+      <h2 id="related-heading">Related robotics and knowledge systems</h2>
+      <p class="section-intro">Engineering experiments adjacent to AI and data systems.</p>
+      <div class="grid">
+        <article class="card"><div class="tag">Robotics</div><h3>Robo ARM MindWave</h3><p>Robotic-hand experiments with Arduino code, notebooks, and prediction components.</p><div class="links"><a href="https://github.com/lakshitha1629/Robo_ARM_MindWave" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Robotics</div><h3>Robo ARM Kinect</h3><p>Kinect and Arduino components for a robotic-arm project.</p><div class="links"><a href="https://github.com/lakshitha1629/Robo_ARM_Kinect" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Motion systems</div><h3>Human Motion Imitation</h3><p>API and backend work for a motion-imitation project.</p><div class="links"><a href="https://github.com/lakshitha1629/HumanMotionImitation" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+        <article class="card"><div class="tag">Knowledge representation</div><h3>Supply Chain Ontology</h3><p>Ontology-centered application with frontend and backend components.</p><div class="links"><a href="https://github.com/lakshitha1629/Supply_Chain_Ontology" target="_blank" rel="noopener noreferrer">GitHub source ↗</a></div></article>
+      </div>
+    </section>
+    <aside class="note">These are links to source repositories, not claims that every project has a runnable demo or production-ready model. The PhishNet model card describes its preprocessing and evaluation limitations.</aside>
+  </main>
+  <footer><div class="wrap">Lakshitha Perera · <a href="https://github.com/lakshitha1629" target="_blank" rel="noopener noreferrer">GitHub</a> · <a href="https://huggingface.co/lakshitha1629" target="_blank" rel="noopener noreferrer">Hugging Face</a></div></footer>
+</body>
 </html>