projects.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Explore the portfolio of Chad Probert, an experienced full stack web developer and software engineer with skills in React, Node.js, and more."><meta name="keywords" content="full stack developer, software engineer, web development, React, Node.js, Python, JavaScript, MongoDB, coding mentor"><meta name="robots" content="noindex"><!-- Open Graph Tags --><meta property="og:type" content="website"><meta property="og:title" content="Chad Probert | Full Stack Developer & Software Engineer Portfolio"><meta property="og:description" content="Explore Chad Probert's projects as a full stack developer."><meta property="og:image" content="https://chadprobert.github.io/images/me3.avif"><meta property="og:url" content="https://chadprobert.github.io/projects.html"><meta property="og:site_name" content="Chad Probert Portfolio"><!-- Enhanced Twitter Sharing Cards --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Chad Probert | Full Stack Developer & Software Engineer"><meta name="twitter:description" content="Explore Chad Probert's projects."><meta name="twitter:image" content="https://chadprobert.github.io/images/me3.avif"><link rel="icon" type="image/png" sizes="32x32" href="../images/cp-logo.png"><link rel="icon" type="image/png" sizes="16x16" href="../images/cp-logo.png"><link rel="apple-touch-icon" sizes="180x180" href="../images/cp-logo.png"><title>Chad Probert | Projects</title><!-- Preconnect and Styles --><link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><link rel="stylesheet" href="./css/projects/projects.min.css"><link rel="stylesheet" href="./css/projects/features/animations.min.css"><link rel="stylesheet" href="./css/projects/features/dark-mode.min.css"><link rel="stylesheet" href="./css/projects/features/mobile.min.css"><!-- Inline critical CSS --><style>body{padding-top:50px;text-align:center;background-color:#f5f6f7;color:#222;font-family:Poppins,sans-serif;margin:0}h1{font-family:Inter,sans-serif;font-weight:800;line-height:99px;font-size:80px;letter-spacing:-1px}</style></head><body><div class="con"><!-- Dark Mode Toggle --> <input type="checkbox" id="dark-mode-toggle" aria-label="Toggle dark mode"> <label for="dark-mode-toggle" id="dark-mode-label" class="dark-mode-label">Dark Mode</label><!-- Header --><header role="banner"><h1>Chad Probert</h1><h2 class="roleHeading">Full Stack Web Developer & Software Engineer</h2></header><!-- Social Media Icons --><nav aria-label="Social media links"><ul class="socialIcons"><li class="githubIcon socialIcon"><a href="https://github.com/ChadProbert" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile" class="githubIcon"><iconify-icon icon="jam:github" aria-hidden="true"></iconify-icon></a></li><li class="whatsappIcon socialIcon"><a href="https://wa.me/+27609849667" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp Contact" class="whatsappIcon"><iconify-icon icon="uim:whatsapp" aria-hidden="true"></iconify-icon></a></li><li class="linkedinIcon socialIcon"><a href="https://www.linkedin.com/in/chad-probert-6421b321b/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile" class="linkedinIcon"><iconify-icon icon="uil:linkedin" aria-hidden="true"></iconify-icon></a></li></ul></nav><!-- Avatar Image --> <img src="./images/me.jpeg" alt="Chad Probert's portfolio picture" width="150" height="150" class="avatar" loading="lazy"><!-- Navigation Bar --><div class="row navWrapper"><nav aria-label="Main navigation"><ul class="routes"><li class="navItem"><a href="./index.html" class="navLink"><i class="fa-solid fa-person-rays"></i> ABOUT ME</a></li><li class="navItem"><a href="./projects.html" class="navLink" aria-current="page"><i class="fa-solid fa-folder fa-flip"></i> PROJECTS</a></li><li class="navItem"><a href="./contact.html" class="navLink"><i class="fa-solid fa-address-book"></i> CONTACT ME</a></li></ul></nav></div><div class="con"><main id="main-content"><h2 class="projectsHeading">Projects</h2><!-- row 1 --><div class="row"><!-- project 1 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><!-- target=_blank makes the link open up on a new page --> <a href="./images/celerity.jpg" target="_blank"><img src="./images/celerity.jpg" class="card-img-top" alt="Image of Celerity app"></a><div class="card-body"><h5 class="card-title">Celerity – New Tab Page</h5><p class="card-text">Celerity is a customisable new tab page featuring lightning-fast search capabilities, developer-inspired themes, and productivity tools.</p><iconify-icon class="stackIcon" icon="skill-icons:html"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:css"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:javascript"></iconify-icon><br><a href="https://chadprobert.github.io/celerity/" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-solid fa-globe"></i>Live Demo</a><a href="https://github.com/ChadProbert/celerity" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 2 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/dev-trends-app.png" target="_blank"><img src="./images/dev-trends-app.png" class="card-img-top" alt="Dev Trends app image"></a><div class="card-body"><h5 class="card-title">Dev Trends App</h5><p class="card-text">A user-centric web application that interacts with the Dev.to API to fetch and display the latest and most popular development trend articles.</p><iconify-icon class="stackIcon" icon="skill-icons:django"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:sqlite"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:figma-dark"></iconify-icon><br><a href="https://github.com/ChadProbert/dev-trends" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 3 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/online-store-website.png" target="_blank"><img src="./images/online-store-website.png" class="card-img-top" alt="Online Store website image"></a><div class="card-body"><h5 class="card-title">Online Store</h5><p class="card-text">A simple creation of an online store using Apple's UI design principles</p><iconify-icon class="stackIcon" icon="skill-icons:html"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:css"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/online-store" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div></div><!-- row 2 --><div class="row"><!-- project 4 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/appointments-project.png" target="_blank"><img src="./images/appointments-project.png" class="card-img-top" alt="Appointments app image"></a><div class="card-body"><h5 class="card-title">Appointment Booking App</h5><p class="card-text">An application for a medical centre that allows a user to view the doctor's appointments for the next 2 weeks. An admin user (receptionist or doctor) can view all of the doctor's appointments, create a new appointment, edit an existing appointment and delete an appointment.</p><iconify-icon class="stackIcon" icon="skill-icons:mongodb"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="logos:nodejs-icon-alt"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:expressjs-light"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/dr-smith-medical-centre-app" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 5 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/todo.png" target="_blank"><img src="./images/todo.png" class="card-img-top" alt="To-do app image"></a><div class="card-body"><h5 class="card-title">To-Do List App</h5><p class="card-text">An application that allows an authenticated user to create a to-do list, add items to their list of to-dos, edit items on the list and delete items from the list.</p><iconify-icon class="stackIcon" icon="skill-icons:mongodb"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="logos:nodejs-icon-alt"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:expressjs-light"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/quickr-to-do-list" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 6 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/media-search.png" target="_blank"><img src="./images/media-search.png" class="card-img-top" alt="Media search app image"></a><div class="card-body"><h5 class="card-title">Media Search App</h5><p class="card-text">An application that allows a user to search for media (movies, tv shows, music, ebooks, podcasts, etc.) from the iTunes API. The user can also add media to their favourites list and view their favourites list.</p><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="logos:nodejs-icon-alt"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:expressjs-light"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/media-search" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div></div><!-- row 3 --><div class="row"><!-- project 7 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/cars-db.png" target="_blank"><img src="./images/cars-db.png" class="card-img-top" alt="Car database app image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Car Database App</h5><p class="card-text">An application that allows a user to view a list of cars in a database, add a new car to the database, edit an existing car in the database and delete a car from the database.</p><iconify-icon class="stackIcon" icon="skill-icons:mongodb"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="logos:nodejs-icon-alt"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:expressjs-light"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/database-handler" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 8 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/minesweeper.png" target="_blank"><img src="./images/minesweeper.png" class="card-img-top" alt="Minesweeper app image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Minesweeper Game</h5><p class="card-text">My own version of the classic Minesweeper game.</p><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/minesweeper-react-app" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 9 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/weather.png" target="_blank"><img src="./images/weather.png" class="card-img-top" alt="Weather app image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Weather App</h5><p class="card-text">An application that allows a user to search for the weather forecast of a city.</p><iconify-icon class="stackIcon" icon="skill-icons:react-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:bootstrap"></iconify-icon><br><a href="https://github.com/ChadProbert/weather-app-react" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div></div><!-- row 4 --><div class="row"><!-- project 10 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/4.png" target="_blank"><img src="./images/4.png" class="card-img-top" alt="Star Wars Encyclopedia app image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Star Wars Encyclopedia App</h5><p class="card-text">An application that allows a user to select a character from the Star Wars universe and view information about that character.</p><iconify-icon class="stackIcon" icon="teenyicons:nextjs-solid"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:materialui-dark"></iconify-icon><br><a href="https://github.com/ChadProbert/star-wars-encyclopedia" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 11 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/19.png" target="_blank"><img src="./images/19.png" class="card-img-top code-img" alt="Bookstore database code image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Bookstore Database Program</h5><p class="card-text">A program that can be used by a bookstore clerk to manage the bookstore's database.</p><iconify-icon class="stackIcon" icon="logos:python"></iconify-icon><iconify-icon class="stackIcon" icon="skill-icons:sqlite"></iconify-icon><br><a href="https://github.com/ChadProbert/bookstore-SQLite" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><!-- project 12 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/17.png" target="_blank"><img src="./images/17.png" class="card-img-top code-img" alt="Task Manager code image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Task Manager Program</h5><p class="card-text">A program that can be used by a manager to manage their team's tasks, or by a team member to manage their own tasks.</p><iconify-icon class="stackIcon" icon="logos:python"></iconify-icon><br><a href="https://github.com/ChadProbert/task-manager-program" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div><div class="row"><!-- project 13 --><div class="col-md-4 fade-in"><div class="card shadow mx-auto" style="width:30rem"><a href="./images/16.png" target="_blank"><img src="./images/16.png" class="card-img-top code-img" alt="Shoe Inventory code image"></a><div class="card-body" style="text-align:left"><h5 class="card-title">Shoe Shop Inventory Program</h5><p class="card-text">A program that can be used by a worker at a shoe shop to manage the shop's inventory.</p><iconify-icon class="stackIcon" icon="logos:python"></iconify-icon><br><a href="https://github.com/ChadProbert/shoe-shop-inventory" class="btn btn-primary repoLink" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-github repoIcon"></i>Repository</a></div></div></div></div></div></main></div></div><script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js" defer></script><script src="./js/dark-mode.js" defer></script><script src="./js/on-scroll-fade.js" defer></script></body></html><!--
references:
https://getbootstrap.com/
https://iconify.design/
https://fontawesome.com/v5/search
-->