index.html

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="output.css" rel="stylesheet">
	<title>My web portfolio</title>
    </head>

    
    <body class="bg-gradient-to-br from-indigo-600 to-indigo-900 ">

        <div class="container mx-auto flex flex-wrap justify-center gap-x-8 gap-y-4 mt-24">
            
            <!--Change your profile photo-->
            <img class="h-60 w-60 rounded-full shadow-2xl" src="assets/john_1.png" alt="">
            
            <!--Change your name, description and CV-->
            <div class="flex flex-col items-center sm:items-start justify-center">
                <h1 class="text-5xl font-bold text-white my-2">John Doe.</h1>
                <p class="text-gray-200">I am a hard-working software developer.</p>

                <a class="flex flex-row text-red-200 font-bold my-4 gap-x-2" 
                    href="assets/cv.pdf"
                    download="cv.pdf"
                    target="_blank">
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        fill="none" 
                        viewBox="0 0 24 24" 
                        stroke-width="1.5" 
                        stroke="currentColor" 
                        class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                    </svg>
                    Download CV
                </a>


            </div>
        </div>

        <div class="flex flex-wrap justify-center gap-x-8 gap-y-4 mt-16 mb-8">

            <!--Change your phone number-->
            <div class="flex flex-row justify-center gap-x-2">
                <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    fill="none" 
                    viewBox="0 0 24 24" 
                    stroke-width="1.5" 
                    stroke="currentColor" 
                    class="w-6 h-6 text-gray-200">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
                  </svg>
                  
                <p class="text-gray-200">+1 (555) 234-5678</p>
            </div>

            <!--Change your email address-->
            <div class="flex flex-row justify-center gap-x-2">
                <svg 
                xmlns="http://www.w3.org/2000/svg" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke-width="1.5" 
                stroke="currentColor" 
                class="w-6 h-6 text-gray-200">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                  </svg>
                  
                </svg>
                <p class="text-gray-200">your@email.com</p>
            </div>

            <!--Change your location-->
            <div class="flex flex-row justify-center gap-x-2">
                <svg 
                xmlns="http://www.w3.org/2000/svg" 
                fill="none" 
                viewBox="0 0 24 24" 
                stroke-width="1.5" 
                stroke="currentColor" 
                class="w-6 h-6 text-gray-200">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                </svg>
                  
                <p class="text-gray-200">Some City, Some Country</p>
            </div>
        </div>

        <!--Change your social media icons-->
        <div class="flex flex-wrap flex-row justify-center gap-x-4">
            <!-- Linkedin -->
            <a href="https://linkedin.com" target="_blank">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5 fill-current text-neutral-50 hover:text-red-200"
                    viewBox="0 0 24 24">
                    <path
                        d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
                </svg>
            </a>
            
            <!--Twitter-->
            <a href="https://twitter.com" target="_blank">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5 fill-current text-neutral-50 hover:text-red-200"
                    viewBox="0 0 24 24">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
                </svg>
            </a>


            <!-- Github -->
            <a href="https://github.com" target="_blank">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5 fill-current text-neutral-50 hover:text-red-200"
                    viewBox="0 0 24 24">
                    <path
                    d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
            </a>
        </div>

        <div id="education" class="container mx-auto text-center mt-24 mb-16">
            <h1 class="text-5xl font-bold text-white">Education</h1>
            <p class="text-gray-200 my-3">How I learned what I know.</p>
        </div>

        <div class="container mx-auto">

            <!--Change bootcamp diploma details-->
            <a href="https://evlabs.io" target="_blank">
                <div class="rounded-lg bg-indigo-900 m-4 pl-6 pr-6 pb-6 pt-4
                md:ml-16 md:mr-16 transition-transform hover:transform hover:scale-105">
                    <h4 class="text-xl font-bold text-white my-2">Professional Python Developer Bootcamp</h3>
                    <p class="text-gray-200">Escape Velocity Labs</p>
                    <p class="text-gray-200">Attainment Date: Month/Year</p>
                </div>               
            </a>

            <!--Change PCEP details-->
            <a href="https://pythoninstitute.org/pcap" target="_blank">
                <div class="rounded-lg bg-indigo-900 m-4 pl-6 pr-6 pb-6 pt-4
                md:ml-16 md:mr-16 transition-transform hover:transform hover:scale-105">
                    <h4 class="text-xl font-bold text-white my-2">PCEP - Certified Entry-Level Python Programmer</h3>
                    <p class="text-gray-200">Python Institute</p>
                    <p class="text-gray-200">Attainment Date: Month/Year</p>
                </div>
            </a>

        </div>

        <div id="projects" class="container mx-auto text-center mt-24">
            <h1 class="text-5xl font-bold text-white">Coding Projects</h1>
            <p class="text-gray-200 my-3">Just a sample of what I can do.</p>
        </div>

        <!--Change your project details-->
        <div class="flex flex-wrap justify-center gap-x-4 gap-y-4 my-12 mb-48">

            <!--Flowchart project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">
                
                    <div class="absolute inset-0 flex items-center justify-center">
                        <div class="relative h-full w-full">
                          <img class="h-full w-full object-cover" src="assets/flowchart.png" alt="Image">
                          <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                        </div>
                    </div>
                    
                    <div class="absolute inset-0 flex flex-col justify-center p-4">
                        <h3 class="text-3xl font-bold text-white my-2 text-center">Flowchart</h3>
                        <p class="text-gray-200 text-center">Implement an algorithm from a flowchart.</p>
                        <p class="text-red-200 text-center mt-4">Available soon</p>
                    </div>           

            </div>

            <!--Caesar cipher project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">
                
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/caesar_cipher.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Caesar cipher</h3>
                    <p class="text-gray-200 text-center">A program that encrypts messages using the Caesar cipher.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Morse code project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/morse_code.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Morse code</h3>
                    <p class="text-gray-200 text-center">Program that translates messages to Morse Code.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>
            </div>

            <!--Tic tac toe project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/tic_tac_toe.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Tic-tac-toe</h3>
                    <p class="text-gray-200 text-center">Two-player, command-line Tic-tac-toe game.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Gradebook project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/grade_book.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Grade book</h3>
                    <p class="text-gray-200 text-center">CLI application to manage student records and track grades.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--RPG project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/rpg.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Role-playing game (RPG)</h3>
                    <p class="text-gray-200 text-center">CLI fantasy game with diffent classes of heroes.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Notes project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/notes.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Note-taking app</h3>
                    <p class="text-gray-200 text-center">A simple CLI note-taking program.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>
  
            <!--CMS project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/cms.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Basic CMS</h3>
                    <p class="text-gray-200 text-center">Simple CLI customer management system.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Lorentz attractor project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/lorentz.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Lorentz attractor</h3>
                    <p class="text-gray-200 text-center">Visualization of the Lorenz Attractor using Turtle graphics.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Calculator project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/calculator.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Calculator</h3>
                    <p class="text-gray-200 text-center">Calculator desktop application with Tkinter.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Instagram filters project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/instagram.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Instagram filters</h3>
                    <p class="text-gray-200 text-center">GUI app to apply instagram-like filters to images.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>
            </div>

            <!--Currency conversion project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/conversion.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Currency conversion</h3>
                    <p class="text-gray-200 text-center">Flask web app to convert currencies.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>
            </div>

            <!--Web scraping project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/web_scraping.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Bookstore scraping</h3>
                    <p class="text-gray-200 text-center">Scrape data from a bookstore website with scrapy.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>
            </div>

            <!--SQL bookstore project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/bookstore_1.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Bookstore database</h3>
                    <p class="text-gray-200 text-center">Store bookstore data in a SQL database.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--REST API bookstore project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/bookstore_2.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Bookstore API</h3>
                    <p class="text-gray-200 text-center">REST API to access and modify our bookstore data.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Snake game project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/snake.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Snake game</h3>
                    <p class="text-gray-200 text-center">Create the classic Snake game using the Pygame library.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Breakout game project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/breakout.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Breakout game</h3>
                    <p class="text-gray-200 text-center">Create the classic Breakout game using the Pygame library.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Tetris game project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/tetris.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Tetris game</h3>
                    <p class="text-gray-200 text-center">Create the classic Tetris game using the Pygame library.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Capstone 1 project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/capstone_1.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Capstone #1</h3>
                    <p class="text-gray-200 text-center">Final bootcamp project.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Capstone 2 project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/capstone_2.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Capstone #2</h3>
                    <p class="text-gray-200 text-center">Final bootcamp project.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

            <!--Capstone 3 project-->
            <div class="relative h-80 rounded-lg overflow-hidden
                    w-full sm:w-1/2 md:w-1/3 lg:w-1/4
                    mr-8 ml-8 sm:mr-0 sm:ml-0
                    transition-transform hover:transform hover:scale-105">

                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative h-full w-full">
                      <img class="h-full w-full object-cover" src="assets/capstone_3.png" alt="Image">
                      <div class="absolute inset-0" style="background-color: rgba(49,46,129,0.7);"></div>
                    </div>
                </div>
                
                <div class="absolute inset-0 flex flex-col justify-center p-4">
                    <h3 class="text-3xl font-bold text-white my-2 text-center">Capstone #3</h3>
                    <p class="text-gray-200 text-center">Final bootcamp project.</p>
                    <p class="text-red-200 text-center mt-4">Available soon</p>
                </div>

            </div>

        </div>

        <footer class="flex justify-center items-center border-t-2 border-slate-600/100 h-40 p-8">
            <a href="https://www.evlabs.io" class="text-gray-200 text-center text-l">
                © <script>document.write(new Date().getFullYear())</script> Escape Velocity Labs
            </a>
        </footer>
        
    </body>

</html>