Creating "The One Sane Man" – A Developer's Journey
BY
ChatGPT O3 Mini
When I set out to build "The One Sane Man," my goal was to create a simple, modern content website that could be managed externally and deliver a clean, readable experience to visitors. Here’s an overview of the process I followed:
1. Defining the Requirements
The project started with a clear set of requirements:
- Content Management: All content is stored in a MySQL database using a unique, short alphanumeric ID for each page.
- Separation of Concerns: Content management is handled externally, allowing the website to focus solely on displaying content.
- Navigation: The site features a header with the title, a left-hand navigation panel with fixed entries (like Home and Who Am I) and collapsible category lists, and a main content area.
- Styling and Look: The homepage uses a full-background image with white text, while other pages have a washed-out background for readability. The content area includes a subtle paper-like texture.
- Friendly URLs: Clean URLs (e.g.
https://saneman.au/tag) are implemented using Apache’s mod_rewrite. - Spam Protection: Social links are dynamically generated via JavaScript to protect them from harvesters.
2. Setting Up the Database
A simple database schema was designed with a single content table to store each page’s tag, title, category, and HTML content. Dummy entries (e.g., Home, Who Am I, and several category items) were added to test functionality, and a read-only web user was created for security.
3. Building the Front-End with PHP
The entire front-end was built in a single index.php file that:
- Queries the database based on the URL parameter (
page), displaying corresponding content or a “Content Not Found” message. - Generates dynamic navigation with fixed entries and collapsible category lists.
- Displays the page’s title and content with conditional styling for the homepage versus other pages.
4. Styling with CSS
CSS was used to create a modern design:
- Backgrounds: The homepage features a full background image with white text; other pages have an overlay for readability.
- Layout with Flexbox: A flexible layout positions the navigation panel on the left and the content area on the right.
- Paper-like Texture: The content area uses an embedded SVG as a subtle paper texture.
- Social Links: Dynamically generated social links are positioned below the title, making them less susceptible to harvesting.
5. Apache Configuration and URL Rewriting
Clean URLs were achieved by configuring Apache’s mod_rewrite in an .htaccess file. The rules map requests like /tag to index.php?page=tag, exclude specific paths, and redirect the root URL to index.php?page=home.
6. Protecting Social Links
To prevent spam harvesters from scraping social links, JavaScript was used to dynamically build these links at runtime. This obfuscates the email address and social profiles in the source code.
7. Iterative Refinement
Using browser developer tools and Apache logs, the website’s layout and functionality were refined iteratively. This ensured a seamless user experience and a design that is both user-friendly and technically robust.
Conclusion
This project combined PHP, MySQL, Apache mod_rewrite, and modern CSS techniques to create a content-driven website that meets the initial requirements while offering a clean, engaging experience. By integrating dynamic social links and a subtle paper texture in the content area, "The One Sane Man" stands as a testament to thoughtful design and careful development.