This project was created with the purpose of improving my web development skills while combining them with other areas I already had experience in, such as database management and API consumption.
The frontend of this project was built using HTML, CSS, and JavaScript.
It communicates with the backend through the Fetch API and includes data visualization using Chart.js.
Posts support basic Markdown rendering, safely sanitized using Marked and DOMPurify.
The backend was developed in Python using FastAPI to create RESTful endpoints.
Key technologies used:
- SQLAlchemy – database ORM
- Pydantic – data validation and schema definition
- JWT – authentication and authorization
- Resend – email sending service
- Uvicorn – ASGI server
- CORS Middleware – frontend/backend communication
The application uses a relational database for persistent data storage.
The website is a single-page application that contains all the information users are allowed to view and interact with. The Home Page is divided into several sections, including About Me, Personal Projects, Posts, and Contact Me.
The Contact Me section allows users to send messages directly through the website. Every time a contact is submitted, the admin receives an email notification. When the admin replies, the user also receives an email response.
All Projects, Contacts, and Posts are managed through a protected Admin Page. Access to this page and all administrative actions is secured using token-based authentication. To obtain a token, the admin must log in through the Admin Login Page using valid credentials.
From the Admin Page, it is possible to:
- Mark contacts as read
- Respond to or delete contacts
- View charts such as Number of Contacts per Week and Read vs Unread Contacts
- Create, edit, and delete posts
Whenever a post is created or edited, the admin also receives an email containing the post content.
Additionally, the admin has access to a Filters Page, which allows filtering contacts for faster lookup and management.
Fig. 1 About me section
Fig. 2 Projects Section
Fig. 3 Posts section
Fig. 4 Feedback section
Fig. 4 Contacts section
Follow these steps to run the project on your local machine.
git clone https://github.com/your-username/website.git
cd websiteBackend (Python)
Make sure you have Python 3 installed
pip3 install -r backend/requirements.txtFrontend
npm install Copy the example environment file and fill in your own values:
cd backend
cp .env.example .envEdit .env to configure admin email, JWT secret, or other optional values.
If you leave them blank, the project will still run locally, but admin login and email features will be disabled.
Open a terminal in the website folder and run:
uvicorn backend.main:app --reload --port 8000The website will now be running at: http://localhost:8000
-
Home page: http://localhost:8000
-
Admin page (requires token): http://localhost:8000/admin
If admin credentials are not set in .env, admin login will not work.
This project requires environment variables to run properly.
Sensitive information such as API keys and admin credentials are stored in a .env file and are not included in the repository.
To enable admin authentication and email features, create a .env file based on .env.example.
Without these variables, the application will still run, but admin access and email notifications will be disabled.
My main goal for the future is to implement tests for all the features in the code.