SAE 401 - Dynamic Portfolio

Dynamization of a static portfolio website using PHP and MySQL.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

This project was developed as part of the SAE 401 academic course. The main objective was to transform a static HTML/CSS portfolio into a dynamic web application using a Back-End language and a Database.

The original static design and frontend integration were based on the Portfolio Responsive Complete repository by Bedimcode.

Key features implemented in this dynamic version:

• Database Integration: Storing every editable content in a MySQL database.
• Back-Office (Admin Panel): A secure administration area to manage content without touching the code.
• Dynamic Rendering: Content on the homepage (Hero, Skills, Portfolio) is fetched via PHP.
• CRUD Operations: Create, Read, Update, and Delete functionalities for portfolio items.

(back to top)

Built With

This project is built using the following technologies:

• 
• 
• 
• 

(back to top)

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

You need a local server environment (AMP stack) that supports PHP and MySQL, such as:

• XAMPP
• WAMP
• Laragon
• MAMP

Installation

1. Clone the repo

   git clone https://github.com/b4ssem/SAE-401.git

2. Move the project folder to your server's root directory (e.g., htdocs or www).
3. Database Setup:
   • Open phpMyAdmin (or your preferred SQL tool).
   • Create a new database (e.g., portfolio_db).
   • Import the .sql file located in the database/ folder (or root) of this project. (not available yet, will be when the whole website will be dynamic)
4. Configuration:
   • Open the database connection file (e.g., includes/core/db.php).
   • Update the credentials to match your local environment:

   $host = "localhost";
   $dbname = "portfolio_db"; // Change if named differently
   $username = "root";
   $password = "";

(back to top)

Usage

Once installed, navigate to the local URL (e.g., http://localhost/SAE-401).

To access the Admin Panel:

1. Go to the login page (e.g., /login.php).
2. Log in using the administrator credentials.
3. Use the dashboard to Add, Edit, or Delete projects and skills.

(back to top)

Roadmap

• Integrate HTML/CSS/JS Template
• Design Database Schema (StarUML)
• Establish Database Connection
• Implement Admin Authentication (login.php)
• Implement Admin Panel (backend.php)
• Build CRUD for Navbar
• Build CRUD for Socials
• Build CRUD for Global settings
• Build CRUD for Projects
• Build CRUD for Contact
• Implement Contact Form logic
• Publish the SQL file and php files concerning the DB

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Bassem - @b4ssem

Project Link: https://github.com/b4ssem/SAE-401

(back to top)

Acknowledgments

• Template by Bedimcode - The original static HTML/CSS template.
• Boxicons

(back to top)