bs5_portfolio

Bootstrap5 Portfolio

Step 1: HTML5 Boilerplate Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rephel - Web Developer Portfolio</title>

Explanation:

  • <!DOCTYPE html> → Tells browser “this is HTML5” so it uses modern rendering.
    Example: Without it, layouts might break due to quirks mode.
  • <html lang="en"> → Declares English for screen readers, SEO, and translation tools.
    Example: Screen readers will pronounce text in English rules.
  • <meta charset="UTF-8"> → Allows special characters like “₹, é, 😊.”
    Example: Without it, “₹” might display as “₹.”
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    → Makes pages mobile-responsive.
    Example: Without it, text looks tiny on phones because it’s shown as a shrunken desktop view.
  • Why they go first: Browsers read top-to-bottom; these must be known before any content so text displays correctly, scaling is right, and the page is interpreted as modern HTML5 from the start.

Step 2: Adding Bootstrap 5 CDN Links

<!-- Favicon -->
<link rel="icon" href="https://rephel-0101.github.io/SampleCV/crown.ico" type="image/x-icon">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

Explanation:

  • rel="icon" – Adds favicon (small icon in browser tab)
  • Bootstrap CSS CDN – Loads all Bootstrap 5 styling components
  • Bootstrap Icons CDN – Loads icon library for visual elements

Step 3: Creating Navigation Bar

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
    <div class="container">
        <a class="navbar-brand fw-bold fs-3" href="#">
            <i class="bi bi-code-slash me-2"></i>Rephel
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link fs-5" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fs-5" href="#skills">Skills</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fs-5" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link fs-5" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Bootstrap Classes Explained:

  • navbar – Creates a navigation bar component
  • navbar-expand-lg – Makes navbar expand on large screens (≥992px)
  • navbar-dark – Uses dark theme for navbar text
  • bg-primary – Sets primary blue background color
  • sticky-top – Makes navbar stick to top when scrolling
  • container – Centers content with responsive margins
  • navbar-brand – Styles the brand/logo area
  • fw-bold – Makes text font-weight bold
  • fs-3 – Sets font size to level 3 (large)
  • bi bi-code-slash – Bootstrap icon class for code symbol
  • me-2 – Adds margin-end (right) of 0.5rem
  • navbar-toggler – Creates mobile hamburger menu button
  • data-bs-toggle="collapse" – Bootstrap JavaScript for collapsible content
  • data-bs-target="#navbarNav" – Targets element to collapse/expand
  • navbar-toggler-icon – Creates hamburger menu icon
  • collapse navbar-collapse – Makes navigation collapsible on mobile
  • navbar-nav – Container for navigation links
  • ms-auto – Pushes navigation to the right (margin-start auto)
  • nav-item – Individual navigation item container
  • nav-link – Styles navigation links
  • fs-5 – Sets font size to level 5 (medium)

Step 4: Hero Section

<section class="bg-light py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 text-center text-lg-start">
                <h1 class="display-4 fw-bold text-primary mb-3">Hello, I'm Rephel!</h1>
                <p class="lead fs-3 text-secondary mb-4">Full Stack Web Developer</p>
                <p class="fs-5 mb-4">I create beautiful, responsive websites...</p>
                <a href="resume.pdf" download="resume" class="btn btn-primary btn-lg me-3">View My Work</a>
                <a href="#contact" class="btn btn-outline-primary btn-lg">Get In Touch</a>
            </div>
            <div class="col-lg-6 text-center">
                <img src="https://rephel-0101.github.io/SampleCV/loki.jpg" alt="Rephel"
                     class="img-fluid rounded-circle shadow-lg"
                     style="width: 300px; height: 300px; object-fit: cover;">
            </div>
        </div>
    </div>
</section>

Bootstrap Classes Explained:

  • bg-light – Sets light gray background color
  • py-5 – Adds padding top and bottom of 3rem
  • row – Creates horizontal group of columns
  • align-items-center – Vertically centers items in the row
  • col-lg-6 – Takes 6 columns (50% width) on large screens
  • text-center – Centers text alignment
  • text-lg-start – Left-aligns text on large screens only
  • display-4 – Large display heading size
  • text-primary – Sets text color to primary blue
  • mb-3 – Adds margin-bottom of 1rem
  • lead – Makes text stand out as lead paragraph
  • text-secondary – Sets text color to secondary gray
  • mb-4 – Adds margin-bottom of 1.5rem
  • fs-5 – Sets font size to level 5
  • btn – Basic button styling
  • btn-primary – Primary blue button
  • btn-lg – Large button size
  • me-3 – Adds margin-end of 1rem
  • btn-outline-primary – Outlined primary button (transparent background)
  • img-fluid – Makes image responsive (max-width: 100%)
  • rounded-circle – Makes image perfectly round
  • shadow-lg – Adds large shadow effect

