• Workshop Assistant & Stock Controller
• Checking and verifying stock items against customer quotes and orders
• Packing stock items accurately into boxes for order fulfilment
• Checking and confirming quantities to ensure orders are correct
• Maintaining a clean and organised workshop environment
• General workshop management and housekeeping

Timeline:

I first started learning coding around April 2020, teaching myself the basics of HTML and CSS through online resources. Unfortunately my PC broke down in 2021 and I had to stop. In October 2025 I started again with a full commitment to Full Stack Web Development and I have not stopped since. I built my own personal CV portfolio website from scratch and I am currently working on 3 additional projects to grow my skills further.

🌐 HTML – HyperText Markup Language

HTML is the foundation of every webpage. It is the structure and skeleton of the page before any styling or functionality is added. Every tag has an opening tag and a closing tag. Below are the tags I use daily and what each one does:

• <h1> – <h6> </h1> – </h6> – Header tags. Used for headings and subheadings. h1 is the largest and most important heading, h6 is the smallest. I use these throughout my website for section titles and page headings.


• <p></p> – Paragraph tag. Used for blocks of text and descriptive content across all pages of my website.


• <a></a> – Anchor tag. Used for links and clickable buttons. Inside the opening tag I add a href="" which is the URL or destination in quotation marks, and a target="" which controls how the link opens. For example target="_blank" opens the link in a new tab. I use this for all my navigation links, social media buttons and CV download buttons.


• <li></li> – List item tag. Used inside ul or ol tags to list individual items. I used this to list all my website pages inside the navbar so every page is visible and accessible from anywhere on the site.


• <div></div> – Division tag. Used to group and structure sections of a page together. This is one of the most used tags in HTML and I use it constantly to wrap sections, cards and content blocks so I can target them with CSS classes.


• <nav></nav> – Navigation tag. Used specifically for the navbar of the website. This is the top bar that contains all my page links and scrolls horizontally on mobile.


• <ul></ul> – Unordered list tag. Used for bullet point lists that are not numbered. I use this for skill lists, experience bullet points and navigation items.


• <ol></ol> – Ordered list tag. Used for numbered lists where the order matters. Items are numbered automatically starting from 1.


• <img> – Image tag. Used to display images on the page. Inside the tag I add a src="" which is the file path or URL of the image. I use this for my profile picture, gallery images and cover photo.


• <span></span> – Span tag. Used for inline styling of specific pieces of text without breaking the flow of the paragraph. I used this on my home page for my animated headline text.


• <b></b> – Bold tag. Used to make text bold directly in HTML. The same effect can also be achieved through CSS using font-weight: bold in a class.


• <br> – Line break tag. A self-closing tag that creates a single line break. I use this constantly to add spacing between lines of text without creating a full new paragraph.


• <hr> – Horizontal rule tag. Creates a horizontal dividing line across the page. I used this on several pages to visually separate sections of content.


• <thead></thead>, <tr></tr>, <th></th>, <td></td> – Table tags. Used together to build structured data tables. <thead> wraps the header row, <tr> is each row, <th> is a header cell and <td> is a regular data cell. I used these on my Entertainment page to build my gaming tables with multiple columns including game name, version, owned, platinum, trophies and more. Building these tables with a lot of content takes a lot of patience and precision to get every row and column correct.

🎨 CSS – Cascading Style Sheets

CSS is what makes the website look good. Without CSS a website is just plain black text on a white background with no layout or design. CSS controls colors, fonts, sizes, spacing, layouts, backgrounds, borders, hover effects and much more. My CSS file is linked to every HTML page so the styling applies across the whole website.

• Classes – Every HTML element can be given a class="" attribute. In CSS I then target that class using a dot followed by the class name for example p.text { } or .glass-card { }. Inside the curly brackets I write the styling rules. The more classes you create the more organized and specific your styling becomes, but it also requires more focus to manage them all correctly.


• Font size, weight and color – I control all text sizes using font-size, make text bold using font-weight: bold and change text color using color: with a hex code or color name. This gives each section its own look and feel.


