Hugging Face's logo

Spaces:
Mohammedallyl
/
portfolio
Configuration error

App Files Community
Mohammedallyl commited on
Commit
3c83d6f
Β·
verified Β·
1 Parent(s): 95cb242

Upload 71 files

Browse files
Files changed (18) hide show
  1. .gitattributes +2 -0
  2. CirtifiCationsViewr/data/C2.json +4 -4
  3. CirtifiCationsViewr/data/C4.json +4 -4
  4. ProjectViewr/ProjectViewr.html +163 -129
  5. ProjectViewr/data/Pro1.json +1 -1
  6. ProjectViewr/data/Pro2.json +1 -1
  7. ProjectViewr/data/Pro3.json +1 -1
  8. ProjectViewr/data/Pro4.json +1 -1
  9. ProjectViewr/data/Pro5.json +8 -0
  10. ProjectViewr/data/ReadMeFiles/pro1.readme +126 -0
  11. ProjectViewr/data/ReadMeFiles/pro2.readme +100 -0
  12. ProjectViewr/data/ReadMeFiles/pro3.readme +0 -0
  13. ProjectViewr/data/ReadMeFiles/pro4.readme +0 -0
  14. ProjectViewr/data/ReadMeFiles/pro5.readme +0 -0
  15. assets/images/Projects/Tableau Pro.png +3 -0
  16. assets/images/Projects/Tableau Pro2.png +3 -0
  17. data/projects.json +7 -1
  18. index.html +6 -0
.gitattributes CHANGED
@@ -61,3 +61,5 @@ indoor.jpg filter=lfs diff=lfs merge=lfs -text
61
  assets/Certifcations/AI.jpg filter=lfs diff=lfs merge=lfs -text
62
  assets/Certifcations/SQL.png filter=lfs diff=lfs merge=lfs -text
63
  assets/Certifcations/Ubunto.jpg filter=lfs diff=lfs merge=lfs -text
 
 
 
61
  assets/Certifcations/AI.jpg filter=lfs diff=lfs merge=lfs -text
62
  assets/Certifcations/SQL.png filter=lfs diff=lfs merge=lfs -text
63
  assets/Certifcations/Ubunto.jpg filter=lfs diff=lfs merge=lfs -text
64
+ assets/images/Projects/Tableau[[:space:]]Pro.png filter=lfs diff=lfs merge=lfs -text
65
+ assets/images/Projects/Tableau[[:space:]]Pro2.png filter=lfs diff=lfs merge=lfs -text
CirtifiCationsViewr/data/C2.json CHANGED
@@ -1,5 +1,5 @@
1
- {
2
- "title": "SQL Server Development",
3
- "imagePath": "../assets/Certifcations/SQL.png",
4
- "description": "./data/ReadMeFiles/C2.Readme"
5
  }
 
1
+ {
2
+ "title": "Deep Learning Specialization",
3
+ "imagePath": "../assets/Certifcations/SQL.png",
4
+ "description": "./data/ReadMeFiles/C2.Readme"
5
  }
CirtifiCationsViewr/data/C4.json CHANGED
@@ -1,5 +1,5 @@
1
- {
2
- "title": "Ubuntu Linux Essentials",
3
- "imagePath": "../assets/Certifcations/Ubunto.jpg",
4
- "description": "./data/ReadMeFiles/C4.Readme"
5
  }
 
1
+ {
2
+ "title": "Deep Learning Specialization",
3
+ "imagePath": "../assets/Certifcations/Ubunto.jpg",
4
+ "description": "./data/ReadMeFiles/C4.Readme"
5
  }
ProjectViewr/ProjectViewr.html CHANGED
@@ -1,76 +1,76 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
 
5
  <title>Project Details</title>
6
 
7
  <!-- Iconify -->
8
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
9
- <!-- Marked.js for Markdown parsing -->
 
10
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
11
 
12
  <style>
13
  :root {
14
- --bg: #121212;
15
- --card: #1f1f1f;
16
  --accent: #f5c542;
17
- --text: #e0e0e0;
18
- --muted: #b0b0b0;
19
  --divider: #2a2a2a;
20
- --shadow: rgba(0, 0, 0, 0.5);
21
- --font-primary: "Segoe UI", "Roboto", sans-serif;
 
 
22
  }
23
 
 
 