Step 5: About Section

<section id="about" class="py-5 bg-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="display-5 fw-bold text-primary mb-4">About Me</h2>
                <p class="fs-5 text-secondary mb-4">I'm a passionate web developer...</p>
                <div class="row text-center mt-5">
                    <div class="col-md-4">
                        <h3 class="text-primary fw-bold">50+</h3>
                        <p class="text-secondary">Projects Completed</p>
                    </div>
                    <!-- More stats... -->
                </div>
            </div>
        </div>
    </div>
</section>

Bootstrap Classes Explained:

  • id="about" – Creates anchor point for navigation
  • bg-white – Sets white background color
  • col-lg-8 – Takes 8 columns (66% width) on large screens
  • mx-auto – Centers the column horizontally (margin left/right auto)
  • display-5 – Medium-large display heading
  • mt-5 – Adds margin-top of 3rem
  • col-md-4 – Takes 4 columns (33% width) on medium screens and up

Step 6: Skills Section with Cards

<section id="skills" class="py-5 bg-light">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-5 fw-bold text-primary mb-3">My Skills</h2>
            <p class="fs-5 text-secondary">Technologies and tools I work with</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 shadow-sm border-0">
                    <div class="card-body text-center p-4">
                        <i class="bi bi-code-slash text-primary mb-3" style="font-size: 3rem;"></i>
                        <h4 class="card-title text-primary fw-bold">Frontend Development</h4>
                        <p class="card-text fs-6">HTML5, CSS3, JavaScript, React.js...</p>
                    </div>
                </div>
            </div>
            <!-- More cards... -->
        </div>
    </div>
</section>

Bootstrap Classes Explained:

  • mb-5 – Adds margin-bottom of 3rem
  • g-4 – Adds gap (gutter) of 1.5rem between columns
  • card – Creates card component container
  • h-100 – Sets height to 100% (makes all cards same height)
  • shadow-sm – Adds small shadow effect
  • border-0 – Removes default border
  • card-body – Main content area of card
  • p-4 – Adds padding of 1.5rem on all sides
  • card-title – Styles the card heading
  • card-text – Styles the card paragraph text
  • fs-6 – Sets font size to level 6 (small)

Step 7: Portfolio Section with Image Cards

<section id="portfolio" class="py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="display-5 fw-bold text-primary mb-3">My Portfolio</h2>
            <p class="fs-5 text-secondary">Recent projects I've worked on</p>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 shadow-sm border-0">
                    <img src="..." class="card-img-top" alt="E-commerce Website">
                    <div class="card-body">
                        <h5 class="card-title fw-bold text-primary">E-commerce Website</h5>
                        <p class="card-text">Modern online shopping platform...</p>
                        <div class="mb-2">
                            <span class="badge bg-primary me-1">React</span>
                            <span class="badge bg-success me-1">Node.js</span>
                            <span class="badge bg-warning">MongoDB</span>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-0">
                        <a href="#" class="btn btn-outline-primary me-2">Live Demo</a>
                        <a href="#" class="btn btn-primary">View Code</a>
                    </div>
                </div>
            </div>
            <!-- More portfolio items... -->
        </div>
    </div>
</section>

Bootstrap Classes Explained:

  • col-lg-4 – Takes 4 columns (33% width) on large screens
  • col-md-6 – Takes 6 columns (50% width) on medium screens
  • card-img-top – Places image at top of card
  • badge – Creates small colored label
  • bg-success – Green background color
  • bg-warning – Yellow background color
  • me-1 – Adds margin-end of 0.25rem
  • card-footer – Bottom section of card
  • bg-transparent – Transparent background
  • me-2 – Adds margin-end of 0.5rem

Step 8: Contact Section with Form

