Ah, the dilemma of modern life: how do we save money while keeping our passions alive? During a lazy afternoon, I was struck by a brilliant idea - at least in theory. What if I migrated my website to static pages on GitHub? Zero servers to manage, reduced costs and GitHub Pages with open arms. It was perfect! Except for one small detail: I wanted my repository to be private, and, well, privacy comes at a cost. I'm already spending on hosting and domain; paying more wasn't part of the plan. I even played around with MkDocs and created the Guirrugo (MkDocs Pages) repository, but I soon realized that I'd have the same problems. That's when I decided to abandon the “easy” solutions and sit down to do something serious. The result? A site that is more secure, structured and in line with the best design and security practices.

The result? A site that is more secure, structured and in line with the best design and security practices. 

Planning the New Architecture

First, a deep reflection: my website was no longer just a portfolio or personal blog. It had grown to include more complex functionalities, such as:

• Interactive forms.
• Database queries to visualize projects.
• Login sections (with a possible authentication flow).

With this in mind, I reorganized everything from scratch:

• I created a new, more secure database.
• I updated all the PHP code to handle secure queries.
• I followed good responsive design and accessibility practices.

Now, let's get down to business: the improvements implemented!

Safety improvements implemented

1. Protection against SQL Injection

If you've ever heard of SQL Injection, you know how dangerous it is. It's one of the most common forms of exploitation in web systems. In the old scenario, my SQL queries didn't use prepared methods, which left my database vulnerable to attacks. Here's what's been done:

Before:

$id = $_GET['id'];
$query = "SELECT * FROM projetos WHERE id = $id";
$result = mysqli_query($conn, $query);

This type of code is dangerous because any “id” parameter coming from the URL would be directly inserted into the query, allowing malicious attacks.

Next:

$id = $_GET['id'];
$query = "SELECT * FROM projetos WHERE id = ?";
$stmt = $conn->prepare($query);
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();

Now, even if someone tries to pass a malicious parameter, it will be treated as text, preventing the attack.

2. Using HTTPS

I no longer accept unsecured HTTP connections. With SSL enabled on the server, all information is encrypted, protecting login data and customer transactions.

3. Inbound Sanitization and Validation

All data coming from users now goes through two stages:

Sanitization: I remove dangerous characters that could be used for attacks.

Validation: I check that the data is in the correct format before using it.

4. Security Headers

I've added HTTP headers to prevent misuse of the site:

Content Security Policy (CSP): Blocks external scripts from loading.

X-Frame-Options: Prevents my page from being loaded in iframes.

X-Content-Type-Options: Prevents misinterpretation of MIME types.

5. Session Control and Cookies

I've enabled secure and HttpOnly cookies to prevent them from being accessed via scripts.

PHP sessions now have a short expiration time and require frequent revalidation.

Design improvements

After implementing the security, I took the opportunity to upgrade the look and responsiveness of the site. I used modern frameworks and best practices for the front-end:

1. Responsive Design

The layout now adapts perfectly to any device, including smartphones such as iPhones. I used Mobile First concepts in the CSS:

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        display: flex;
        flex-direction: column;
    }
}

The result? 
I can only say that a lot was discarded. But I'll keep tinkering to get to the desired point. 

Thanks to everyone who left their suggestions and to Edson Noa.