Frameworks used: SQL, Flask, Python, Bootstrap 5, Nginx, Javascript, HTML, CSS.

Introduction

This article provides an in-depth analysis of the current website's design choices, covering aspects such as overall design, mobile integration, implemented security measures, implementation decisions, and the website's intended functionality. It thoroughly answers the questions of how and why the website exists in its current form, and how the tools listed have been used in the implementation of its current design.

Functionality

The website's functionality is designed to be simple, user-friendly, and highly accessible, ensuring that recruiters and individuals interested in learning about me can quickly access relevant information and navigate with ease. Recognizing the lengthy nature of the recruitment process, the focus is on delivering a streamlined yet effective user experience.

As a professional portfolio, the website serves as a compressed biography of myself and my work, tailored primarily for recruiters. Its primary functionality revolves around providing key resources such as my CV, showcased projects, my alma mater, and detailed pages of websites I have designed. These elements allow recruiters to evaluate the quality of my work and explore my projects further if they wish.

In addition to serving recruiters, the website also includes resources like notes aimed at current university and high school students. This adds value for learners while remaining accessible to employers who want to assess both my technical capabilities and contributions. Ultimately, the website is designed to act as a central hub that efficiently highlights my experience, skills, and accomplishments while offering detailed insights into my projects for those seeking a deeper understanding.

Tools Used

The tools used for this website include SQL, Flask, Python, Bootstrap 5, Nginx, Javascript, HTML, and CSS.

For SQL integration in Python, we use SQLAlchemy. The underlying SQL database used is SQLite, which is an excellent choice for websites with low traffic. In this project, SQL is primarily used for managing articles, including fetching, displaying, and searching blog articles. SQL is not utilized for any other functionality.

SQLite was chosen because it is a lightweight database framework that runs seamlessly in Python without introducing much overhead. At the same time, it is easy to code and integrate, which aligns with the goal of completing this website quickly rather than focusing on extensive optimizations. Flask also integrates naturally with SQLAlchemy and Jinja templates, allowing us to display article data efficiently on the blog and article pages.

For the backend framework, we utilized Python and Flask as the web framework, along with Nginx for handling the web traffic. The entire setup is run on a Raspberry Pi. Flask was chosen because it was taught in high school during the CS139 course at the University of Warwick, which laid the foundation for my understanding of web development. Flask is a lightweight, flexible web framework for Python, ideal for building small to medium-sized web applications. It offers simplicity and scalability while providing developers with full control over application components, making it a great choice for a portfolio project like this one.

Nginx is used as the web server and reverse proxy for the Flask application. It handles incoming web traffic on ports 80 (HTTP) and 443 (HTTPS), forwarding requests to Flask. This setup enhances the website’s performance and security by handling static file delivery, load balancing, and SSL encryption. Nginx helps ensure that the website can handle incoming requests more efficiently, improving speed and reliability.

We used Bootstrap primarily for some templates to streamline the design process and for convenience, but we did not rely on drag-and-drop website creators or pre-made templates for any page of the website. The choice to use Bootstrap was to ensure a responsive and clean layout while still maintaining full control over the design and functionality. The website is meant to be a showcase of what is possible and what I can do, so while Bootstrap helped with basic structure, the customizations and overall design were done manually to reflect my skills and personal approach to web development.

Design

The design of the website is minimalistic yet modern, with a clear focus on user experience. The color scheme is limited to white and grey (#333333), ensuring a clean and uncluttered interface. This choice not only supports ease of navigation but also aligns with the overall goal of delivering content quickly and efficiently. The centered navbar with concise links follows Nielsen’s heuristics, allowing users to easily find their way around without distractions.

Animations have been integrated subtly to add liveliness to the website without overwhelming the user. The animations are quick and seamless, contributing to a modern and engaging user experience while maintaining the simplicity of the design. This approach ensures the website feels dynamic yet functional, with fast load times and smooth transitions, ideal for showcasing content like portfolios or resumes.

In addition to aesthetic considerations, the website is designed with accessibility in mind, aiming to meet WCAG guidelines where possible. By prioritizing clarity and usability, the website ensures that users of all abilities can navigate it effectively. The design’s simplicity, combined with its responsive animations and accessibility features, creates a balanced experience that’s both visually appealing and user-friendly.

Mobile

The mobile design of the website began after completing most of the core functionality and finishing elements like animations on the desktop version. This approach was intentional, as it allowed me to focus on the desktop experience first without constantly switching between mobile and desktop views when adding new features or code. By completing the desktop version first, I could ensure a more stable and consistent base before adapting it for smaller screens.

Despite this approach, the mobile design was carefully crafted to maintain the same functionality and design principles as the desktop version. The focus remained on providing an easy-to-use interface that was not overwhelming. Key elements, such as navigation and content layout, were adjusted to fit mobile screens without sacrificing usability or simplicity. The goal was to ensure that the user experience remained consistent across devices, offering a seamless transition from desktop to mobile while retaining the clarity and functionality that define the website.

Security

For security, we implemented a captcha check for the "Contact Me" form in the footer to help prevent spam from reaching my email. This simple yet effective measure ensures that only real users can submit the form, reducing the likelihood of automated submissions and spam. Additionally, we have made efforts to block non-official trackers and web crawlers, aiming to protect the website from basic scraping attempts.

Other security solutions were also considered, such as limiting the number of refreshes or requests per IP address, or dynamically randomizing the names of classes and IDs when a page is loaded to make scraping more difficult. However, I decided against implementing these due to concerns about privacy and performance. Specifically, I did not want to store IP addresses, and randomization could place unnecessary strain on the Raspberry Pi's resources. That said, if I upgrade the software in the future, I may revisit the idea of randomization to enhance security further.

Final Touches

For the final touches, we integrated Google AdSense to monetize the website through the blog and articles sections. This allows for relevant ads to be displayed to users, providing a potential revenue stream while maintaining the focus on content. We ensured that the ads are non-intrusive, preserving the user experience.

In addition, we took steps to make the website more discoverable. By registering the site with Google Search Console and utilizing the Google Webmaster Tools, we improved the website’s search engine visibility, making it easier for users to find through search engines. These measures help ensure that the website reaches a wider audience while keeping SEO best practices in mind.

Conclusion

In conclusion, this website serves as a comprehensive portfolio, showcasing my skills, experience, and accomplishments. The design and functionality are intentionally simple yet effective, with a focus on usability and accessibility for recruiters, students, and potential employers. By using tools like Flask, Python, SQLAlchemy, and Nginx, we ensured a reliable, scalable, and easy-to-maintain backend. Additionally, the front-end design remains dynamic yet minimalistic, offering a seamless user experience across devices.

Security has been prioritized through measures like the captcha check for the contact form and attempts to block unwanted crawlers and scrapers. The website’s discoverability has also been enhanced through integration with Google Search Console and Google Webmaster Tools, ensuring it reaches a wider audience. While the use of Bootstrap for some templates helped streamline development, the overall design and structure remain highly customized, reflecting my personal approach to web development.

This project demonstrates not only my technical expertise but also my ability to create user-friendly, secure, and efficient websites that cater to real-world needs. It showcases what is possible when combining simplicity with functionality, highlighting my skills in web development while offering a platform for further growth and learning in the future.