<section id="contact" class="py-5 bg-primary text-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="text-center mb-5">
                    <h2 class="display-5 fw-bold mb-3">Get In Touch</h2>
                    <p class="fs-5">I'd love to hear from you. Send me a message!</p>
                </div>
                <div class="row">
                    <div class="col-md-4 text-center mb-4">
                        <i class="bi bi-envelope-fill fs-1 mb-3"></i>
                        <h5 class="fw-bold">Email</h5>
                        <p>rephel.pallavaram@csc.com</p>
                    </div>
                    <!-- More contact info... -->
                </div>
                <div class="card bg-white text-dark mt-4">
                    <div class="card-body">
                        <form>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control form-control-lg" id="name" placeholder="Your Name">
                                </div>
                                <!-- More form fields... -->
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn btn-primary btn-lg px-5" data-bs-toggle="modal" data-bs-target="#thankYouModal">
                                    <i class="bi bi-send me-2"></i>Send Message
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Bootstrap Classes Explained:

  • text-white – Sets text color to white
  • fs-1 – Sets font size to level 1 (largest)
  • text-dark – Sets text color to dark
  • mt-4 – Adds margin-top of 1.5rem
  • form-label – Styles form labels
  • form-control – Basic form input styling
  • form-control-lg – Large form input size
  • px-5 – Adds padding left and right of 3rem
  • data-bs-toggle="modal" – Bootstrap JavaScript to trigger modal
  • data-bs-target="#thankYouModal" – Targets specific modal to open

Step 9: Modal Component

<div class="modal fade" id="thankYouModal" tabindex="-1" aria-labelledby="thankYouModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title fw-bold" id="thankYouModalLabel">
                    <i class="bi bi-check-circle me-2"></i>Message Sent!
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-4">
                <i class="bi bi-envelope-check text-success mb-3" style="font-size: 3rem;"></i>
                <h4 class="text-success fw-bold mb-3">Thank You!</h4>
                <p class="fs-5 text-secondary">Your message has been sent successfully...</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success btn-lg" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Bootstrap Classes Explained:

  • modal – Creates modal component container
  • fade – Adds fade-in animation effect
  • modal-dialog – Wrapper for modal content
  • modal-dialog-centered – Centers modal vertically on screen
  • modal-content – Main modal content container
  • modal-header – Top section of modal
  • modal-title – Styles modal title
  • btn-close – Creates X close button
  • btn-close-white – White close button for dark backgrounds
  • data-bs-dismiss="modal" – Bootstrap JavaScript to close modal
  • modal-body – Main content area of modal
  • text-success – Green text color
  • modal-footer – Bottom section of modal
  • justify-content-center – Centers content horizontally

Step 10: Footer

<footer class="bg-dark text-white py-4">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6 text-center text-md-start">
                <p class="mb-0">&copy; 2025 Rephel. All rights reserved.</p>
            </div>
            <div class="col-md-6 text-center text-md-end">
                <a href="#" class="text-white me-3 fs-4"><i class="bi bi-linkedin"></i></a>
                <a href="#" class="text-white me-3 fs-4"><i class="bi bi-github"></i></a>
                <a href="#" class="text-white me-3 fs-4"><i class="bi bi-twitter"></i></a>
                <a href="https://www.instagram.com/csc_pallavaram" class="text-white fs-4"><i class="bi bi-instagram"></i></a>
            </div>
        </div>
    </div>
</footer>

Bootstrap Classes Explained:

  • bg-dark – Dark background color
  • py-4 – Adds padding top and bottom of 1.5rem
  • mb-0 – Removes margin-bottom
  • text-md-start – Left-aligns text on medium screens and up
  • text-md-end – Right-aligns text on medium screens and up
  • fs-4 – Sets font size to level 4

Step 11: Adding Bootstrap JavaScript

<!-- Bootstrap 5 JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation:

  • Bootstrap JavaScript CDN – Enables interactive components (navbar toggle, modal)
  • Must be placed before closing </body> tag

Key Bootstrap 5 Concepts Covered:

Layout System:

  • container – Responsive container
  • row – Horizontal column wrapper
  • col-* – Responsive columns

Spacing Utilities:

  • m-* – Margin (mt, mb, ms, me, mx, my)
  • p-* – Padding (pt, pb, ps, pe, px, py)

Typography:

  • display-* – Large headings
  • fs-* – Font sizes (1-6)
  • fw-* – Font weights
  • text-* – Text colors and alignment

Colors:

  • bg-* – Background colors
  • text-* – Text colors
  • btn-* – Button colors

Components:

  • navbar – Navigation bars
  • card – Content cards
  • btn – Buttons
  • modal – Popup dialogs
  • form-* – Form elements
  • badge – Small labels

Responsive Design:

  • Breakpoints: sm, md, lg, xl, xxl
  • Mobile-first approach
  • Responsive utilities

Full Code

Output: https://rephel-0101.github.io/bs5/portfolio.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rephel - Web Developer Portfolio</title>
    <!-- Favicon -->
    <link rel="icon" href="https://rephel-0101.github.io/SampleCV/crown.ico" type="image/x-icon">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>

