My Goals

When starting any web development project, it's essential to clearly define goals and objectives. Initially, my aim was to create a website that serves as a professional portfolio and showcases interactive code examples. However, a goal without a plan doesn't provide insight into how to achieve it. After careful consideration, I established the following objectives:

1. Demonstrate a diverse skillset in web development
2. Include engaging and interactive code examples
3. Provide insight into my development thought process
4. Maintain clean, readable, and well-structured source code

Target Audience

Understanding the target audience allows for messaging that is clear and effective. For this site, my audience includes potential employers and fellow developers. This audience is already familiar with technical terminology and basic web development concepts. Additionally, I wanted to demonstrate my professional personality while maintaining a polished, professional tone.

Planning Phase

With clear objectives and a defined audience, the next step was creating a development plan outlining key features and future enhancements. The site's content needed to be the primary focus, so the layout was designed to avoid distractions. While large images could enhance aesthetics, they might draw attention away from the text. Therefore, readability and content prioritization were key considerations.

Once a style guide was established, I structured the site for usability and SEO. This included clear URL structures that are easy to read and understand, organized folder structures for code, and divisions for insights, work history, and code examples. The work section highlights my employment history and skills, while the code section showcases the technologies I’m proficient in.

Features

Main Navigation

The main navigation is designed to maximize content focus. Instead of a static header, I implemented a fixed header that hides while scrolling down and reappears when scrolling up or moving the mouse to the top of the page. This ensures the user can navigate easily without distraction, keeping the focus on the content.

Readability

Typography was carefully considered to enhance readability. Using a font that is clear and visually balanced ensures the text is easy to read. Following principles like the Golden Ratio of Typography helped maintain an aesthetically pleasing and user-friendly design.

Backend

Instead of relying on WordPress or building a custom backend, the site uses a combination of hard-coded HTML and PHP. This approach enhances security, as content can only be modified via FTP access. A remote Git repository is used for source control, with standard two-factor authentication for all accounts.

Minimal Use of Images

Most pages on the site do not include images. While I enjoy photography, I intentionally avoided visuals to prevent distractions and maintain fast page load times. This decision also benefits SEO, as smaller page sizes improve performance.

Color Palette

The site uses a neutral gray color palette to create a clean, professional look. Using a consistent color for links and interaction elements ensures clarity and allows additional visual indicators to guide users to interactive parts of the site.