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
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
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.
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
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.
GitHub repo: github.com/lzrdGreen/pms
Relevant skills: Django, SQL
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.
React Crash Course
Summary: This comprehensive React Crash Course provides a structured learning path for beginners to grasp the fundamentals of React development. Through self-paced interactive lessons and a hands-on capstone project (a GitHub User Finder app), learners gain practical experience with core concepts including JSX syntax, component creation, state management, event handling, conditional rendering, and API integration.
Problem: While the ITOL program introduced me to React, I felt the need for more in-depth practice and a structured approach to master its core concepts. The existing tutorials were often either too lengthy, outdated, or lacked a coherent, beginner-friendly learning path.
Solution: I developed a comprehensive React Crash Course designed for beginners with a basic understanding of JavaScript. The course features interactive lessons with clear explanations, well-commented sample code, code exercises, quizzes, and a hands-on capstone project (a GitHub User Finder app that integrates with the GitHub API) to solidify understanding and provide practical experience.
Impact: This project not only solidified my own understanding of React but also provided me with valuable experience in creating educational content and structuring a learning experience. The course now exists as a website and a GitHub repository, potentially benefiting other aspiring React developers.
GitHub repo: github.com/lzrdGreen/React-Crash-Course
Relevant skills: JavaScript, React, API Integration, DOM manipulation
Click on an image to enlarge it.
In spring 2024 (before joining the ITOL program), I developed a resource focused on intermediate Python concepts and best practices to deepen my knowledge in this area.
Practical Guide to Intermediate Python
Intermediate Concepts and Best Practices in Python
Summary: This repository provides a collection of examples and explanations covering intermediate Python concepts and best practices, including object-oriented programming (OOP), lambda functions, generators, regular expressions, data structures from the collections module and beyond, and unit testing. It serves as a practical guide for developers looking to enhance their Python skills beyond the basics.
Problem: I undertook this project to create a curated collection of intermediate Python concepts and techniques that I frequently used or found valuable. My goal was to build a readily accessible reference for myself (and refine my own understanding as a byproduct) and potentially others who may need to consolidate these scattered pieces of knowledge into a single, cohesive resource.
Solution: To create this personal reference, I developed a GitHub repository containing well-commented code examples and explanations of key intermediate Python concepts. This included detailed sections on OOP (classes, inheritance, polymorphism), lambda functions, generators, regular expressions, decorators, various data structures (stacks, queues, graphs, trees), and unit testing. The repository is structured to provide clear examples and practical demonstrations of how these concepts can be applied.
Impact: This project successfully consolidated my understanding of intermediate Python concepts and created a readily accessible reference for my future projects. The process of organising and documenting these concepts also significantly deepened my understanding. The repository now serves as a valuable personal learning resource and may also be beneficial to other developers seeking practical examples and explanations of these topics.
GitHub repo: github.com/lzrdGreen/Intermediate-Concepts-in-Python
Relevant skills: Python, Unit Testing, Regular Expressions