• Background styling – I set background colors, background images and background gradients using CSS. My website has a dark background image that covers the full page set using background-image, background-size: cover and background-position: center.


• Navigation bar styling – The navbar is styled using CSS with a fixed position so it stays at the top of the screen while scrolling. I gave it a teal background color matching my website theme and added padding and spacing to make it look clean.


• Glass card effect – I designed my content sections using a glassmorphism style with semi-transparent backgrounds, blur effects using backdrop-filter: blur(), border radius for rounded corners and a subtle cyan border glow. This gives the website a modern and professional look.


• Hover effects – I added hover effects to buttons and cards using CSS transitions so elements lift slightly or change color when the mouse moves over them, making the site feel interactive.


• Overflow and scrolling – I used overflow-x: auto on table wrapper divs to allow horizontal scrolling on mobile for wide tables, and overflow-x: hidden on the body to prevent unwanted horizontal page scroll.


• Mobile responsive design – I used @media queries to adjust layouts and font sizes for different screen sizes so the website looks good on both desktop and mobile devices.

⚙️ JavaScript – AI Assisted

JavaScript adds interactivity and functionality to a website. While I am still learning JavaScript properly, I used AI as a tool to help me implement the following features on my website. I understand what each piece of code does and tested and debugged everything myself:

• Accordion buttons – Clickable buttons that show and hide content when clicked. Used throughout my experience and entertainment pages.


• Lightbox gallery – A full-screen image viewer with left and right navigation arrows and a close button. Used on my gallery page.


• Mobile navbar horizontal scroll – JavaScript and CSS working together to allow the navbar to scroll horizontally on small screens so all page links are accessible.


• Button toggle and show/hide logic – Used for interactive content sections across multiple pages.

I am now actively starting to learn JavaScript properly as part of my Full Stack Web Development course.

🌐 PHP – Hypertext Preprocessor

PHP is a server-side scripting language used to add backend functionality to websites. One of its common uses is handling cookies which are small pieces of data stored in the user's browser to remember information like login sessions, preferences and tracking data. PHP also handles contact forms, user authentication, database connections and dynamic content generation. I plan to learn PHP as part of my backend development journey.

📚 Current & Upcoming Studies

I am currently enrolled in and actively working through the following courses:

• The Complete Full-Stack Web Development Bootcamp – Udemy
  View Course
  
  This course covers the full stack from front-end to back-end including:

1. Front-End Web Development
2. HTML 5
3. CSS 3
4. Flexbox
5. Grid
6. Bootstrap 5
7. JavaScript ES6
8. DOM Manipulation
9. jQuery
10. Bash Command Line
11. Git, GitHub and Version Control
12. Backend Web Development
13. Node.js
14. NPM
15. Express.js
16. EJS
17. REST
18. APIs
19. Databases
20. SQL
21. PostgreSQL
22. Authentication
23. React.js
24. React Hooks
25. Web Design
26. Deployment with GitHub Pages
27. Web3 Development on the Internet Computer
28. Blockchain Technology
29. Token Contract Development
30. NFT Minting, Buying and Selling Logic

• 100 Days of Code: The Complete Python Pro Bootcamp – Udemy
  View Course
  
  Python is widely used in web development, automation, data science and cybersecurity. Learning Python alongside full stack web development gives me a strong foundation for backend development and opens doors into cybersecurity and ethical hacking in the future.

🚀 Current Projects in Development

• Personal CV Portfolio Website – Built from scratch using HTML and CSS with AI-assisted JavaScript. Live and hosted on a custom domain since October 2025. Continuously updated with new content, pages and improvements.


• Restaurant Website – Currently in development. Building this project to practice layout design, menu structures and responsive design techniques.


• IT Services Website – Currently in development. A professional services page designed to showcase IT support offerings and improve my front-end skills.


• E-Commerce Website – Currently in development. This project will help me learn and apply product listings, cart functionality and eventually payment integration as I progress through the course.

All of this is self-driven, self-funded and done in my own time alongside everything else I am working on. No shortcuts. No giving up. 🚀