Welcome to my blog where I explore web development using HTML, CSS, JavaScript, React, Node.js, GitHub and Netlify.
This blog tracks my progress, showcases projects, and shares insights as I sharpen my skills and tackle coding projects. Join me on this journey through the evolving world of technology. Happy coding!
This sophisticated application leverages React, React Router, and Tailwind CSS to create a multi-page experience for Minecraft enthusiasts. Users can seamlessly navigate between tools like the Portal Coordinate Converter and Useful Links Page, thanks to React Router. The app showcases state management, array methods, and modern JavaScript (ES6+) for dynamic content rendering, emphasizing efficient data handling and a responsive, user-friendly interface.
This project showcases the use of React, Vite, and modern JavaScript (ES6+). Utilizing state management and array methods like filter and map, it dynamically renders content based on user input. The implementation emphasizes reusable components and efficient data handling, demonstrating a strong foundation in front-end development.
My JavaScript powered Automated ID Generation web app automates the manual, error-prone process of creating unique IDs. This tool generates unique IDs in seconds, querying AEM APIs to create Adobe Target lead activity names, thus streamlining workflows and enhancing efficiency.
Our engineering team estimated that developing this internally would have cost between £50 - 75k.
Confronted with the challenge of manually editing thousands of lines of JSON directly in GitHub—a process that was both time-consuming and error-prone—I used my passion for web development to innovate a solution.
I created a custom JSON Editor that enables easy and precise updates through an intuitive interface.
Workflow: By pasting the JSON from GitHub into the editor, making the necessary adjustments, and then pasting it back for deployment, I've reduced what used to be hours of work to just 20 minutes. This efficiency not only minimizes errors but also significantly cuts down on rework.
Technologies Used: JavaScript, HTML5, CSS3.
Impact: This tool has transformed our update process, exemplifying how a hobby can lead to innovative problem-solving in a professional setting. It's now an essential tool that ensures our app's navigation is both quickly and accurately updated.
The AEM ID Assistant automates and streamlines ID verification in Adobe Experience Manager, checking for brand, device, and placement errors, including common mistakes like unintended spaces. It automates folder navigation, provides build and deploy links for content fragments, and uses APIs to check for published assets, preventing duplicates. This boosts process speed by 70% and reduces rework by 99%.
Completing Codecademy's Front-end Engineer Career Path has been transformative. With a focus on HTML, CSS, JavaScript, and React, I've gained practical skills and insights to tackle real-world coding challenges.
I'm thrilled to share that I've completed the ChatGPT course with a focus on Prompt Engineering and Business applications! This achievement has equipped me with the insights to leverage AI in business strategies and the finesse of crafting prompts that yield effective AI responses. Ready to bring the power of ChatGPT to solve business challenges and innovate processes.
Proudly presenting my Spotify playlist creator, a project that not only integrates seamlessly with the Spotify API for custom playlist creation but also exemplifies best practices in security. By securely storing API keys with Netlify's environment variables and leveraging GitHub for continuous deployment, this React-built app represents modern development workflows. Discover how music meets coding in a web application that emphasizes both functionality and security.
Explore my Number Guesser Game! I created its design and wrote the HTML, CSS, and JavaScript. I used media queries, CSS grid, and box shadow for style. Also, I chose the colour palette and the Google font, crafting the layout myself. It was a fun way to sharpen my skills.
This is my Factorial Number Calculator. It's a simple yet effective tool to calculate factorial numbers. I built the HTML, CSS, and JavaScript from scratch. It was a great learning experience!
I attempted my first flexbox project. I wrote the CSS and HTML scratch and only had this brief to work off of.
Actually coding yourself and thinking about how to apply your learning has been really useful.
In my Film Finder, I used code magic with async, await, and fetch to quickly find movies for you. It's a super fun way to explore new films! Message me for the API key.
I didn't just reminisce about the iconic Snake game from the Nokia 3210/3310 era; I recreated it! I engineered the core game mechanics from scratch and infused it with a nostalgic colour palette and CSS styling. Stay tuned for mobile responsiveness enhancements.
One of my earliest triumphs on Codecademy involved leveraging JavaScript's switch statement to generate random responses. I then employed DOM manipulation to transform it into an interactive webpage.
Guided by a comprehensive YouTube tutorial, I delved deep into JavaScript intricacies, particularly focusing on array-based win conditions.
I'm currently honing my JavaScript skills through Codecademy's interactive and intuitive courses. The learning experience has been nothing short of transformative.
My first foray into API utilization was nothing short of exhilarating. Despite outdated tutorials, I navigated through Bootstrap and Font Awesome to create a functional and visually appealing quote generator.
🌟 Big shoutout to the Mimo app for laying down the foundation of my HTML and CSS knowledge! Before diving into JavaScript, I wanted to get the basics right, and Mimo was a game-changer. The app's interactive lessons and bite-sized modules made it super easy to grasp the essentials.
🤖 Today, I shaped ChatGPT into my JavaScript guide, offering hints and fostering genuine understanding without directly giving out answers—like a 24/7 mentor.