Portfolio

Introduction: In late August 2024, I embarked on the ITOL program (ITonlinelarning Academy), a focused learning experience designed to equip its students with practical skills in web development and cloud technologies. While I already possessed a solid foundation in many of these areas, including HTML and CSS experience dating back to around 2000, the program's structured curriculum provided a valuable opportunity to refine my existing knowledge, explore new techniques, and gain practical experience through project work. The program encompassed three key projects and two cloud certification exams (Azure Fundamentals AZ-900 and AWS Cloud Practitioner CLF-C02), providing a clear path for skill development. My project work reflects this progression, starting with foundational web concepts and culminating in a cloud-ready web application.

Front End Design

Static Website on AI

(October 2024)

Summary: This website offers a balanced perspective on Aritificial Intelligence, moving beyond the hype and fear to showcase its potential for positive impact. It provides concrete examples of how AI can be used constructively in business, creativity, and everyday life, offering practical insights and applications.

Problem: While I had a solid foundation in HTML and CSS from prior experience (dating back to around 2000), this project focused on the challenge of structuring and presenting complex information about Artificial Intelligence in a clear and accessible way, aiming for a balanced perspective that moves beyond hype and fear.
Solution: I developed a four-page static website designed to present complex AI concepts in a user-friendly and balanced way. Key design choices included clear information architecture, concise writing, and a focus on practical examples to illustrate the constructive applications of AI.
Impact: This project provided a solid foundation in front-end web development and allowed me to delve into the important intersection of AI and business. It also honed my skills in researching, synthesizing, and presenting complex information.

GitHub repo: github.com/lzrdGreen/AIConsultancy

Relevant skills: HTML, CSS

Building on this foundation, I wanted to explore the dynamic aspects of web development and delve into the world of JavaScript.

JavaScript-Powered Interactive Website

(October 2024)

Summary: This interactive website showcases my proficiency in front-end development using JavaScript and related technologies (React and d3.js). It features a variety of dynamic elements, including data visualisations with d3.js, responsive image galleries, and interactive demos, demonstrating my ability to create engaging and functional web experiences.

Problem: I wanted to demonstrate my growing proficiency in front-end web development, particularly JavaScript and related technologies. I aimed to showcase a range of interactive elements, data visualisation techniques, and experience with different JavaScript libraries and frameworks.
Solution: I created a five-page interactive website showcasing various JavaScript functionalities, including basic JavaScript demos, data visualisation with d3.js, interactive image galleries, a simple game, and a page dedicated to the use of React.
Impact: This project significantly expanded my front-end development skills, demonstrating my ability to create interactive and engaging web experiences. It also provided valuable experience with data visualisation and working with different JavaScript tools and frameworks.

GitHub repo: github.com/lzrdGreen/jsplayground

Relevant skills: HTML, CSS, JavaScript, React, d3.js

While developing the interactive website in October 2024, I recognised the power and potential of React but felt it needed more focused practice to become a natural part of my development toolkit. To address this, I created a comprehensive React Crash Course.

With a solid understanding of front-end development under my belt, I was ready to tackle a more complex challenge: building a full-stack web application.

Full Stack Design

Project Management System

(November 2024)

Summary: The PMS app offers a user-friendly and versatile solution for managing projects. Featuring intuitive list and board views, project timelines, it simplifies task creation, organisation, and tracking, empowering you to enhance productivity and achieve project goals efficiently. Key features include CRUD operations for tasks and projects, task prioritisation, keyword search, and filtering by tags.

Problem: I wanted to gain practical experience with full-stack development using a robust framework. While the program curriculum focused on PHP, I opted for Django (Python) due to its modern features and strong alignment with my long-term career goals. I aimed to build a project management system to address the common problem of overly complex or inflexible project management tools.
Solution: I developed a user-friendly and versatile web-based project management system using Django (Python). The application provides core functionalities such as task management, project tracking, progress visualisation, project timelines, and comprehensive CRUD operations.
Impact: The resulting application provides a streamlined approach to project management, empowering users to efficiently organise their work, track progress, and stay on top of deadlines. It also served as a valuable learning experience in building a full-stack web application with Django, working with databases, and implementing modern web development practices. The ongoing migration to AWS will further enhance my skills in cloud technologies and DevOps practices, directly aligning with the program's focus on cloud readiness.

Tip: Wait 2s & Reload if you see a confusing message like "Something went wrong while trying to load this site".

Actually, nothing went wrong. The hosting provider is free so they hybernate the website if unused.

As I wanted hosting with free Django backend, I could find just one provider which offers it free of charge for 1 project only. Please be patient and sorry for the inconvenience.

GitHub repo: github.com/lzrdGreen/pms

Relevant skills: Django, MVT framework, URL mapping, QuerySet API, Form API, Django admin panel, template language, SQL

Project Management System MVP with DRF API

(Ongoing Development - API Access & Static Frontend)

(May 2025)

Summary: This iteration delivers a robust API built with Django REST Framework, providing a structured interface for project and task management. The API currently offers essential CRUD operations while serving as a scalable foundation for future expansion into diverse client applications (such as mobile apps or Progressive Web Apps, PWAs). The system can be accessed through three distinct methods: direct API endpoints (internal use), a functional static website demonstrating real-world implementation via Axios requests, and a traditional Django template system utilising ORM. This decoupled architecture creates a flexible and adaptable project management solution, positioning the system for containerisation with Docker and eventual AWS EC2 deployment.

Problem: While the initial Project Management System effectively utilised Django's ORM-based templates for a server-rendered interface, the natural progression was to adopt a more modern and versatile architecture. Implementing a robust API with Django REST Framework, alongside the existing template system, offers several advantages. It provides a structured way to expose core functionalities, enables the development of diverse client applications, and aligns with current best practices in web development including mobile applications and Progressive Web Apps (PWAs).
Solution: This MVP of the Project Management System focuses on a robust API built with Django REST Framework, exposing core functionalities (task and project management, CRUD operations) through standard RESTful endpoints. Leveraging Django's Class-Based Views for efficient and concise development, this API can be explored locally via the DRF browsable API. In parallel, a separate static website is being developed to consume this API using Axios. Additionally, a new set of Django templates has been created, also utilising Class-Based Views, to provide a traditional server-rendered interface. This MVP strategically separates API endpoints (defined in api_urls.py) from the template-driven views (using the app-level urls.py), demonstrating a decoupled approach for potential future expansion and diverse client applications.
Impact: This API-driven architecture establishes a scalable foundation for the Project Management System, enabling potential future development of diverse client applications. Currently, the system offers three access methods: readily accessible API endpoints, a functional static website that actively retrieves and displays data via Axios requests to the API, and a Django ORM-based template system for server-rendered content. This decoupled API structure facilitates potential future third-party integrations. This approach showcases practical expertise in API design and development, including familiarity with tools like curl, Insomnia, and Postman for API testing and debugging. The MVP represents a critical first step toward containerisation with Docker and eventual deployment to AWS EC2.

GitHub repo: github.com/lzrdGreen/api-pms

Relevant skills: Django, DRF (Django REST Framework), API request lifecycle, JSON and XML API output, database model serialisation, function and class-based views, Test and Debug APIs (curl, Insomnia, Postman), API throttling and caching