24
  body {
25
  margin: 0;
26
  background: var(--bg);
27
  color: var(--text);
28
- font-family: var(--font-primary);
29
- line-height: 1.6;
30
  }
31
 
32
  .page {
33
  min-height: 100vh;
34
  display: flex;
35
  justify-content: center;
36
- align-items: center;
37
- padding: 40px 16px;
38
  }
39
 
40
  .container {
41
  width: 100%;
42
- max-width: 900px;
43
- background: linear-gradient(145deg, #1f1f1f, #222);
44
- border-radius: 24px;
45
  padding: 50px 40px;
46
- box-shadow: 0 10px 30px var(--shadow);
47
- transition: transform 0.3s ease;
48
  }
49
 
50
- .container:hover {
51
- transform: translateY(-5px);
 
52
  }
53
 
54
- /* === HEADER === */
55
  h1 {
56
  margin: 0;
57
- font-size: 36px;
58
- font-weight: 700;
59
  text-align: center;
60
- letter-spacing: 1px;
61
  color: var(--accent);
62
- text-shadow: 1px 1px 2px var(--shadow);
63
  }
64
 
65
- /* === SECTIONS === */
66
  .section {
67
  margin-top: 50px;
68
  }
69
 
70
  .section-title {
71
  text-align: center;
72
- font-size: 16px;
73
- font-weight: 600;
74
  letter-spacing: 2px;
75
  text-transform: uppercase;
76
  color: var(--accent);
@@ -84,20 +84,16 @@ h1 {
84
  opacity: 0.6;
85
  }
86
 
87
- /* === CATEGORY === */
88
  .category {
89
  text-align: center;
90
- font-size: 16px;
91
  color: var(--muted);
92
- font-weight: 500;
93
  }
94
 
95
- /* === TOOLS === */
96
  .tools {
97
  display: flex;
98
  justify-content: center;
99
  flex-wrap: wrap;
100
- gap: 28px;
101
  }
102
 
103
  .tool {
@@ -106,22 +102,17 @@ h1 {
106
  align-items: center;
107
  font-size: 14px;
108
  color: var(--muted);
 
109
  }
110
 
 
 
111
  .tool .iconify {
112
- font-size: 42px;
113
  color: var(--accent);
114
  margin-bottom: 8px;
115
- transition: transform 0.3s ease, color 0.3s ease;
116
  }
117
 
118
- .tool:hover .iconify {
119
- transform: scale(1.3) rotate(15deg);
120
- color: #ffd84d;
121
- cursor:pointer;
122
- }
123
-
124
- /* === MEDIA === */
125
  .media {
126
  display: flex;
127
  justify-content: center;
@@ -130,66 +121,59 @@ h1 {
130
  .media video,
131
  .media img {
132
  width: 100%;
133
- max-width: 720px;
134
- aspect-ratio: 16 / 9;
135
- border-radius: 20px;
136
- object-fit: cover;
137
- box-shadow: 0 6px 20px var(--shadow);
138
- transition: transform 0.3s ease;
139
  }
140
 
141
- .media img:hover,
142
- .media video:hover {
143
- transform: scale(1.02);
144
  }
145
 
146
- /* === DESCRIPTION === */
147
- .description {
148
- max-width: 760px;
149
- margin: 0 auto;
150
- color: var(--text);
151
- font-size: 16px;
152
- line-height: 1.8;
153
- text-align: left;
154
- word-wrap: break-word;
155
  }
156
 
157
- /* === MOBILE === */
158
- @media (max-width: 768px) {
159
- .container {
160
- padding: 30px 20px;
161
- border-radius: 16px;
162
- }
163
 
164
- h1 {
165
- font-size: 28px;
166
- }
 
167
 
168
- .description {
169
- max-width: 100%;
170
- font-size: 15px;
171
- }
 
 
 
 
172
  }
173
  </style>
174
  </head>
175
-
176
  <body>
177
 
178
  <div class="page">
179
  <div class="container">
180
 
181
- <!-- TITLE -->
182
  <h1 id="title"></h1>
183
 
184
- <!-- CATEGORY -->
185
  <div class="section">
186
- <div class="section-title">Category Type</div>
187
  <div class="category" id="category"></div>
188
  </div>
189
 
190
  <div class="divider"></div>
191
 
192
- <!-- TOOLS -->
193
  <div class="section">
194
  <div class="section-title">Tools Used</div>
195
  <div class="tools" id="tools"></div>
@@ -197,86 +181,136 @@ h1 {
197
 
198
  <div class="divider"></div>
199
 
200
- <!-- MEDIA -->
201
  <div class="section">
202
- <div class="section-title">Project Preview</div>
203
  <div class="media" id="media"></div>
204
  </div>
205
 
206
  <div class="divider"></div>
207
 
208
- <!-- DESCRIPTION -->
209
  <div class="section">
210
- <div class="section-title">Project Description</div>
211
- <div class="description" id="description"></div>
 
 
212
  </div>
213
 
214
  </div>
215
  </div>
216
 
217
  <script>
218
- const params = new URLSearchParams(window.location.search);
219
- const jsonPath = params.get("data");
220
-
221
- if (!jsonPath) {
222
- document.body.innerHTML = "<p style='color:red'>No project data provided.</p>";
223
- throw new Error("Missing data query");
224
- }
225
-
226
- fetch(jsonPath)
227
- .then(res => res.json())
228
- .then(project => renderProject(project));
229
-
230
  const toolIcons = {
231
  python: "logos:python",
232
- fastapi: "logos:fastapi-icon",
233
  tensorflow: "logos:tensorflow",
234
- pytorch: "logos:pytorch-icon",
235
  opencv: "logos:opencv",
236
- wifi: "mdi:wifi",
237
- powerbi: "logos:microsoft-power-bi",
238
- n8n: "simple-icons:n8n",
239
- docker: "logos:docker-icon",
240
- javascript: "logos:javascript",
241
  react: "logos:react",
242
- linux: "logos:linux-tux",
 
 
243
  };
244
 
245
- function renderProject(p) {
246
- document.getElementById("title").textContent = p.name;
247
- document.getElementById("category").textContent = p.category;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
248
 
249
- // Use marked.js to render Markdown
250
- document.getElementById("description").innerHTML = marked.parse(p.description);
251
 
252
- renderMedia(p);
253
- renderTools(p.tools);
 
 
 
 
 
 
 
 
 
 
 
254
  }
255
 
256
- function renderMedia(p) {
257
  const media = document.getElementById("media");
258
- media.innerHTML = p.displayType === "video"
259
- ? `<video src="${p.filePath}" controls></video>`
260
- : `<img src="${p.filePath}" alt="${p.name}">`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
261
  }
262
 
263
- function renderTools(toolsText) {
264
- const toolsContainer = document.getElementById("tools");
265
- const tools = toolsText.split(",").map(t => t.trim().toLowerCase());
266
-
267
- tools.forEach(tool => {
268
- const icon = toolIcons[tool] || "mdi:tools";
269
-
270
- const el = document.createElement("div");
271
- el.className = "tool";
272
- el.innerHTML = `
273
- <span class="iconify" data-icon="${icon}"></span>
274
- <span>${tool}</span>
275
- `;
276
- toolsContainer.appendChild(el);
277
- });
278
  }
279
  </script>
280
 
281
  </body>
282
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Project Details</title>
7
 
8
  <!-- Iconify -->
9
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
10
+
11
+ <!-- Marked.js -->
12
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
13
 
14
  <style>
15
  :root {
16
+ --bg: #0f0f0f;
17
+ --card: #1a1a1a;
18
  --accent: #f5c542;
19
+ --text: #e5e5e5;
20
+ --muted: #9e9e9e;
21
  --divider: #2a2a2a;
22
+ --error: #ff5252;
23
+ --radius: 20px;
24
+ --shadow: 0 10px 30px rgba(0,0,0,0.6);
25
+ --font: "Segoe UI", Roboto, sans-serif;
26
  }
27
 
28
+ * { box-sizing: border-box; }
29
+
30
  body {
31
  margin: 0;
32
  background: var(--bg);
33
  color: var(--text);
34
+ font-family: var(--font);
35
+ line-height: 1.7;
36
  }
37
 
38
  .page {
39
  min-height: 100vh;
40
  display: flex;
41
  justify-content: center;
42
+ padding: 60px 16px;
 
43
  }
44
 
45
  .container {
46
  width: 100%;
47
+ max-width: 1000px;
48
+ background: var(--card);
49
+ border-radius: var(--radius);
50
  padding: 50px 40px;
51
+ box-shadow: var(--shadow);
52
+ animation: fadeIn 0.4s ease;
53
  }
54
 
55
+ @keyframes fadeIn {
56
+ from { opacity: 0; transform: translateY(10px); }
57
+ to { opacity: 1; transform: translateY(0); }
58
  }
59
 
 
60
  h1 {
61
  margin: 0;
 
 
62
  text-align: center;
63
+ font-size: 36px;
64
  color: var(--accent);
 
65
  }
66
 
 
67
  .section {
68
  margin-top: 50px;
69
  }
70
 
71
  .section-title {
72
  text-align: center;
73
+ font-size: 14px;
 
74
  letter-spacing: 2px;
75
  text-transform: uppercase;
76
  color: var(--accent);
 
84
  opacity: 0.6;
85
  }
86
 
 
87
  .category {
88
  text-align: center;
 
89
  color: var(--muted);
 
90
  }
91
 
 
92
  .tools {
93
  display: flex;
94
  justify-content: center;
95
  flex-wrap: wrap;
96
+ gap: 30px;
97
  }
98
 
99
  .tool {
 
102
  align-items: center;
103
  font-size: 14px;
104
  color: var(--muted);
105
+ transition: transform 0.3s;
106
  }
107
 
108
+ .tool:hover { transform: translateY(-4px); }
109
+
110
  .tool .iconify {
111
+ font-size: 40px;
112
  color: var(--accent);
113
  margin-bottom: 8px;
 
114
  }
115
 
 
 
 
 
 
 
 
116
  .media {
117
  display: flex;
118
  justify-content: center;
 
121
  .media video,
122
  .media img {
123
  width: 100%;
124
+ max-width: 750px;
125
+ border-radius: var(--radius);
126
+ box-shadow: var(--shadow);
 
 
 
127
  }
128
 
129
+ .description {
130
+ max-width: 800px;
131
+ margin: auto;
132
  }
133
 
134
+ .description h1,
135
+ .description h2,
136
+ .description h3 {
137
+ color: var(--accent);
 
 
 
 
 
138
  }
139
 
140
+ .description pre {
141
+ background: #111;
142
+ padding: 15px;
143
+ border-radius: 10px;
144
+ overflow-x: auto;
145
+ }
146
 
147
+ .loading {
148
+ text-align: center;
149
+ color: var(--muted);
150
+ }
151
 
152
+ .error {
153
+ text-align: center;
154
+ color: var(--error);
155
+ }
156
+
157
+ @media (max-width: 768px) {
158
+ .container { padding: 30px 20px; }
159
+ h1 { font-size: 28px; }
160
  }
161
  </style>
162
  </head>
 
163
  <body>
164
 
165
  <div class="page">
166
  <div class="container">
167
 
 
168
  <h1 id="title"></h1>
169
 
 
170
  <div class="section">
171
+ <div class="section-title">Category</div>
172
  <div class="category" id="category"></div>
173
  </div>
174
 
175
  <div class="divider"></div>
176
 
 
177
  <div class="section">
178
  <div class="section-title">Tools Used</div>
179
  <div class="tools" id="tools"></div>
 
181
 
182
  <div class="divider"></div>
183
 
 
184
  <div class="section">
185
+ <div class="section-title">Preview</div>
186
  <div class="media" id="media"></div>
187
  </div>
188
 
189
  <div class="divider"></div>
190
 
 
191
  <div class="section">
192
+ <div class="section-title">Description</div>
193
+ <div id="description" class="description loading">
194
+ Loading README...
195
+ </div>
196
  </div>
197
 
198
  </div>
199
  </div>
200
 
201
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
202
  const toolIcons = {
203
  python: "logos:python",
 
204
  tensorflow: "logos:tensorflow",
 
205
  opencv: "logos:opencv",
206
+ fastapi: "logos:fastapi-icon",
207
+ nextjs: "logos:nextjs-icon",
 
 
 
208
  react: "logos:react",
209
+ javascript: "logos:javascript",
210
+ docker: "logos:docker-icon",
211
+ linux: "logos:linux-tux"
212
  };
213
 
214
+ document.addEventListener("DOMContentLoaded", init);
215
+
216
+ async function init() {
217
+ const params = new URLSearchParams(window.location.search);
218
+ const dataFile = params.get("data"); // e.g., "data/Pro1.json"
219
+
220
+ if (!dataFile) return showError("No project file provided.");
221
+
222
+ let project;
223
+ try {
224
+ const res = await fetch(dataFile);
225
+ if (!res.ok) throw new Error();
226
+ project = await res.json();
227
+ } catch {
228
+ return showError("Failed to load project JSON.");
229
+ }
230
+
231
+ renderBasicInfo(project);
232
+ renderMedia(project);
233
+ renderTools(project.tools);
234
 
235
+ if (!project.description) return showError("README file path missing.");
 
236
 
237
+ const descPath = project.description.trim();
238
+ if (!descPath.endsWith(".md") && !descPath.endsWith(".readme")) {
239
+ return showError("Description must be a .md or .readme file.");
240
+ }
241
+
242
+ await loadReadme(descPath);
243
+ }
244
+
245
+ function renderBasicInfo(project) {
246
+ document.getElementById("title").textContent =
247
+ project.name || "Untitled Project";
248
+ document.getElementById("category").textContent =
249
+ project.category || "N/A";
250
  }
251
 
252
+ function renderMedia(project) {
253
  const media = document.getElementById("media");
254
+ media.innerHTML = "";
255
+
256
+ if (!project.filePath) return;
257
+
258
+ if (project.displayType === "video") {
259
+ const video = document.createElement("video");
260
+ video.src = project.filePath;
261
+ video.controls = true;
262
+ media.appendChild(video);
263
+ } else {
264
+ const img = document.createElement("img");
265
+ img.src = project.filePath;
266
+ img.alt = project.name || "Project preview";
267
+ media.appendChild(img);
268
+ }
269
+ }
270
+
271
+ function renderTools(toolsText = "") {
272
+ const container = document.getElementById("tools");
273
+ container.innerHTML = "";
274
+
275
+ toolsText
276
+ .split(/[, ]+/)
277
+ .filter(Boolean)
278
+ .forEach(tool => {
279
+ const key = tool.toLowerCase();
280
+ const icon = toolIcons[key] || "mdi:tools";
281
+
282
+ const el = document.createElement("div");
283
+ el.className = "tool";
284
+ el.innerHTML = `
285
+ <span class="iconify" data-icon="${icon}"></span>
286
+ <span>${tool}</span>
287
+ `;
288
+ container.appendChild(el);
289
+ });
290
+ }
291
+
292
+ async function loadReadme(path) {
293
+ const description = document.getElementById("description");
294
+
295
+ try {
296
+ const response = await fetch(path);
297
+ if (!response.ok) throw new Error();
298
+
299
+ const markdown = await response.text();
300
+ description.classList.remove("loading");
301
+ description.innerHTML = marked.parse(markdown);
302
+
303
+ } catch {
304
+ showError("Failed to load README file.");
305
+ }
306
  }
307
 
308
+ function showError(message) {
309
+ const description = document.getElementById("description");
310
+ description.classList.remove("loading");
311
+ description.innerHTML = `<div class="error">${message}</div>`;
 
 
 
 
 
 
 
 
 
 
 
312
  }
313
  </script>
314
 
315
  </body>
316
+ </html>
ProjectViewr/data/Pro1.json CHANGED
@@ -4,5 +4,5 @@
4
  "tools": "Python, TensorFlow, OpenCV",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/indoor.mp4",
7
- "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
8
  }
 
4
  "tools": "Python, TensorFlow, OpenCV",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/indoor.mp4",
7
+ "description": "./data/ReadMeFiles/pro1.readme "
8
  }
ProjectViewr/data/Pro2.json CHANGED
@@ -4,5 +4,5 @@
4
  "tools": "Python, TensorFlow, WiFi",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/FaceRec.3gp",
7
- "description": "### Face Recognition Project using FaceNet\n\nDeveloped a **Face Recognition system** based on the FaceNet paper, introducing a novel loss function:\n\n```\nβˆ‘2_i^N [MAX(|f(x^A) - f(x^P)| - 0.2*Ξ±) + MAX(-|f(x^A) - f(x^N)| + Ξ±), 0]\n```\n\nAchieved **10% higher accuracy** than the original paper while training on only **6,000 images** compared to **1,000,000 images** in the original paper. The optimized model generalizes well even with a small dataset, demonstrating practical applicability for **real-world face recognition systems**."
8
  }
 
4
  "tools": "Python, TensorFlow, WiFi",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/FaceRec.3gp",
7
+ "description": "./data/ReadMeFiles/pro2.readme"
8
  }
ProjectViewr/data/Pro3.json CHANGED
@@ -4,5 +4,5 @@
4
  "tools": "Python, TensorFlow, n8n",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/nano.mp4",
7
- "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
8
  }
 
4
  "tools": "Python, TensorFlow, n8n",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/nano.mp4",
7
+ "description": "./data/ReadMeFiles/pro3.readme"
8
  }
ProjectViewr/data/Pro4.json CHANGED
@@ -4,5 +4,5 @@
4
  "tools": "Python, FastAPI, TensorFlow NextJS",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/React.mp4",
7
- "description": "<p>This project focuses on indoor positioning using WiFi fingerprinting, real-time tracking, and intelligent navigation algorithms.</p>"
8
  }
 
4
  "tools": "Python, FastAPI, TensorFlow NextJS",
5
  "displayType": "video",
6
  "filePath": "../assets/Videos/React.mp4",
7
+ "description": "./data/ReadMeFiles/pro4.readme"
8
  }
ProjectViewr/data/Pro5.json ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "Sales Analysis",
3
+ "category": "DashBord ",
4
+ "tools": "Tableau",
5
+ "displayType": "video",
6
+ "filePath": "../assets/Videos/React.mp4",
7
+ "description": "./data/ReadMeFiles/pro5.readme"
8
+ }
ProjectViewr/data/ReadMeFiles/pro1.readme ADDED
@@ -0,0 +1,126 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # 🏒 Indoor Localization and Navigation System
2
+
3
+ ![Project Status](https://img.shields.io/badge/status-active-brightgreen)
4
+ ![Python Version](https://img.shields.io/badge/python-3.10-blue)
5
+ ![TensorFlow](https://img.shields.io/badge/tensorflow-2.13-orange)
6
+
7
+ > A deep learning-based indoor positioning system with real-time A\* navigation, achieving **0–3 meter accuracy** β€” a significant improvement over existing methods.
8
+
9
+ ---
10
+
11
+ ## πŸ“Œ Overview
12
+
13
+ Indoor localization is a challenging problem due to the lack of GPS signals inside buildings and complex environments with walls, obstacles, and interference. Many existing systems rely on signal strength, Wi-Fi fingerprints, or other heuristics, but these approaches often have limited accuracy, with errors ranging from **0 to 5 meters**.
14
+
15
+ This project builds upon the methodology proposed in the **WiDeep paper** with two key improvements:
16
+
17
+ 1. βœ… Replaced the weighted-sum approach with a **trainable softmax-based layer** for position approximation.
18
+ 2. βœ… Implemented a **grid-based mapping system** with the **A\* algorithm** for path planning and real-time navigation.
19
+
20
+ ---
21
+
22
+ ## 🧠 Approach
23
+
24
+ ### Position Approximation
25
+
26
+ The core of the localization method is a custom Keras layer called **`PositionAproxmator`**:
27
+
28
+ - Takes a predefined list of possible positions in the environment (`PlacesPosition`).
29
+ - Learns a small **trainable offset weight** `W` for each position, allowing the model to refine predicted locations.
30
+ - Computes the final position via matrix multiplication of probabilities with `(PlacesPosition + W)`.
31
+
32
+ ```python
33
+ import tensorflow as tf
34
+ from tensorflow import keras
35
+
36
+ class PositionAproxmator(keras.layers.Layer):
37
+ def __init__(self, PlacesPosition, name="PositionAproxmator"):
38
+ super(PositionAproxmator, self).__init__()
39
+ self.PlacesPosition = tf.constant(PlacesPosition, dtype=tf.float32, name="PlacesPositions")
40
+
41
+ def build(self, inputs_shape):
42
+ self.W = self.add_weight(
43
+ shape=(inputs_shape[1], 2),
44
+ trainable=True,
45
+ dtype=tf.float32,
46
+ name="PlacesWeight"
47
+ )
48
+
49
+ def call(self, Probilites):
50
+ return Probilites @ (self.PlacesPosition + self.W)
51
+
52
+ def get_config(self):
53
+ config = super().get_config()
54
+ config.update({"PlacesPosition": self.PlacesPosition})
55
+ return config
56
+ ```
57
+
58
+ ---
59
+
60
+ ### πŸ—ΊοΈ Mapping & Navigation
61
+
62
+ Once the position is estimated, the system uses a **grid-based map** of the environment and applies the **A\* algorithm** to plan the optimal path from the current location to a target β€” enabling real-time indoor navigation.
63
+
64
+ ---
65
+
66
+ ## πŸ”„ System Workflow
67
+
68
+ ```
69
+ Input Probabilities
70
+ β”‚
71
+ β–Ό
72
+ Softmax Layer ← Normalizes probabilities
73
+ β”‚
74
+ β–Ό
75
+ PositionAproxmator ← PlacesPosition + learned W offsets
76
+ β”‚
77
+ β–Ό
78
+ Predicted (x, y) Position
79
+ β”‚
80
+ β–Ό
81
+ Grid Map Representation
82
+ β”‚
83
+ β–Ό
84
+ A* Path Planning
85
+ β”‚
86
+ β–Ό
87
+ Navigation Instructions / Path
88
+ ```
89
+
90
+ ---
91
+
92
+ ## πŸ“Š Results
93
+
94
+ | System | Error Range |
95
+ |----------------|-------------|
96
+ | **My System** | **0 – 3 m** |
97
+ | WiDeep Paper | 0 – 5 m |
98
+
99
+ By integrating mapping and A\* navigation, the system also generates accurate indoor routes, making it practical for real-world applications.
100
+
101
+ ---
102
+
103
+ ## πŸ› οΈ Tech Stack
104
+
105
+ | Category | Tools / Libraries |
106
+ |----------------------|------------------------------------------|
107
+ | Language | Python 3.10 |
108
+ | Deep Learning | TensorFlow / Keras |
109
+ | Data Processing | NumPy, Pandas |
110
+ | Visualization | Matplotlib, Seaborn |
111
+ | Navigation | Custom Grid Map + A\* Algorithm |
112
+
113
+ ---
114
+
115
+ ## πŸš€ Future Work
116
+
117
+ - [ ] Real-time deployment on mobile devices
118
+ - [ ] Multi-floor building support
119
+ - [ ] Sensor fusion: Bluetooth, UWB, IMU
120
+ - [ ] Dynamic obstacle avoidance
121
+
122
+ ---
123
+
124
+ ## πŸ“¬ Contact
125
+
126
+ Feel free to reach out for collaborations, discussions, or contributions!
ProjectViewr/data/ReadMeFiles/pro2.readme ADDED
@@ -0,0 +1,100 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # πŸš€ Face Recognition System Using FaceNet
2
+
3
+ A high-performance **Face Recognition system** inspired by the FaceNet architecture.
4
+ This project improves accuracy while drastically reducing training data requirements.
5
+
6
+ ---
7
+
8
+ ## πŸ“Œ Project Summary
9
+
10
+ This project implements a deep metric-learning-based face recognition model using a modified version of the traditional triplet loss approach.
11
+
12
+ ### 🎯 Objectives
13
+
14
+ - Improve embedding discrimination
15
+ - Reduce required dataset size
16
+ - Enhance model generalization
17
+ - Maintain real-world deployment capability
18
+
19
+ ---
20
+
21
+ ## 🧠 Model Architecture
22
+
23
+ The system learns a compact embedding representation for each face image.
24
+ Faces belonging to the same identity are mapped closer together in embedding space, while different identities are pushed further apart.
25
+
26
+ ---
27
+
28
+ ## πŸ”¬ Custom Loss Function
29
+
30
+ A modified loss function was introduced to improve separation efficiency:
31
+
32
+ ```math
33
+ βˆ‘_{i=1}^{N} [ max(|f(x^A) - f(x^P)| - 0.2Ξ±)
34
+ + max(-|f(x^A) - f(x^N)| + Ξ±), 0 ]
35
+ ```
36
+
37
+ ### Where:
38
+
39
+ - `x^A` β†’ Anchor image
40
+ - `x^P` β†’ Positive image (same identity)
41
+ - `x^N` β†’ Negative image (different identity)
42
+ - `f(x)` β†’ Learned embedding function
43
+ - `Ξ±` β†’ Margin parameter
44
+
45
+ ### πŸ”Ž Key Improvements
46
+
47
+ - Stronger intra-class compactness
48
+ - Larger inter-class separation
49
+ - Better performance with fewer samples
50
+
51
+ ---
52
+
53
+ ## πŸ“Š Results
54
+
55
+ | Metric | Value |
56
+ |--------|--------|
57
+ | Accuracy Improvement | **+10%** over original benchmark |
58
+ | Training Images Used | **6,000** |
59
+ | Images Used in Original Paper | **1,000,000** |
60
+ | Generalization | Strong performance on unseen identities |
61
+
62
+ The model achieved higher accuracy while using less than 1% of the dataset size reported in the original paper.
63
+
64
+ ---
65
+
66
+ ## 🌍 Real-World Applications
67
+
68
+ - πŸ” Access Control Systems
69
+ - 🏒 Smart Attendance Systems
70
+ - πŸͺͺ Identity Verification
71
+ - πŸ›‘ Security Authentication
72
+ - πŸ“± Edge AI Deployment
73
+
74
+ This project demonstrates that well-designed loss engineering and optimization strategies can outperform large-scale data approaches.
75
+
76
+ ---
77
+
78
+ ## πŸ› οΈ Tech Stack
79
+
80
+ - Python
81
+ - PyTorch / TensorFlow (depending on your implementation)
82
+ - OpenCV
83
+ - NumPy
84
+
85
+
86
+ ---
87
+
88
+
89
+ ---
90
+
91
+ ## πŸ”— GitHub Repository
92
+
93
+ πŸ‘‰ **View the full project here:**
94
+ https://github.com/mohammedaboallayl/Face_Recognition_From_Scratch
95
+
96
+ ---
97
+
98
+ ## πŸ“¬ Contact
99
+
100
+ If you have questions or collaboration ideas, feel free to connect.
ProjectViewr/data/ReadMeFiles/pro3.readme ADDED
File without changes
ProjectViewr/data/ReadMeFiles/pro4.readme ADDED
File without changes
ProjectViewr/data/ReadMeFiles/pro5.readme ADDED
File without changes
assets/images/Projects/Tableau Pro.png ADDED

Git LFS Details

  • SHA256: 52960a27bb1ab4320a9424792ff2b0f83219c7c1dd0a18f6a3c40b7a81767158
  • Pointer size: 131 Bytes
  • Size of remote file: 255 kB
assets/images/Projects/Tableau Pro2.png ADDED

Git LFS Details

  • SHA256: 4786636566b24c74b9cecf5f6a1ff6c64dc78e1babd28000926236224e0438fa
  • Pointer size: 131 Bytes
  • Size of remote file: 157 kB
data/projects.json CHANGED
@@ -14,7 +14,13 @@
14
  "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro3.json"
15
  }
16
 
17
- ,
 
 
 
 
 
 
18
 
19
  {
20
  "title": "Users FullStack Reactjs App",
 
14
  "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro3.json"
15
  }
16
 
17
+ , {
18
+ "title": "Sales Analysis DashBord |Tableau",
19
+ "category": "Dashbord",
20
+ "filter": "dashbords ",
21
+ "image": "./assets/images/Projects/Tableau Pro2.png",
22
+ "details": "./ProjectViewr/ProjectViewr.html?data=data/Pro5.json"
23
+ },
24
 
25
  {
26
  "title": "Users FullStack Reactjs App",
index.html CHANGED
@@ -143,6 +143,12 @@
143
  <ion-icon name="logo-whatsapp"></ion-icon>
144
  </a>
145
  </li>
 
 
 
 
 
 
146
  <li class="social-item">
147
  <a href="#" class="social-link">
148
  <ion-icon name="logo-kaggle"></ion-icon>
 
143
  <ion-icon name="logo-whatsapp"></ion-icon>
144
  </a>
145
  </li>
146
+ </li>
147
+ <li class="social-item">
148
+ <a href="https://public.tableau.com/app/profile/mohammed.aboellil/vizzes" class="social-link">
149
+ <ion-icon name="logo-tableau"></ion-icon>
150
+ </a>
151
+ </li>
152
  <li class="social-item">
153
  <a href="#" class="social-link">
154
  <ion-icon name="logo-kaggle"></ion-icon>