FahmidasClassroom

Learn by easy steps

You Are Here

Img 20250329 082627
Bootstrap

How to Create a responsive personal portfolio

no Comments

This tutorial will guide you through building a simple personal portfolio website using Bootstrap (for frontend design), PHP (for backend logic), and MySQL (for data storage).

Prerequisites

Before you start, make sure you have the following installed:

  • XAMPP (or any local server)
  • Basic knowledge of HTML, CSS, PHP, and MySQL
  • A code editor (VS Code, Sublime, etc.)

1. Setting Up the Project

Step 1: Create a Project Folder

Create a folder in your htdocs directory (if using XAMPP) or your server’s root directory. Name it portfolio.

Step 2: Start XAMPP

  1. Open XAMPP.
  2. Start Apache (for PHP) and MySQL (for database).

2. Creating the Database

Step 1: Open phpMyAdmin

  1. Go to http://localhost/phpmyadmin/ in your browser.
  2. Click Databases, then create a database called portfolio_db.

Step 2: Create a Table

Run the following SQL query in phpMyAdmin (inside portfolio_db):

CREATE TABLE projects (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    description TEXT NOT NULL,
    image VARCHAR(255) NOT NULL
);

This table will store project details for your portfolio.

3. Designing the Frontend with Bootstrap

Step 1: Create index.php

Inside your portfolio folder, create a file named index.php and add the following Bootstrap template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#">My Portfolio</a>
    </div>
</nav>

<!-- Hero Section -->
<header class="bg-primary text-white text-center py-5">
    <h1>Welcome to My Portfolio</h1>
    <p>Showcasing My Work and Projects</p>
</header>

<!-- Projects Section -->
<div class="container my-5">
    <h2 class="text-center">Projects</h2>
    <div class="row">
        <?php
        include 'config.php';
        $query = "SELECT * FROM projects";
        $result = mysqli_query($conn, $query);

        while ($row = mysqli_fetch_assoc($result)) {
            echo '<div class="col-md-4">';
            echo '<div class="card mb-4">';
            echo '<img src="uploads/' . $row['image'] . '" class="card-img-top" alt="Project Image">';
            echo '<div class="card-body">';
            echo '<h5 class="card-title">' . $row['title'] . '</h5>';
            echo '<p class="card-text">' . $row['description'] . '</p>';
            echo '</div>';
            echo '</div>';
            echo '</div>';
        }
        ?>
    </div>
</div>

<!-- Footer -->
<footer class="bg-dark text-white text-center py-3">
    <p>&copy; <?php echo date("Y"); ?> My Portfolio</p>
</footer>

</body>
</html>

4. Connecting to MySQL Database

Step 1: Create config.php

Inside your portfolio folder, create a file named config.php and add the following code:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "portfolio_db";

$conn = mysqli_connect($servername, $username, $password, $database);

if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
?>

This file connects PHP to your MySQL database.

5. Adding an Admin Panel to Manage Projects

Step 1: Create admin.php

Create admin.php inside your portfolio folder. This page will allow you to add new projects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Admin Panel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <h2>Admin Panel - Add New Project</h2>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <div class="mb-3">
            <label class="form-label">Project Title</label>
            <input type="text" name="title" class="form-control" required>
        </div>
        <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea name="description" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label class="form-label">Upload Image</label>
            <input type="file" name="image" class="form-control" required>
        </div>
        <button type="submit" class="btn btn-primary">Add Project</button>
    </form>
</div>

</body>
</html>

6. Handling File Upload and Storing Data

Step 1: Create upload.php

Inside portfolio folder, create upload.php to handle the form submission and store data in the database.

<?php
include 'config.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $title = $_POST['title'];
    $description = $_POST['description'];
    $image = $_FILES['image']['name'];
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($image);

    // Move uploaded file
    if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
        $query = "INSERT INTO projects (title, description, image) VALUES ('$title', '$description', '$image')";
        if (mysqli_query($conn, $query)) {
            echo "Project added successfully. <a href='admin.php'>Go back</a>";
        } else {
            echo "Error: " . mysqli_error($conn);
        }
    } else {
        echo "Error uploading file.";
    }
}
?>

7. Testing Your Portfolio

  1. Go to http://localhost/portfolio/admin.php
  2. Add a project with an image.
  3. Go to http://localhost/portfolio/index.php to see your projects displayed.

Conclusion

Congratulations! You’ve built a personal portfolio using Bootstrap, PHP, and MySQL. You can improve it by:

  • Adding a login system for admin security
  • Using CSS animations to enhance the UI
  • Making it fully responsive