Interactive Media CA - Portfolio Deliverables

This page documents the main deliverables for my Interactive Media Design & Visualisation continuous assessment. The project is a responsive, single-page portfolio site built to showcase my skills, education, experience, and projects.

1. Live Site & Code

Live site: https://yonko-smurk.github.io/fuad-porfolio/#hero
Tech stack: HTML5, CSS3, JavaScript, Bootstrap 5.3

2. Page Structure & Content

The main portfolio page (index.html) includes the following sections:

Hero: Introduction, role, and location with a large portrait.
About: Short bio plus “Quick Info” card (location, degree, year, interests, roles).
Education: Accordion listing modules and grades for Years 1–4.
Projects: Cards describing key projects (Django e-commerce, Blazor TV app, FYP).
Work Experience: Accordion detailing SAP internship and Bidvest Noonan role.
Skills & Achievements: Bullet lists and animated skill bars.
Hobbies & Interests: Three hobby cards with custom icons.
Contact: Contact information, LinkedIn link, and a Bootstrap modal.

3. Visual Design & Layout

Built on Bootstrap’s grid for responsive layout across mobile, tablet, and desktop.
Custom CSS with design tokens using :root variables for colours, surfaces, and shadows.
Consistent card “surface” style reused across Education, Experience, and Projects.
Subtle gradients, shadows, and hover states to create depth and modern UI.
Typography based on system UI fonts for readability and a clean look.

4. Interaction & JavaScript Features

The site uses small, focused JavaScript functions in script.js:

Theme toggle: Button in the navbar switches between light and dark mode by toggling a dark-mode class on <body>. The choice is saved in localStorage so it persists between visits.
Dynamic year: The current year is injected into the footer automatically.
Back-to-top button: A floating button appears after scrolling and smoothly scrolls back to the top.
Offcanvas navigation: On mobile, the Bootstrap offcanvas menu closes automatically when a nav link is clicked, without breaking in-page scrolling.
Skill bar animation: Progress bars in the Skills section animate to their target percentage when the section enters the viewport, using IntersectionObserver (with a graceful fallback if it’s not supported).

5. Use of Bootstrap Components

Navbar (main site nav)
Offcanvas (mobile menu)
Scrollspy (highlights active section in nav)
Accordions (Education, Work Experience)
Cards (Projects, Hobbies, About panels/quick info)
Progress bars (4 skill bars in Skills)
Modal (Contact details)
Buttons (theme toggle, CTAs, navbar toggler)
Icons (Bootstrap Icons for section headings)
Total Bootstrap component types used: 9

6. Usability & Accessibility Considerations

Clear section headings and logical content grouping for easy scanning.
Responsive layout tested on desktop and mobile breakpoints.
Descriptive link text and alt attributes for key images.
Use of semantic HTML elements (e.g., <section>, <nav>, <footer>).
ARIA labels on the navbar toggler and modal for better assistive technology support.

7. Reflection

This CA helped me practise designing a consistent visual system, working with Bootstrap 5 in a more customised way, and adding small interactive details with JavaScript. I focused on building a realistic portfolio that I can extend with more projects and content in the future.