Desktop — Page 02
PAGE 02 / 07

About Page

About me/about.html + certificates-viewer.html

Detailed personal profile — education timeline, 12-skill grid, CEFR English level indicator, hobbies list, 5 expandable club/organization cards, and a link to the Certificates Viewer.

Profile, education timeline, ১২টি skill chip, CEFR language level, ৫টি expandable club card, এবং Certificates Viewer — সব একসাথে।

Profile Page Particle Canvas Expandable Cards CEFR Language Education Timeline Certificates Viewer PDF CV Download
SECTION 01

Education Timeline

Vertical timeline with 3 education nodes: BSc in KUET (current), HSC from Notre Dame College, SSC from school. Each has institution name, department/group, year, and GPA badge.

৩টি education milestone। Timeline node-এ institution, department, year, এবং GPA badge। AOS fade-left animation।

KUET — B.Sc. Mechanical Engineering
Khulna University of Engineering & Technology — current (2021–present)
Notre Dame College — HSC
Science Group · GPA 5.00 · 2020
SSC
GPA 5.00 · 2018
Education Timeline
KUET
B.Sc. Mechanical Engineering
2021 – Present
Notre Dame College
HSC · Science Group
2020
GPA 5.00
Secondary School
SSC
2018
GPA 5.00
SECTION 02

Skills Chip Grid

12 skill badges arranged in a flex-wrap grid. Each badge has an icon and label. Hover effect: slight scale-up + red border glow. Categories are visually color-coded.

১২টি skill badge। Hover করলে scale হয় এবং red glow আসে। Color দিয়ে category বোঝানো হয়।

CAD Tools
SolidWorks, CATIA, Fusion 360, AutoCAD
Programming
Python, C/C++, MATLAB, HTML/CSS/JS
Simulation
ANSYS, Simulink, FEA/CFD analysis
Electronics
Arduino, circuit design, PCB layout
Skill Badges
SolidWorks CATIA Python C / C++ ANSYS MATLAB Arduino Electronics HTML/CSS JavaScript Fusion 360 Simulink
SECTION 03

CEFR Language Level

A visual CEFR (Common European Framework of Reference) scale showing English proficiency. The current level (C1 — Advanced) is highlighted with a red glow. Other levels are dimmed.

English proficiency CEFR scale (A1–C2)। Current level C1 highlighted। Visitors সহজে বুঝতে পারে।

C1 — Advanced English
Can understand complex academic texts. Expresses ideas fluently.
Visual Scale A1 → C2
All 6 CEFR levels displayed — active level glows red
Also: Bangla (Native)
Native language — all Bangla text on the site is hand-written
CEFR Language Scale
A1
A2
B1
B2
★ C1
C2
English Proficiency — C1 Advanced
"Can understand a wide range of demanding, longer texts."
SECTION 04

Expandable Club Cards

5 club/organization cards that expand on click. Each card shows the club name + role, then expands to reveal activities, achievements, and duration. Uses toggleClubDetails() JS function.

৫টি card click করলে expand হয়। Club name, role, activities — সব toggle করে দেখানো হয়।

KUET Robotic Club
Member — participated in robotics competitions and workshops
KUET CAAD Club
CAD & engineering design club activities
More clubs (5 total)
Click any card to expand and see full details
Expandable Club Cards
KUET Robotic Club
Member · 2022–present
Participated in robotics competitions. Worked on line-following and autonomous bots.
KUET CAAD Club
Member · 2022–present
Environmental Society
Volunteer · 2023
SECTION 05

Certificates Viewer

Accessible from the About page — a separate certificates-viewer.html page. Shows all 10 certificates with filter tabs by category, a grid view, and a PDF inline viewer.

About page থেকে link করা আলাদা page। Category filter, grid view, inline PDF viewer সহ ১০টি certificate।

Filter by Category
All / CAD / Programming / Online / Others — tab-based filter
Certificate Grid
Certificate cards with title, issuer, date, and view button
Inline PDF Viewer
Click a certificate → PDF opens in-page via iframe embed
Data Source
certificates-data.json — all metadata stored in JSON
Certificates Viewer
All CAD Programming Online

About Page — Files & Libraries

FileTypePurpose
About me/about.htmlCoreMain about page — all sections
About me/about-desktop.cssCSSPage-specific styles — chip grid, club cards, CEFR scale, particle canvas
About me/certificates-viewer.htmlSub-pageCertificates viewer — filter tabs, grid, inline PDF viewer
About me/certificates-data.jsonDataArray of certificate objects — title, issuer, date, file path, category
Optimization/styles.cssCSSGlobal reset + base styles
Optimization/navbar-autohide.css/.jsSharedDesktop navbar with autohide on scroll
Optimization/Background/background-system.cssSharedAnimated grid + particle background
Particle Canvas (inline JS)JSCanvas element particles-canvas with floating dots
toggleClubDetails()FunctionExpands/collapses club card body on click
Font Awesome 6 (CDN)IconsAll icon usage
Google Fonts — InterFontPrimary typeface