<body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold fs-3" href="#">
                <i class="bi bi-code-slash me-2"></i>Rephel
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link fs-5" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-5" href="#skills">Skills</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-5" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-5" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 text-center text-lg-start">
                    <h1 class="display-4 fw-bold text-primary mb-3">Hello, I'm Rephel!</h1>
                    <p class="lead fs-3 text-secondary mb-4">Full Stack Web Developer</p>
                    <p class="fs-5 mb-4">I create beautiful, responsive websites and web applications using modern
                        technologies. Passionate about clean code and user experience.</p>
                    <a href="resume.pdf" download="resume" class="btn btn-primary btn-lg me-3">View My Work</a>
                    <a href="#contact" class="btn btn-outline-primary btn-lg">Get In Touch</a>
                </div>
                <div class="col-lg-6 text-center">
                    <!-- <img src="https://placehold.co/200x200" alt="Rephel" class="img-fluid rounded-circle shadow-lg"
                        style="width: 300px; height: 300px; object-fit: cover;"> -->

                    <img src="https://rephel-0101.github.io/SampleCV/loki.jpg" alt="Rephel"
                        class="img-fluid rounded-circle shadow-lg"
                        style="width: 300px; height: 300px; object-fit: cover;">
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-5 bg-white">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h2 class="display-5 fw-bold text-primary mb-4">About Me</h2>
                    <p class="fs-5 text-secondary mb-4">
                        I'm a passionate web developer with 5 years of experience in creating digital solutions.
                        I specialize in front-end development but also work with back-end technologies to build
                        complete web applications.
                    </p>
                    <p class="fs-5 text-secondary mb-4">
                        When I'm not coding, you can find me exploring new technologies, contributing to open-source
                        projects, or teaching others about web development. I believe in writing clean, maintainable
                        code and creating user-friendly experiences.
                    </p>
                    <div class="row text-center mt-5">
                        <div class="col-md-4">
                            <h3 class="text-primary fw-bold">50+</h3>
                            <p class="text-secondary">Projects Completed</p>
                        </div>
                        <div class="col-md-4">
                            <h3 class="text-primary fw-bold">5+</h3>
                            <p class="text-secondary">Years Experience</p>
                        </div>
                        <div class="col-md-4">
                            <h3 class="text-primary fw-bold">30+</h3>
                            <p class="text-secondary">Happy Clients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section id="skills" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-primary mb-3">My Skills</h2>
                <p class="fs-5 text-secondary">Technologies and tools I work with</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body text-center p-4">
                            <i class="bi bi-code-slash text-primary mb-3" style="font-size: 3rem;"></i>
                            <h4 class="card-title text-primary fw-bold">Frontend Development</h4>
                            <p class="card-text fs-6">HTML5, CSS3, JavaScript, React.js, Bootstrap, Responsive Design
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body text-center p-4">
                            <i class="bi bi-server text-success mb-3" style="font-size: 3rem;"></i>
                            <h4 class="card-title text-success fw-bold">Backend Development</h4>
                            <p class="card-text fs-6">Node.js, Express.js, MongoDB, MySQL, REST APIs, Authentication</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body text-center p-4">
                            <i class="bi bi-palette text-warning mb-3" style="font-size: 3rem;"></i>
                            <h4 class="card-title text-warning fw-bold">Data Analytics</h4>
                            <p class="card-text fs-6">Numpy, Pandas, MatPlotLib, SciKit-Learn, tensorFlow, Keras...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-primary mb-3">My Portfolio</h2>
                <p class="fs-5 text-secondary">Recent projects I've worked on</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 shadow-sm border-0">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop"
                            class="card-img-top" alt="E-commerce Website">
                        <div class="card-body">
                            <h5 class="card-title fw-bold text-primary">E-commerce Website</h5>
                            <p class="card-text">Modern online shopping platform with payment integration and admin
                                dashboard.</p>
                            <div class="mb-2">
                                <span class="badge bg-primary me-1">React</span>
                                <span class="badge bg-success me-1">Node.js</span>
                                <span class="badge bg-warning">MongoDB</span>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a href="#" class="btn btn-outline-primary me-2">Live Demo</a>
                            <a href="#" class="btn btn-primary">View Code</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 shadow-sm border-0">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=250&fit=crop"
                            class="card-img-top" alt="Analytics Dashboard">
                        <div class="card-body">
                            <h5 class="card-title fw-bold text-primary">Analytics Dashboard</h5>
                            <p class="card-text">Interactive data visualization dashboard with real-time charts and
                                reports.</p>
                            <div class="mb-2">
                                <span class="badge bg-primary me-1">Numpy</span>
                                <span class="badge bg-info me-1">Pandas</span>
                                <span class="badge bg-secondary">MatPlotLib</span>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a href="#" class="btn btn-outline-primary me-2">Live Demo</a>
                            <a href="#" class="btn btn-primary">View Code</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 shadow-sm border-0">
                        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=400&h=250&fit=crop"
                            class="card-img-top" alt="Mobile App">
                        <div class="card-body">
                            <h5 class="card-title fw-bold text-primary">Task Management App</h5>
                            <p class="card-text">Cross-platform mobile app for team collaboration and project
                                management.</p>
                            <div class="mb-2">
                                <span class="badge bg-danger me-1">Python</span>
                                <span class="badge bg-success me-1">Django</span>
                                <span class="badge bg-primary">MySQL</span>
                            </div>
                        </div>
                        <div class="card-footer bg-transparent border-0">
                            <a href="#" class="btn btn-outline-primary me-2">Live Demo</a>
                            <a href="#" class="btn btn-primary">View Code</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5 bg-primary text-white">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="text-center mb-5">
                        <h2 class="display-5 fw-bold mb-3">Get In Touch</h2>
                        <p class="fs-5">I'd love to hear from you. Send me a message!</p>
                    </div>
                    <div class="row">
                        <div class="col-md-4 text-center mb-4">
                            <i class="bi bi-envelope-fill fs-1 mb-3"></i>
                            <h5 class="fw-bold">Email</h5>
                            <a class="text-white text-decoration-none"" href="
                                mailto:cscpallavaram@gmail.com">rephel.pallavaram@csc.com</a>
                        </div>
                        <div class="col-md-4 text-center mb-4">
                            <i class="bi bi-telephone-fill fs-1 mb-3"></i>
                            <h5 class="fw-bold">Phone</h5>
                            <!-- <p>+91 9710 434343</p> -->
                            <a class="text-white text-decoration-none"" href=" tel:+919710434343">+91 9710 434343</a>
                        </div>
                        <div class="col-md-4 text-center mb-4">
                            <i class="bi bi-geo-alt-fill fs-1 mb-3"></i>
                            <h5 class="fw-bold">Location</h5>
                            <!-- <p>Pallavaram, Chennai</p> -->
                            <a class="text-white text-decoration-none"" href="
                                https://maps.app.goo.gl/8tkqXt6V1yoLUCWe9">Pallavaram,
                                Chennai</a>

                        </div>
                    </div>
                    <div class="card bg-white text-dark mt-4">
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">Full Name</label>
                                        <input type="text" class="form-control form-control-lg" id="name"
                                            placeholder="Your Name">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">Email Address</label>
                                        <input type="email" class="form-control form-control-lg" id="email"
                                            placeholder="your.email@example.com">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">Subject</label>
                                    <input type="text" class="form-control form-control-lg" id="subject"
                                        placeholder="What's this about?">
                                </div>
                                <div class="mb-3">
                                    <label for="message" class="form-label">Message</label>
                                    <textarea class="form-control" id="message" rows="5"
                                        placeholder="Your message here..."></textarea>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary btn-lg px-5" data-bs-toggle="modal"
                                        data-bs-target="#thankYouModal">
                                        <i class="bi bi-send me-2"></i>Send Message
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Thank You Modal -->
    <div class="modal fade" id="thankYouModal" tabindex="-1" aria-labelledby="thankYouModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title fw-bold" id="thankYouModalLabel">
                        <i class="bi bi-check-circle me-2"></i>Message Sent!
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <i class="bi bi-envelope-check text-success mb-3" style="font-size: 3rem;"></i>
                    <h4 class="text-success fw-bold mb-3">Thank You!</h4>
                    <p class="fs-5 text-secondary">Your message has been sent successfully. I'll get back to you within
                        24 hours.</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-success btn-lg" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p class="mb-0">&copy; 2025 Rephel. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <a href="#" class="text-white me-3 fs-4"><i class="bi bi-linkedin"></i></a>
                    <a href="#" class="text-white me-3 fs-4"><i class="bi bi-github"></i></a>
                    <a href="#" class="text-white me-3 fs-4"><i class="bi bi-twitter"></i></a>
                    <a href="https://www.instagram.com/csc_pallavaram" class="text-white fs-4"><i
                            class="bi bi-instagram"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Related Posts

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *