Portfolio Website :

Coding Project

The aim :

I designed and hand-coded my website portfolio through HTML and CSS, done to present my work to be easily navigated as well as further enhancing an online presence for people to come and engage with.

Coding course

As I had never done anything like this before I decided to introduce myself to the basics of HTML and CSS by completing the essential lessons using ‘freecodecamp’. From doing this I was surprised at how much I actually enjoyed the process especially the reward when it started coming together as a functional page. It was very helpful for the development of my project as I had prior knowledge using this course, on a variety of the short hand functions e.g p or h1.

Industry Talk

When starting of this project I struggled to know where to start but after I attended an industry talk from ‘Batternhall’ I found it really insightful for how I can structure this project. As they broke down the stages of creating a website I made notes which allowed me to stick to a plan to be able to develop the website.

Stratagy

meaningful description of image here — Pixpa

Acknowledging that the types of users who will be interacting with my websites would be future employers/clients so I decided to do some research looking into what they look for in a portfolio website ensuring it is engaging, creative and showcases my skills and the process of how I work.

Looking into the types of graphics other people have used and laid out for their own website portfolio gave me some inspiration of what I want and can do with my own.

Scope

Plan of what content will be featured within the website.

Structure

After attending the wireframe workshop I was able to have a better understanding of the necessities a website needs. Looking into already existing graphic design agencies and their webpages I was able to take inspiration on their user flow and navigation. Taking notes on how I engaged with these sites and implementing it into my own mapping out the basic pages/buttons needed for the project.

Skeleton / Surface

Fonts

When it came to the design and graphics of the website I started with the font style. I wanted something for my heading that felt handwritten and personal emphasising it is my own individual portfolio presentation. In contrast I knew I needed something that was more easily legible but still carrying a soft tone of voice as the main body copy of text. Using Google font I was able to get this through ‘HomemadeApple’ and ‘Montserrat’, trialling different stroke weights and sizes.

Design Development

When developing my design style, I found it difficult settling on a colour that I feel best suits me. After going through a variety of combinations when I mocked them up I found myself being drawn to the pink/red I really liked the warm and inviting tone of it whilst being very contrasted in shade.

Build

Being the opening page, I tried a few designs. Knowing that it is the landing page and is what will make people stay and look around I wanted it to be fairly simple but eye catching and snappy with the tagline to show a bit of my personality/ dedication to graphic design. I like how it reads using hierarchy of information to keep it engaging and leading on to get the user to further explore the website.

Motion

After learning new skills in Aftereffects through the motion project I knew I wanted to expand and use motion elsewhere. I liked the idea of having the home page feature this as the lines draws your attention down the page urging the user to click onto one of the projects presented. But when it came to the application, I downloaded it as a gif so it can play routinely but in doing so it reduced the quality of the text, so I decided to keep it as a still.

Prototyping layouts for each project, landing page, about and contact.

Implimentning Code

After attending a workshop I was introduced to Code Pen, I found this really helpful in kickstarted the coding process as it allowed me to gain a better understanding of how grids in coding work so I could stick to my structure from prototyping the layout.

When it came to coding as I had never done it before I found that I ran into quite a few issues throughout. Although to help with this I used extension of FireFox to be helpful in finding my issue with the majority of my problems being mistyped code that I was able to unpick using this. Alternatively, if it was an issue I couldn’t fix I was able to consult in my buddies and we were able to sort it out together.

User Testing

During the user testing I gained feedback to align the text under images proportionately, leave bigger spaces between different talking points and having a consistent font size throughout. This feedback was helpful as it picked up on things I hadn’t noticed as well as working with new people allowed me to gain new insights into how to fix these issues effectively. Whilst doing this I had uploaded my page to ‘Netlify’ to check that all buttons and navigation was working and smooth.

Evaluation

At the beginning of this project, I found the process quite challenging. I encountered many challenges and initially worked at a slow pace, struggling to understand certain aspects of HTML and CSS. However, as I become more familiar with the code, I started to gain confidence and found the experience quite rewarding. Researching different techniques and applying them to my own website gave me a deeper appreciation for well designed, functional websites.

A key turning point in this project was the guest speaker talk from Battenhall. Following their talk, I was able to break down the project into manageable steps, which helped me stay organised through the progress within the given timeframe. This structure allowed me to get over my initial struggles and develop a website that reflected my personal style and creativity.

The entire process pushed me out of my comfort zone, encouraging me to think more critically about web design and user experience. I now have a much greater appreciation for the level of detail and effort that goes into creating an engaging and accessible website.

In the future, I would like to continue developing this site, regularly updating it with new projects from university and personal passion projects. By doing so, I can create a portfolio that showcases a range of skills and growth as a designer. This experience has shown me the value of having an online presence, and I am excited to refine and expand my website as my skills continue to evolve.

Bibliography

CodePenAvailable from: https://codepen.io/pen?template=abff54b6d5556421026fdcb6346a8c86 (2025). CodePen - Create a New Pen [online]. [Accessed 12 March 2025].

Gurumoorthy , S. (2025). 6 Crucial Elements to Include in Your Portfolio Website [online]. Available from: https://www.pixpa.com/blog/elements-to-include-in-your-portfolio-website [Accessed 12 March 2025].

MozillaAvailable from: https://www.mozilla.org/en-US/firefox/developer/ (n.d.). Firefox Developer Edition [online]. [Accessed 12 March 2025].

Spin (2020). Video Homepage [online]. Available from: https://spin.co.uk/ [Accessed 12 March 2025].

W3Schools (1999). W3Schools online web tutorials [online]. Available from: https://www.w3schools.com/ [Accessed 12 March 2025].

www.awwwards.comAvailable from: https://www.awwwards.com/websites/nominees/ (n.d.). Nominees [online]. [Accessed 12 March 2025].

www.freecodecamp.orgAvailable from: https://www.freecodecamp.org/learn/responsive-web-design/ (n.d.). freeCodeCamp [online]. [Accessed 12 March 2025].