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
Click on an image to enlarge it.
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
Click on an image to enlarge it.
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.
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, SQL
Click on an image to enlarge it.