Technical Portfolio — 2024 / 2025

Web Development
& Information Systems

Diploma Student
Web Development & Information Systems
student@email.com
github.com/yourhandle
Jeddah, Saudi Arabia
01 — Introduction
Professional Summary

I am a diploma-level student specializing in Web Development and Information Systems, with hands-on experience building responsive web interfaces, mobile applications, and cloud-integrated systems. My work sits at the intersection of clean front-end design and reliable back-end logic — combining aesthetic sensibility with structured, maintainable code.

Over the course of my program, I have built and delivered projects ranging from task management web applications to Flutter-based mobile tools, each documented and tested through full development cycles. I approach every project with a clear understanding of user needs, system constraints, and practical outcomes — not just theoretical design.

This portfolio presents a curated selection of my work, the technologies I have developed competency in, and the professional direction I intend to pursue. It is intended to serve as a transparent record of my growth as a developer and a demonstration of my readiness to contribute within a professional or collaborative technical environment.

02 — Competencies
Skills Overview

Front-End Development

HTML5 CSS3 JavaScript (ES6+) Responsive Design Flexbox / Grid

Mobile Development

Flutter Dart Cross-platform UI State Management

Backend & Data

Firebase Firestore Firebase Auth Firebase Storage REST APIs

Design & Tools

Figma (wireframing) UI/UX Principles Git & GitHub VS Code Android Studio
03 — Work
Project Documentation
01

StudyTrack — Student Task & Deadline Manager

Web Application · HTML / CSS / JavaScript / Firebase

A browser-based productivity application that allows students to log academic tasks, set submission deadlines, and track completion status — all stored persistently using Firebase Firestore.

HTML5CSS3Vanilla JS Firebase FirestoreFirebase Auth

Sole developer. Responsible for full-stack implementation: interface design, JavaScript logic, Firebase integration, and user authentication flow.

Built as a single-page application using modular JavaScript. Firebase Authentication handles user login via email. Firestore stores task records per user UID. The UI updates dynamically using DOM manipulation with no framework dependency.

Managing real-time Firestore listeners without causing memory leaks required careful unsubscription on page transitions. Deadline sorting logic was implemented using JavaScript Date objects and custom comparators.

Project Value Students frequently lose track of multiple assignment deadlines across subjects. StudyTrack consolidates this into a single authenticated interface, reducing missed submissions and improving personal academic organization.
02

ShopLocal — Community Product Listing App

Mobile Application · Flutter / Firebase

A Flutter mobile application that enables small local vendors to list products with images and prices, and allows users to browse listings by category — functioning as a lightweight local marketplace.

FlutterDartFirebase Firestore Firebase StorageFirebase Auth

Lead developer and UI designer. Designed all application screens in Figma prior to implementation, coded the Flutter widget tree, and configured Firebase rules for read/write access control.

The application uses a multi-screen Flutter structure with a BottomNavigationBar. Product images are uploaded to Firebase Storage and their URLs are saved to Firestore documents. A StreamBuilder listens to the product collection and renders cards dynamically. User roles (vendor vs. buyer) are stored as Firestore fields and used to control UI state.

Handling image upload progress feedback required integrating UploadTask listeners. Category filtering was implemented client-side using Dart list filtering to avoid complex Firestore compound queries.

Project Value Small vendors in local communities often lack a digital presence. ShopLocal provides a zero-cost entry point for product visibility without requiring technical knowledge from the vendor — they simply register, photograph, and post.
03

InfoSys Dashboard — Department Data Reporting Interface

Web Interface · HTML / CSS / JavaScript / Chart.js

A static but fully interactive web dashboard designed to simulate an internal reporting interface for a small academic department — displaying student counts, course loads, and performance indicators through charts and summary cards.

HTML5CSS GridJavaScript Chart.jsJSON (mock data)

Designer and front-end developer. Responsible for dashboard layout architecture, data visualization implementation using Chart.js, and writing mock JSON data structures to simulate real system output.

The dashboard is built with a CSS Grid-based layout divided into sidebar navigation, KPI summary cards, a bar chart (course enrollment), and a doughnut chart (grade distribution). All data is loaded from a local JSON file via the Fetch API and rendered on page load. Interactive filter buttons allow switching between academic terms.

Ensuring responsive behavior across screen sizes while maintaining dashboard proportions required custom media queries and grid template adjustments. Chart.js canvas elements needed explicit dimension control to prevent layout overflow on smaller viewports.

Project Value Information systems staff often depend on static spreadsheets for internal reporting. This project demonstrates how a browser-based interface can present the same data more accessibly — with visual clarity and without requiring database infrastructure.
04 — Growth
Learning & Development

Formal Education

Diploma in Web Development and Information Systems. Core modules include database management, systems analysis, web programming, UI design principles, and software project management.

Self-Directed Learning

Completed supplementary coursework in Flutter development and Firebase integration through online platforms. Practiced version control workflows using Git and GitHub for all personal projects.

Practical Experience

All projects in this portfolio were built and tested independently — from requirements definition through to deployment. Each project involved full documentation, debugging, and peer review.

Currently Exploring

Expanding into React.js for component-based web development, and deepening knowledge of Firebase Cloud Functions for serverless back-end logic in future projects.

05 — Contact & Direction
Future Goals

I am actively seeking internship opportunities, collaborative student projects, and junior development roles where I can apply and expand my current skill set within a structured team environment.

  • Secure a front-end or full-stack internship by mid-2025
  • Build and deploy a production-grade web application using React and a live database
  • Obtain Firebase or web development certification
  • Contribute to an open-source project relevant to education or productivity tools
  • Continue advancing toward a Bachelor's degree in Computer Science or Software Engineering

📧 student@email.com
🔗 linkedin.com/in/yourprofile
💻 github.com/yourhandle
📍 Jeddah, Saudi Arabia
🕐 Available for remote or local collaboration

LANGUAGES

Arabic — Native  |  English — Professional Working Proficiency