Collaboration Request

Banner

About the Project

This personal portfolio website is a bilingual project (Persian and English) developed using the powerful Django framework. The main goal of this project is to provide a complete, elegant, and reliable platform for professionally showcasing skills, projects, articles, and resume information to potential audiences and employers. All sections of the website are designed and implemented based on modern design principles and software engineering standards to ensure a smooth, visually appealing, and personalized user experience.

All parts of the website are fully manageable and editable through the admin panel. This enables the site owner to update content and customize the website without any need for coding. The project is a great example of combining Django’s capabilities with a scalable and maintainable architecture. It features bilingual support, a modern UI, a dynamic blog and project display, a smart resume generator, and a comprehensive admin dashboard.

Category
Desktop Application
Client
Personal Project
Client Website
arazdevp.com
Start Date
February 28, 2025
Release Date
August 1, 2025

Content and Website Overview

1. Modern and Responsive User Interface:

This project uses a minimal and modern design that, with its professional color scheme, standard typography, and well-matched graphical elements, delivers a visually pleasing experience for users. The responsive design also ensures a smooth and consistent experience across all devices, including mobile, tablet, and desktop.

2. Dynamic Content with Admin Panel:

Through the customized Django admin panel, it's possible to create, edit, and delete all sections of the website. The site administrator can dynamically manage blog posts, projects, contact information, images, resume, and other content without needing to write code or interfere with the technical structure of the site.

Project Middle
Project Middle
Project Middle
Project Middle

Forms

1. Contact Form:

This form is designed with a focus on security, user experience, and structural best practices. It is protected by ReCAPTCHA and includes a five-minute submission limit to prevent abuse. Messages are automatically sent to Telegram, and in case of any errors, a custom script uses a CronJob to resend failed messages at regular intervals.

2. Newsletter Subscription:

A simple form designed to collect user emails for future announcements and promotional offers. It's an easy and effective way to stay connected.

Project Middle
Project Middle
Project Middle
Project Middle

Professional Project Presentation

1. Fully Customizable Project Pages:

Each project has its own dedicated page containing a title, date, full description, category, tags, and more. All content is entered via the admin panel and managed using a custom HTML editor, allowing full control over the layout and styling of each project.

2. Image Gallery and Showcase Video:

Projects can include unlimited uploaded images and embedded YouTube videos. These visual elements help present each project more professionally and ensure responsive display across all devices.

3. Related Projects System:

At the end of each project page, a section displays related projects, selectable in three modes: manual, mixed, or fully random. These options are managed via the admin panel and help increase user engagement, encouraging longer exploration of other work on the site.

4. Interaction and Content Management Tools:

Projects can be filtered by tag or category, shared directly, and published or unpublished via the admin panel. To improve user experience and reduce visual clutter, projects appear with pagination. These tools simplify content management and enhance engagement.

Project Middle
Project Middle
Project Middle
Project Middle

Professional and Structured Blog System

1. Content Organization:

The blog is structured using categories and tags, allowing logical grouping of posts and easier topic access. To prevent content overload and maintain a smooth user experience, a pagination system loads posts across separate pages. This helps users find content more efficiently and enjoy browsing the site.

2. HTML-Based Post Creation:

Each post can be written using HTML elements such as headings, multi-paragraph texts, quotes, code blocks, notes, tables, step-by-step guides, images, links, and highlights. This flexibility allows content to be not only more comprehensive and understandable but also visually professional and appealing to readers.

3. Related Posts Suggestions:

At the end of each post, there’s a section that displays related articles, which can be generated manually, randomly, or in a mixed mode. This feature helps increase user retention and strengthens the internal content connection across the site.

4. Sharing & Responsive Images:

Multiple images can be added to each post, and all images are displayed responsively across devices. Additionally, social media sharing buttons are provided to allow readers to share content with just one click.

5. Content Publication Control:

Each post can either be published or unpublished. This simple control helps streamline content management and makes maintaining or removing posts more efficient. Unpublished posts are only visible to admins, allowing review and editing before public release.

Project Middle
Project Middle
Project Middle
Project Middle

Dynamic Resume Builder

1. Smart and Customizable Resume Generation:

The website features a powerful system for automatically generating PDF resumes dynamically, eliminating the need for manual design in graphic tools. With every data update, a new resume can be generated with a single click, making professional resume management fast and effortless.

2. Stability and Error Detection:

If an unexpected error occurs during the resume generation process, the system automatically sets the resume_generate_status to False. This helps the admin quickly identify the issue, check the logs, and efficiently fix the problem without exposing the error to the end user.

3. Content Configuration Options:

This section allows customization of elements such as resume title, identifier (to differentiate between Persian and English versions), language, number of pages, and a color palette with five customizable fields. These options let you create a resume perfectly aligned with your preferences and needs.

4. Dynamic and Editable Data:

The resume includes editable sections like "About Me" text, profile photo, location, contact number, skills, work history, certifications, and projects. Any changes to this information are immediately and automatically reflected in the resume output, ensuring it is always up-to-date.

Project Middle
Project Middle
Project Middle
Project Middle

Advanced Admin Panel

1. Structured Forms with Fieldsets:

Admin forms use fieldsets to group fields into clear sections. This enhances editing, especially with complex models, making data management more intuitive.

2. Professional Display and Advanced Filters:

Using list_display, key model fields are shown in clear and functional tables. Side filters and the quick search feature make accessing specific data significantly faster and more precise.

3. Smart Management & Image Upload:

The admin panel supports custom actions and bulk operations, enabling tasks like mass deletion or status updates with ease. For projects and blog posts, multiple images can be uploaded via drag-and-drop, making the content management process much faster and smoother.

4. Built-in Admin Panel Guide:

To facilitate easier management and better understanding of the project structure, a help page has been integrated into the admin panel. This guide explains how to work with models, the logic behind each section, and site management workflows—eliminating the need for external documentation.

Project Middle
Project Middle
Project Middle
Project Middle

Technical Details

1. Custom Widgets:

To enable HTML content editing within the admin panel, a custom HTMLEditorWidget was developed. It uses CodeMirror to provide a professional editing experience and help prevent syntax errors in HTML content.

2. Template Tags & Context Processors:

To simplify formatting tasks like date conversion and access to shared context data across templates, custom template tags and context processors have been implemented. These tools enhance readability and flexibility in template design.

3. Signals:

Custom signals are defined to automatically remove associated files—such as images—when related model instances are deleted. This ensures proper memory cleanup and prevents leftover unused files in the system.

4. Custom Commands & Admin Actions:

To manage automated tasks—such as processing contact form messages, generating resumes, and performing admin operations—custom CLI commands and admin panel actions have been created and integrated into the system.

5. Code Structure & Development Principles:

This project follows the DRY principle and uses base templates to simplify development and maintenance. For complex or critical pages, Class-Based Views (CBVs) are implemented to improve readability and ensure scalability of the codebase.

Project Summary

This website, featuring a minimal user interface, responsive design, bilingual support (Persian and English), a dynamic admin panel, an advanced blog section, and a project showcase system, offers a powerful platform for presenting the developer’s full professional and career background. Equipped with smart features such as dynamic PDF resume generation and user contact forms, it stands as a complete and professional example of an online portfolio. This project demonstrates strong capabilities in managing technical complexity while delivering a high-level user experience.

Share Project