My Projects

💻 HTML Portfolio Website – Task 1

Course: Web Development – Task 1

Date: 02 April 2025

Created a fully functional personal portfolio website using HTML, showcasing my bio, contact details, and project work. The site includes three main pages:

  • Home – Personal photo, heading, video, and bio.
  • About Me – Background and personal interests.
  • Contact Me – Social media links and phone number.

This project emphasized fundamental HTML structure, navigation, and personal branding by using custom content and layout imitating a given design.

🎨 Portfolio Website Styling – Task 2

Course: Web Development – Week 1

Date: 03 April 2025

Continued development of my personal portfolio website by integrating external CSS to enhance styling and responsiveness. Focused on improving layout, design consistency, and user interaction across various devices.

  • Used Flexbox and media queries to create a responsive layout for desktop, tablet, and mobile views.
  • Styled elements with custom colors, fonts, and spacing for a clean, professional appearance.
  • Implemented hover effects, smooth scrolling, and a mobile-friendly hamburger menu.
  • Ensured images and videos scale responsively.

This task helped sharpen my CSS skills and taught me how to create a visually appealing, responsive website that adapts to different screen sizes.

🟨 JavaScript Bootcamp Tasks – Week 2

Submission Date: 11 April 2025 – 09:00 AM

This task introduced core JavaScript concepts through practical exercises, divided into three major sections: Variables, Data Types & Operators, and Conditional Statements & Loops. Each topic was implemented in its own file and pushed to a dedicated GitHub repository.

  • Variables: Practiced declaring, reassigning, and printing variables of different types including strings, numbers, and booleans. Also explored arithmetic operations.
  • Data Types & Operators: Used comparison and logical operators, experimented with assignment operators, and understood the behavior of number and boolean data types.
  • Conditional Statements & Loops: Built temperature and divisibility checks using both if-else and switch statements. Loops included for, while, and do-while structures for iterating through sequences and arrays.
  • Advanced Challenges: Solved HackerRank problems (Number Line Jumps, Sales by Match, and Bill Division) with attention to correctness and optimization.

This comprehensive task solidified my understanding of core JavaScript fundamentals while also developing my problem-solving skills through applied coding and algorithm challenges.

🟨 JavaScript Task – 2: Memory Game

Submission Date: 16 April 2025 – 09:00 AM

This task involved creating an interactive memory matching game using DOM manipulation. The game challenges users to find all matching pairs of cards by flipping them over in a 4x4 grid layout.

  • Game board features 16 cards arranged in a 4x4 grid, each with a hidden letter (A-H) paired with one other card.
  • Players click two cards to reveal letters; matched pairs stay face up while unmatched pairs flip back after a short delay.
  • Only two cards can be flipped at once to enforce game rules.
  • The game concludes when all pairs are matched and revealed.

This project enhanced my skills in JavaScript event handling, DOM manipulation, and timing functions to create smooth, interactive gameplay. It also emphasized careful state management to control the game logic and user experience.

🔗 Play or view on GitHub

🌐 Web Hosting: Publish Your Memory Game

Objective: Make the Memory Game from JavaScript Task 2 accessible online via a live link by hosting it on a web platform.

  • Push the complete Memory Game project, including HTML, CSS, and JavaScript files, to a GitHub repository.
  • Select a free hosting service to deploy the project, such as GitHub Pages or others discussed in class.
  • Connect the GitHub repository to the hosting platform and deploy the game.
  • Test the live site to ensure all cards load, flipping and matching functions work correctly, and the game ends properly.
  • Submit the live URL as proof of hosting and functionality.

This task strengthened my skills in deploying web applications and managing live project links, essential for sharing projects professionally and ensuring accessibility.

🔗 View on GitHub

🖥️ Node.js Task 1: Simple Server - Mock Media Server

Objective: Build a simple Node.js server with endpoints serving mock media data and handle various HTTP methods.

  • Create arrays containing data for movies, series, and songs with multiple entries.
  • Set up endpoints /movies, /series, and /songs to return corresponding data on GET requests.
  • Handle any other routes with a 404 response.
  • Implement POST, DELETE, and PUT methods to allow adding, deleting, and updating items in each media array, returning updated data after each operation.
  • Push the full project to GitHub and submit the repository link.

This task helped develop backend skills in Node.js, focusing on RESTful API design, data manipulation, and proper request handling.

🔗 View on GitHub

🖥️ Node.js Task 2: Mock Media Server Extended

Objective: Extend the Node.js mock media server to use persistent file storage and improve modularity.

  • Use the file system module to store media data dynamically in a JSON file.
  • Create a function to check for the data file on server start and create it if missing.
  • Separate file operations into a dedicated module for better code organization.
  • Use either native http or Express.js for routing and endpoint management.
  • Serve an API documentation HTML page at the root path (/) describing available endpoints and data formats.
  • Handle non-existent routes gracefully with appropriate responses.
  • Work on a different git branch and submit the repo link with the branch name.

Bonus: Add support for real media files, storing them in folders with metadata in JSON, and allow file downloads.

This task enhanced skills in persistent data handling, modular Node.js design, and API documentation.

💼 Personal Portfolio Website

This very portfolio site is part of a Node.js-based custom web server. No frameworks used — designed to reflect my skills and journey as a developer and cybersecurity enthusiast.

Tech used: HTML, CSS, JavaScript, Node.js

🚀 Final Codetribe Bootcamp Assessment

Objective: Recreate a professional website design exactly as provided using HTML, CSS, and JavaScript.

Date: 19 May 2025

For this final project, I focused on accurately translating a complex desktop web design into clean, semantic HTML with consistent CSS styling and JavaScript interactivity. The project helped me sharpen my skills in design interpretation, frontend development, and deploying a live site.

  • Learned how to break down detailed design mockups into structured HTML and CSS.
  • Applied advanced CSS techniques for layout and styling to match the design pixel-perfectly.
  • Implemented JavaScript functionality to improve user experience and interaction.
  • Managed assets effectively, including images and fonts, for optimized performance.
  • Practiced deploying the finished site to a live hosting platform for public access.

This task was essential in preparing me for professional frontend web development, emphasizing precision, attention to detail, and full project delivery.