Project Writeup
I developed this website to transition away from traditional paper resumes and CVs, and to create a project that leverages my web development and organizational skills. The website serves as my professional resume and a platform to consolidate my projects and work experience, making it accessible to prospective clients, employers, and collaborators. It will be an ongoing project, updated with relevant information.
Project Planning
To start this project, I reflected on my career, workplaces, and transferable skills. This helped shape the website’s content and allowed me to identify and apply skills learned in the Hospitality Industry and Customer Service to the IT Industry more effectively.
Home Screen
Hardcoding The Website In VS Code
Tools and Technologies
I used VS Code as my Integrated Development Environment (IDE) for its features like Live Server, which allows real-time changes. Previously, I designed and built websites for small businesses using website builders such as GoDaddy, Wix, and WordPress. For this personal project, I chose HTML5 & CSS3 to showcase my skills.
Education and Inspiration
While studying for my Level 3 Diploma at The Manchester College, I gained deeper insights into HTML5 & CSS3, which intrigued me and led me to hardcode this portfolio website instead of using website builders.
Development Challenges
Initially, I aimed to code the website using only vanilla HTML5 & CSS3. However, I encountered issues that required additional functionality. After researching various methods, I decided to incorporate minimal JavaScript to implement a filtering system on the Projects Page, allowing users to filter elements by tags such as Hardware, Software, Networking, Coding, or Other.
Skills Utilized and Developed
In this Portfolio Website project, I utilized my project management, coding, and networking skills to successfully bring the project to life. This experience helped me grow and develop these skills further, from designing and developing the website to pushing it into production.
Ongoing Maintenance
The website will be updated and maintained by myself as I continue my journey into the technology industry.
HTML5
HTML5 was used as the base of this website. It is used to add content and certain formatting onto the page that the web browser can translate and show to the user.
CSS3
CSS3 is used to style the website. I have used various techniques to style various elements including creating variables, calc() elements, modals and responsive design using media queries.
JavaScript
I don’t have much experience in JavaScript and have had to do some additional research on this to help add certain functionality to the website. To accomplish the working filter element on the Projects page, I needed to implement this into my code. By using JavaScript, users can filter element based on a data-attribute linked to each project card. This will then only display the relevant cards and hide the remaining dependant on the selection of the user.
Github
To host the website, I decided to use GitHub, more specifically GitHub Pages. This allows for a free static website to be hosted on a reputable and reliable server with great uptime, provided it is under 1GB in size. For this project at the moment that suits these needs. It may differ in the future dependant on the needs of the website.
VS Code
VS Code was used as my code editor for this project. It is a fully functional IDE with many plugins that are very useful for coding projects. One such extension is Live Server which allow for the deployment of a temporary local server, so that changes can be seen in real time for the developer, streamlining the process.
Kittl
To design both the logo, and favicon for the page, I utilised an online design software called Kittl.