Skip to content

Commit 91fab8d

Browse files
devshafidevshafi
committed
first commit
0 parents  commit 91fab8d

7 files changed

Lines changed: 776 additions & 0 deletions

File tree

‎.codex‎

Whitespace-only changes.

‎.github/workflows/deploy-pages.yml‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
name: Deploy Portfolio to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: pages
15+
cancel-in-progress: true
16+
17+
jobs:
18+
deploy:
19+
runs-on: ubuntu-latest
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Prepare static site
29+
run: |
30+
mkdir -p dist
31+
cp index.html dist/
32+
cp styles.css dist/
33+
cp script.js dist/
34+
cp -r assets dist/
35+
touch dist/.nojekyll
36+
37+
- name: Setup Pages
38+
uses: actions/configure-pages@v5
39+
40+
- name: Upload artifact
41+
uses: actions/upload-pages-artifact@v3
42+
with:
43+
path: dist
44+
45+
- name: Deploy to GitHub Pages
46+
id: deployment
47+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# OS files
2+
.DS_Store
3+
Thumbs.db
4+
5+
# Editor/IDE
6+
.vscode/
7+
.idea/
8+
*.swp
9+
*.swo
10+
11+
# Logs
12+
*.log
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
pnpm-debug.log*
17+
18+
# Environment files
19+
.env
20+
.env.*
21+
!.env.example
22+
23+
# Node dependencies and build outputs (if added later)
24+
node_modules/
25+
dist/
26+
out/
27+
28+
# Python caches (if scripts are added)
29+
__pycache__/
30+
*.pyc

‎assets/shafi_image.jpg‎

126 KB
Loading

