Disclaimer:

• This is an implementation of the Creative Theme template by Start Bootstrap.

Introduction:

• This document provides a technical overview of the design and implementation of my personal website, created as the final project for CS50. The goal was to create a portfolio site that is functional, aesthetically pleasing, and easy to maintain. This is a Design README that documents the structural, stylistic, and functional aspects of the project and explains the design decisions made throughout the development process. A separate README file explains the project and access methods.

Project Structure:

• The project is organized into the following files and directories:

• style.css: The stylesheet that defines the website's design and layout.
• script.js: The JavaScript file that handles interactivity and dynamic elements.
• README.md: The design documentation file.

Guiding Principles:

• Simplicity: nothing fancy is needed for a personal website (for a boring academic). The point is that people get to find information about me, what I do, and easy access to my research.
• Accessibility: inclusive design principle, such as alt text for images to support screen readers.
• Flexibility: the web is designed to be extensible, allowing for easy changes in the future.

Implementation:

• HTML: The HTML file uses semantic elements for clarity. Each section of the website (About, Projects, Contact) is wrapped in a tag, making it easy to navigate and style.

• CSS: A custom CSS file (style.css) was created instead of relying on a framework to retain full control over the design. CSS layout techniques were used for alignment and such.
• JavaScript: For interactive components (e.g. Event Listener)

Design

• Color Palette: A harmonious color palette was chosen to ensure a professional appearance.
• Inclusive design principle: still needs improvements.