Building My Personal Website: A Journey from Scratch

Creating my personal website (https://www.yassineissoufou.com) has been an exciting and challenging journey. It gave me the opportunity to explore and apply several technologies while overcoming common hurdles in web development. In this blog post, I will walk through the key components of the project, the tech stack I used, challenges I faced, and what I learned along the way.

Tech Stack

• Backend: Django (Python)
• Frontend: HTML, CSS (with Flexbox and Grid), JavaScript
• Database: PostgreSQL
• Deployment: DigitalOcean with Gunicorn and Nginx
• Version Control: GitHub
• CI/CD: GitHub Actions
• Text Editor: TinyMCE for rich-text editing in the blog section

1. Home Page and Overall Styling

The home page of my website is designed to be clean and minimalist. I aimed for a simple, user-friendly interface that could scale seamlessly across devices. CSS Flexbox and Grid played a huge role in achieving the desired layout and responsiveness. Here's a sample of how I centered my content and handled responsiveness:

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
}

@media (max-width: 768px) {
    .container {
        align-items: center;
    }
}

By adjusting properties in my media queries, I ensured that the site would maintain its structure on both desktop and mobile devices, making the user experience smooth and intuitive.

2. Blog Section and Content Management

For the blog section, I integrated TinyMCE to allow for rich text editing when creating or updating blog posts. This allowed me to easily manage content without worrying about the HTML structure. However, there were some challenges when it came to handling code snippets. Initially, pasting code from my code editor into the TinyMCE editor did not format as expected.

To solve this, I added custom styles for <pre> and <code> tags, ensuring that pasted code would be styled correctly:

pre {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: auto;
}
code {
    font-family: 'Courier New', Courier, monospace;
}

Additionally, I faced challenges with ensuring the blog title and content were fully responsive. Through a combination of media queries and scalable typography using em and rem units, I was able to achieve a fluid and responsive design.

3. CI/CD and Deployment

One of the most valuable lessons I learned in this project was setting up continuous integration and deployment (CI/CD) using GitHub Actions. Every time I push new changes to the GitHub repository, the site is automatically deployed to my DigitalOcean droplet. This has been a game-changer for ensuring quick updates without manually touching the server.

Here’s a snippet of my GitHub Actions workflow that automates deployment:

name: Deploy to Production
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Deploy to Droplet
        run: |
          ssh root@${{ secrets.PRODUCTION_HOST }}
          cd /path/to/project/
          git pull origin main
          sudo systemctl restart gunicorn

This automation not only saves time but also reduces the risk of errors during manual deployments.

4. Database and Storage

For the backend, I opted for PostgreSQL as my database due to its robustness and scalability. Setting up PostgreSQL on the server and configuring Django to work with it was relatively straightforward. However, I had to make sure that the database connection was secure and optimized, especially for production.

One challenge I faced was properly setting up database migrations when deploying new changes. Django's migration system makes this process easier, but I had to be careful with managing changes across the development and production environments.

5. Challenges Faced and Lessons Learned

There were quite a few challenges throughout this project.

• TinyMCE Integration: As mentioned earlier, dealing with code formatting in TinyMCE required custom styling and figuring out how to allow users to paste code snippets seamlessly.
• Responsiveness: Making sure that every element scales perfectly across devices took trial and error with media queries, especially when it came to handling larger headings and images.
• CI/CD: Learning how to automate my deployment pipeline using GitHub Actions was new to me, but after a few iterations, I managed to create a workflow that is efficient and reliable.

I learned that attention to detail is key when building something that will be used on different platforms and devices. Small things like font sizes, padding, and line heights have a big impact on the overall user experience.

Conclusion

Building my personal website has been a great learning experience that allowed me to work with multiple technologies, solve real-world problems, and apply best practices in modern web development. From the backend with Django to handling frontend responsiveness and automating the deployment process with GitHub Actions, every step has taught me something valuable.

If you're a recruiter reading this, I'd love to chat about how these skills can translate into your team's needs. Feel free to check out my live site at yassineissoufou.com, or reach out to me at: yassine@yassineissoufou.com.