‎index.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
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>Fozle Rabbi Shafi | Portfolio</title>
7+
<meta name="description" content="Portfolio of Fozle Rabbi Shafi - PhD Student in Computing at Queen's University, focused on Generative AI, LLMs, and AI-driven cybersecurity.">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Sora:wght@400;600;700&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="styles.css">
12+
</head>
13+
<body>
14+
<div class="bg-shape shape-1" aria-hidden="true"></div>
15+
<div class="bg-shape shape-2" aria-hidden="true"></div>
16+
17+
<header class="site-header">
18+
<a href="#home" class="brand">FRS</a>
19+
<nav class="nav" aria-label="Primary Navigation">
20+
<a href="#about">About</a>
21+
<a href="#education">Education</a>
22+
<a href="#publications">Publications</a>
23+
<a href="#experience">Experience</a>
24+
<a href="#skills">Skills</a>
25+
<a href="#contact">Contact</a>
26+
<a href="https://scholar.google.com/scholar?q=Fozle+Rabbi+Shafi" target="_blank" rel="noopener noreferrer">Scholar</a>
27+
<a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer">LinkedIn</a>
28+
</nav>
29+
</header>
30+
31+
<main>
32+
<section id="home" class="hero section">
33+
<div class="hero-layout">
34+
<div>
35+
<p class="kicker">Cybersecurity Researcher | PhD Student</p>
36+
<h1>Fozle Rabbi Shafi</h1>
37+
<p class="hero-text">
38+
PhD student in Computing at Queen's University, building practical AI systems across
39+
generative AI, large language models, and AI-driven cybersecurity.
40+
</p>
41+
<div class="hero-tags">
42+
<span>Generative AI</span>
43+
<span>LLMs</span>
44+
<span>Deep Learning</span>
45+
<span>Agentic AI</span>
46+
</div>
47+
<div class="hero-actions">
48+
<a class="btn btn-primary" href="#contact">Get In Touch</a>
49+
<a class="btn btn-ghost" href="#publications">View Publications</a>
50+
</div>
51+
</div>
52+
<figure class="hero-photo-wrap">
53+
<img class="hero-photo" src="assets/shafi_image.jpg" alt="Portrait of Fozle Rabbi Shafi">
54+
</figure>
55+
</div>
56+
</section>
57+
58+
<section id="about" class="section card reveal">
59+
<h2>About</h2>
60+
<p>
61+
I am currently pursuing a PhD in Computing at Queen's University (started September 2025),
62+
following my MSc in Computing at Queen's University (CGPA: 4.24/4.30) and a BSc in Computer
63+
Science and Engineering from Metropolitan University, Bangladesh (CGPA: 3.90/4.00).
64+
</p>
65+
<p>
66+
My work sits at the intersection of research and engineering, where I design and ship
67+
AI-powered software with a strong focus on reliability, scalability, and meaningful impact.
68+
</p>
69+
<div class="grid two-col">
70+
<article class="mini-card">
71+
<h3>Research Interests</h3>
72+
<ul>
73+
<li>Generative AI</li>
74+
<li>Large Language Models (LLMs)</li>
75+
<li>AI-driven Cybersecurity</li>
76+
<li>Deep Learning</li>
77+
<li>Agentic AI</li>
78+
</ul>
79+
</article>
80+
</div>
81+
</section>
82+
83+
<section id="education" class="section card reveal">
84+
<h2>Education</h2>
85+
<div class="grid cards">
86+
<article class="mini-card">
87+
<h3>Doctor of Philosophy (PhD) in Computing</h3>
88+
<p class="meta">Queen's University, Kingston, ON, Canada</p>
89+
<p>September 2025 - Present</p>
90+
</article>
91+
<article class="mini-card">
92+
<h3>Master of Science (MSc) in Computing</h3>
93+
<p class="meta">Queen's University, Kingston, ON, Canada</p>
94+
<p>September 2024 - August 2025 | CGPA: 4.24/4.30</p>
95+
</article>
96+
<article class="mini-card">
97+
<h3>Bachelor of Science (BSc) in Computer Science and Engineering</h3>
98+
<p class="meta">Metropolitan University, Sylhet, Bangladesh</p>
99+
<p>September 2015 - August 2019 | CGPA: 3.90/4.00</p>
100+
</article>
101+
</div>
102+
</section>
103+
104+
<section id="publications" class="section reveal">
105+
<h2>Publications</h2>
106+
<div class="grid cards">
107+
<article class="card publication-card">
108+
<p class="year">2025</p>
109+
<h3>Personalized Mental Health Assistance with Large Language Models</h3>
110+
<p>The 2025 IEEE COMPSAC Conference, Toronto</p>
111+
<a href="https://ieeexplore.ieee.org/abstract/document/11126663" target="_blank" rel="noopener noreferrer">Read Publication</a>
112+
</article>
113+
<article class="card publication-card">
114+
<p class="year">2024</p>
115+
<h3>LLM-Therapist: A RAG-Based Multimodal Behavioral Therapist as Healthcare Assistant</h3>
116+
<p>IEEE Global Communications Conference (GLOBECOM)</p>
117+
<a href="https://ieeexplore.ieee.org/document/10901139" target="_blank" rel="noopener noreferrer">Read Publication</a>
118+
</article>
119+
<article class="card publication-card">
120+
<p class="year">2022</p>
121+
<h3>Cost-effective and Power-efficient Portable Turbine-based Emergency Ventilator</h3>
122+
<p>HardwareX</p>
123+
<a href="https://www.sciencedirect.com/science/article/pii/S2468067222000955" target="_blank" rel="noopener noreferrer">Read Publication</a>
124+
</article>
125+
<article class="card publication-card">
126+
<p class="year">2021</p>
127+
<h3>Rapidly Developable Low Cost and Power-efficient Portable Turbine-based Emergency Ventilator</h3>
128+
<p>International Conference on Biomedical and Bioinformatics Engineering</p>
129+
<a href="https://dl.acm.org/doi/abs/10.1145/3502871.3502893" target="_blank" rel="noopener noreferrer">Read Publication</a>
130+
</article>
131+
</div>
132+
</section>
133+
134+
<section id="experience" class="section reveal">
135+
<h2>Professional Experience</h2>
136+
<div class="timeline">
137+
<article class="timeline-item card">
138+
<h3>Software Engineer</h3>
139+
<p class="meta">Programming Hero | Aug 2022 - Aug 2024</p>
140+
<ul>
141+
<li>Led backend services development for production-scale applications.</li>
142+
<li>Delivered data analysis and visualization for business insights.</li>
143+
<li>Contributed to scalable architecture and implementation.</li>
144+
</ul>
145+
</article>
146+
<article class="timeline-item card">
147+
<h3>Software Developer (Remote)</h3>
148+
<p class="meta">Lighthouse Academy Canada | Jan 2021 - Aug 2022</p>
149+
<ul>
150+
<li>Designed and developed full-stack applications.</li>
151+
<li>Deployed and maintained systems on cloud infrastructure.</li>
152+
<li>Collaborated cross-functionally in remote teams.</li>
153+
</ul>
154+
</article>
155+
<article class="timeline-item card">
156+
<h3>Full-Stack Engineer</h3>
157+
<p class="meta">CRUX, Bangladesh | Mar 2019 - Dec 2021</p>
158+
<ul>
159+
<li>Developed mobile and web applications end-to-end.</li>
160+
<li>Built user interfaces and improved UX quality.</li>
161+
<li>Handled frontend/backend integration and performance tuning.</li>
162+
</ul>
163+
</article>
164+
</div>
165+
</section>
166+
167+
<section class="section reveal">
168+
<h2>Teaching Experience</h2>
169+
<div class="grid cards">
170+
<article class="card">
171+
<h3>Head Teaching Assistant, CISC 498</h3>
172+
<p class="meta">Queen's University | Sep 2025 - Present</p>
173+
<p>Mentored project teams, provided implementation guidance, and supported evaluation of deliverables and presentations.</p>
174+
</article>
175+
<article class="card">
176+
<h3>Head Teaching Assistant, CISC 327</h3>
177+
<p class="meta">Queen's University | Sep 2025 - Dec 2025</p>
178+
<p>Designed assignments with instructor collaboration, coordinated grading, and supported students with coursework and exams.</p>
179+
</article>
180+
<article class="card">
181+
<h3>Head Teaching Assistant, CISC 324</h3>
182+
<p class="meta">Queen's University | Jan 2025 - Apr 2025</p>
183+
<p>Assisted assignment design, coordinated TA workflows, and supported student learning in operating systems.</p>
184+
</article>
185+
<article class="card">
186+
<h3>Head Teaching Assistant, CISC 327</h3>
187+
<p class="meta">Queen's University | Sep 2024 - Dec 2024</p>
188+
<p>Supported assignment development, grading, exam proctoring, and student communication.</p>
189+
</article>
190+
</div>
191+
</section>
192+
193+
<section id="skills" class="section reveal">
194+
<h2>Technical Skills</h2>
195+
<div class="grid two-col">
196+
<article class="card">
197+
<h3>Programming</h3>
198+
<p>Python, JavaScript, Java, Kotlin, PHP, C, C++</p>
199+
</article>
200+
<article class="card">
201+
<h3>AI/ML</h3>
202+
<p>ML implementation, model training and evaluation, ML pipelines, LLM application development</p>
203+
</article>
204+
<article class="card">
205+
<h3>Software Engineering</h3>
206+
<p>Full-stack web/mobile/desktop development, scalable system design, Agile, Git, software testing & SQA</p>
207+
</article>
208+
<article class="card">
209+
<h3>Cloud & DevOps</h3>
210+
<p>AWS, DigitalOcean, Docker</p>
211+
</article>
212+
<article class="card">
213+
<h3>Databases</h3>
214+
<p>MySQL, PostgreSQL, SQLite, MongoDB, Firebase</p>
215+
</article>
216+
<article class="card">
217+
<h3>Embedded & Design</h3>
218+
<p>Arduino, ESP8266, sensor integration, Figma</p>
219+
</article>
220+
</div>
221+
</section>
222+
223+
<section class="section card reveal">
224+
<h2>Achievements & Activities</h2>
225+
<ul>
226+
<li>Chairman's Scholarship, Metropolitan University (2016 - 2018)</li>
227+
<li>Mobile App Development Trainer, Google Techmakers Bangladesh (2017)</li>
228+
<li>Information and Technology Officer, Queen's Bangladeshi Students Association (2025 - 26)</li>
229+
<li>Member of Sports Club, Metropolitan University (2017 - 2019)</li>
230+
</ul>
231+
</section>
232+
233+
<section id="contact" class="section card reveal">
234+
<h2>Contact</h2>
235+
<p>Open to collaborations in AI research, LLM applications, and software engineering opportunities.</p>
236+
<div class="contact-grid">
237+
<a href="mailto:f.shafi@queensu.ca">f.shafi@queensu.ca</a>
238+
<a href="tel:+16135616661">+1 613 561 6661</a>
239+
<a href="https://www.linkedin.com/in/fozle-rabbi-shafi-07841511a" target="_blank" rel="noopener noreferrer">LinkedIn Profile</a>
240+
<span>Kingston, Ontario, Canada</span>
241+
</div>
242+
</section>
243+
</main>
244+
245+
<footer class="site-footer">
246+
<p>© <span id="year"></span> Fozle Rabbi Shafi</p>
247+
</footer>
248+
249+
<script src="script.js"></script>
250+
</body>
251+
</html>

‎script.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const reveals = document.querySelectorAll('.reveal');
2+
const navLinks = document.querySelectorAll('.nav a');
3+
const sections = [...document.querySelectorAll('main section[id]')];
4+
5+
const revealObserver = new IntersectionObserver(
6+
(entries) => {
7+
entries.forEach((entry) => {
8+
if (entry.isIntersecting) {
9+
entry.target.classList.add('is-visible');
10+
revealObserver.unobserve(entry.target);
11+
}
12+
});
13+
},
14+
{ threshold: 0.16 }
15+
);
16+
17+
reveals.forEach((item) => revealObserver.observe(item));
18+
19+
const activateNav = () => {
20+
const offset = window.scrollY + 140;
21+
let current = sections[0]?.id;
22+
23+
sections.forEach((section) => {
24+
if (offset >= section.offsetTop) {
25+
current = section.id;
26+
}
27+
});
28+
29+
navLinks.forEach((link) => {
30+
link.classList.toggle('active', link.getAttribute('href') === `#${current}`);
31+
});
32+
};
33+
34+
window.addEventListener('scroll', activateNav);
35+
window.addEventListener('load', activateNav);
36+
37+
document.getElementById('year').textContent = new Date().getFullYear();

0 commit comments

Comments
 (0)