Behind the Scenes: Building My Modular Django Portfolio - PART 1

Introduction

Keeping your portfolio up to date is a must for every developer. After launching my first SaaS project, I realized it was time to refresh my own.

To make the process more enjoyable, I went with a vibe-driven development flow — building intuitively and having fun with it. Here are the tools that shaped the journey:

1. Gemini: for brainstorming and UI design ideas.
2. Cursor Code Editor: to write and refactor code with AI assistance.
3. Django framework: a powerful framework for building full-stack websites.
4. Custom coding: for fixing the bugs made by AI assistants.
5. JavaScript: to bring interactivity to the frontend — from smooth transitions to dynamic components.
6. Bootstrap 5 (https://getbootstrap.com/): to speed up UI layout with prebuilt components and a solid grid system.
7. CSS3: for fine-tuning styles, animations, and giving the site its own personality.
8. Font Awesome(https://fontawesome.com/): because icons speak louder than text sometimes (and it just looks slick).

Getting Started

Once I had my tools and mindset in place, I focused on setting up the project structure. My goal was to keep the code clean, modular, and easy to maintain — especially for future edits.

To achieve that, I broke down the system into small, focused components — what I call "mini apps." Each handled a specific part of the functionality, making the codebase easier to scale and debug.

.
├── core # My Core application that ill hold all the project configs 
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── dashboard # The dashboard application for admin and landing page content
│   ├── admin.py
│   ├── apps.py
│   ├── context_processors
│   ├── __init__.py
│   ├── migrations
│   ├── models
│   ├── __pycache__
│   ├── static
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views
├── frontend # the portfolio's UI: Landing page, projects, blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   ├── models.py
│   ├── __pycache__
│   ├── static
│   ├── templates
│   ├── tests.py
│   ├── urls.py
│   └── views
├── manage.py
├── README.md
├── requirements.txt
├── static
└── user_auth # Basic User auth application (Login system)
    ├── admin.py
    ├── apps.py
    ├── __init__.py
    ├── migrations
    ├── models.py
    ├── __pycache__
    ├── static
    ├── templates
    ├── tests.py
    ├── urls.py
    └── views

The Next Steps:

Setting up the project to ensure clean, readable code is the first step in every successful build.

Coding comes next. In the following part, I’ll walk you through how I:

• Generated a fully responsive landing page
• Built a fully responsive dashboard
• Fixed errors made by AI

Any Questions?: drop it down and lets discuss

Stay tuned for the next part