Overview
This website was designed (using Figma) and developed as a platform to showcase my development projects, highlighting my capabilities in full-stack development and UI/UX design. It also includes a space for sharing my photography, artwork, and travel experiences.
Objectives
- Develop my design skills using Figma to create a clean, modern and responsive layout with a unique, personal style that will help me differentiate my portfolio from others.
- Build a simple custom CMS to both challenge myself and demonstrate the skills I’ve developed throughout my career. The CMS must be responsive and allow me to update content on the go.
- Expand my knowledge of SEO best practices.
- Implement scalable, maintainable code that supports future updates.
- Integrate a dedicated area to showcase my photography and personal hobbies.
Process
- Planning & Wireframing
I started by sketching wireframes on paper to brainstorm layouts and create a rough sitemap. After exploring several ideas, I settled on a direction and moved into digital design using Figma.
- Designing using Figma
My first steps in Figma were designing the homepage, which acted as a template for the rest of the site. I prioritised user experience, making sure my website was easy to navigate. I created both desktop and mobile prototypes, keeping performance and accessibility in mind, optimising the experience for users on lower-spec devices or slower internet connections.
- Back-end & CMS Development
Once I was happy with the design direction, I set up a fresh Laravel project and began developing the CMS from scratch. This allowed me to explore Laravel’s capabilities and to challenge myself with applying further complexity to my CMS, ensuring scalability and maintainability.
While developing my CMS, I took a templated approach, making it easier to add new components and CRUD forms where necessary. The CMS is fully responsive and mobile-friendly, allowing me to update my website anywhere I have internet access.
For more information, at the bottom of this page you will see a gallery with screenshots of my CMS, allowing you a sneak peek behind the scenes of my CMS.
- Front-end development
With the CMS taking shape, I moved onto the frontend, using a component-based approach to bring my Figma designs to life. The CMS powers all dynamic content such as skills, projects, photography, and more. Storing the data in an SQL database and rendering it instantly on the site. I ensured to pay special attention to adhering to industry standards and optimising the experience for multiple devices, ensuring that the final design was as clean and responsive as originally intended.
- Testing & Optimisation
Once development was complete, I tested the site across a range of devices and browsers. I received performance optimisation, improved loading times by refactoring inefficient code, and focused on accessibility using tools like Playwright to test for issues. SEO metadata was added across the site to improve visibility in search engines.
Key Features
- Fully responsive, mobile-optimised design
- Modular, custom-built CMS for content management
- Scroll-triggered animations for interactivity
- Clean, intuitive UI with easy navigation
- Support for showcasing photography and travel content
Reflection
Building my portfolio website from the ground up gave me the opportunity to apply everything I have learnt through my years of experience. From UI/UX design to full-stack development.
Throughout the process, I picked up new skills, including adding reCAPTCHA protection, and deploying directly from GitHub.
I am very proud of the results of my website and have provided myself with a platform to express my passion for travelling, documenting where I have been in the world and allowing me to share my photography with you all.
Feel free to drop me a message using my contact form if you have any feedback for my website or if there is anything you particularly like about it! I would love to hear from you!
