Portfolio
Project Overview
This section highlights the structure and evolution of the website you are currently exploring. Serving as my personal portfolio, this project showcases who I am, my experience, and a diverse selection of creative work that I've developed, both independently and in collaboration with talented individuals.
Website architecture showcasing the integration of a DNS provider, AWS services, and GitHub Actions for automated updates.
Project Details
This website began as a simple WordPress project several years ago when I had little to no experience with HTML, CSS, or JavaScript. While I enjoyed the process of building it with WordPress's user-friendly Block Editor, I quickly realised the limitations of relying solely on a visual editor. Determined to overcome these, I embarked on a self-taught journey that enabled me to acquire the necessary programming skills and expand my capabilities.
The core sections of this portfolio include:
- Home/Index: Features an introductory banner, a relevant quote related to my work, and three featured projects.
- About: Provides details about my background, motivations, and professional experience.
- Creative Work: Showcases a broad selection of my projects, categorised by different fields.
- Experience: Offers a comprehensive overview of my professional history.
- Blog: Shares my thoughts, insights, and experiences.
- Contact: Displays a contact form for general enquiries.
A central concept in the design was to create a distinct digital aesthetic, with careful attention to fonts, colours, and visual effects that reinforce a cohesive style. Given that this website serves as a showcase of my work, I've invested significant effort in effectively presenting my ideas and designs. The "Creative Work" section features detailed descriptions and multimedia elements to highlight the tools and methods I've used.
Development
This website is developed using HTML, CSS, JavaScript, Python (Flask), and Jinja. By using Flask, I benefited from a clear separation of concerns. Technologies like Markdown allowed me to generate HTML content dynamically, combining the speed of static files with the flexibility of a dynamic framework. Flask extensions like Flask-FlatPages (for parsing Markdown) and Frozen-Flask (for generating static HTML files) were key in this process. The website is served from an AWS S3 bucket, while the project's code is hosted on a GitHub repository. GitHub Actions are configured to automate updates by deploying changes to the S3 bucket whenever a new commit is pushed to the repository. Additionally, a cache invalidation rule ensures that the Content Delivery Network (CDN) is promptly updated with the latest changes, providing an optimised user experience. AWS CloudFront serves as the CDN, while Cloudflare manages the Domain Name System (DNS).
Team and Collaboration
This project was developed independently, but it reflects the culmination of knowledge gained through the numerous courses I’ve completed over the years. I am deeply grateful to the instructors and educational platforms that provided me with the skills and guidance needed to develop this portfolio. Their contributions have been invaluable to my journey.
Challenges
Initially, I explored GitHub Pages for hosting, attracted by its simplicity and integration with GitHub Actions for automation. However, after obtaining my first cloud computing certification, I decided to test my newly acquired knowledge by migrating the hosting to AWS to take full advantage of its scalability. This transition involved restructuring the project's architecture, which proved to be challenging and required additional research and testing. Ultimately, I adopted a hybrid approach: GitHub for version control, AWS S3 for hosting, and Cloudflare for DNS management. AWS services like Certificate Manager (for TLS/SSL) and CloudFront have further enhanced security and performance. Although I experimented with AWS CodePipeline and AWS Lambda functions for automating updates, I found that integrating GitHub Actions was a simpler and more effective solution for my website's needs.
Outcomes
I take pride in the continuous evolution of this portfolio and am dedicated to refining its design and content with every new addition. Though it may not have the complexity of a fully dynamic site, I see it as a living digital canvas that reflects my professional growth. Over the years, valuable feedback has shaped its development, and I remain eager to learn from others. Looking ahead, I’m committed to exploring new technologies, expanding my skill set, and ensuring this website reflects my continuous journey as a developer.