Tailwindcss

Professional CV.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional CV</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-800">

    <!-- Container -->
    <div class="container mx-auto p-6 bg-white shadow-md rounded-lg mt-10">

        <!-- Header -->
        <div class="text-center mb-10">
            <h1 class="text-4xl font-bold mb-2">Codezillaye</h1>
            <p class="text-gray-600">Innovative and deadline-driven Graphic Designer with 3+ years of experience.</p>
        </div>

        <!-- Contact Information -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10">
            <div class="bg-blue-100 p-4 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold mb-2">Contact Information</h2>
                <ul>
                    <li>Portland par 127, Orlando, FL</li>
                    <li>(123) 456-7891</li>
                    <li>Codezillaye.com</li>
                </ul>
            </div>
            <div class="bg-green-100 p-4 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold mb-2">Education</h2>
                <p>Master of Fine Arts & Graphic Design, 2015 - 2016</p>
                <p>Bachelor of Fine Arts & Graphic Design, 2010 - 2014</p>
            </div>
            <div class="bg-red-100 p-4 rounded-lg shadow-md">
                <h2 class="text-xl font-semibold mb-2">Location</h2>
                <div id="map" class="h-32"></div>
            </div>
        </div>

        <!-- Professional Experience -->
        <div class="timeline-container relative border-l-2 border-gray-200 pl-4">
            <h2 class="text-2xl font-semibold mb-6">Professional Experience</h2>

            <div class="timeline-item mb-10">
                <div class="absolute -left-2.5 bg-blue-500 h-5 w-5 rounded-full shadow"></div>
                <div class="ml-8">
                    <h3 class="text-lg font-bold">Senior Graphic Design Specialist</h3>
                    <span class="text-gray-600">Experion, Sann'a yemen, SY Present</span>
                    <p class="text-gray-700 mt-2">Lead in the design, development, and implementation of the graphic, layout, and production communication materials. Delegate tasks to the 7 members of the design team and provide counsel on all aspects of the project.</p>
                </div>
            </div>

            <div class="timeline-item mb-10">
                <div class="absolute -left-2.5 bg-blue-500 h-5 w-5 rounded-full shadow"></div>
                <div class="ml-8">
                    <h3 class="text-lg font-bold">Graphic Design Specialist</h3>
                    <span class="text-gray-600">Stepping Stone Advertising, New York, NY | 2017 - 2018</span>
                    <p class="text-gray-700 mt-2">Developed numerous marketing programs (logos, brochures, infographics, presentations, and advertisements). Managed up to 5 projects or tasks at a given time while under pressure.</p>
                </div>
            </div>

            <div class="timeline-item mb-10">
                <div class="absolute -left-2.5 bg-blue-500 h-5 w-5 rounded-full shadow"></div>
                <div class="ml-8">
                    <h3 class="text-lg font-bold">Master of Fine Arts & Graphic Design</h3>
                    <span class="text-gray-600">Rochester Institute of Technology, Rochester, NY | 2015 - 2016</span>
                    <p class="text-gray-700 mt-2">Qui deserunt veniam. Et sed aliquam labore tempore sed quisquam iusto autem sit. Ea vero voluptatum qui ut dignissimos deleniti nerada porti sand markend.</p>
                </div>
            </div>

            <div class="timeline-item mb-10">
                <div class="absolute -left-2.5 bg-blue-500 h-5 w-5 rounded-full shadow"></div>
                <div class="ml-8">
                    <h3 class="text-lg font-bold">Bachelor of Fine Arts & Graphic Design</h3>
                    <span class="text-gray-600">Rochester Institute of Technology, Rochester, NY | 2010 - 2014</span>
                    <p class="text-gray-700 mt-2">Quia nobis sequi est occaecati aut. Repudiandae et iusto quae reiciendis et quis. Eius vel ratione eius unde vitae rerum voluptates asperiores voluptatem. Earum molestiae consequatur neque etlon sader mart dila.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Add your map initialization script here -->
    <script>
        // Example: Initialize a map (using Leaflet in this case)
        document.addEventListener('DOMContentLoaded', function () {
            var map = L.map('map').setView([28.538336, -81.379234], 13); // Example coordinates for Orlando, FL
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(map);
        });
    </script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</body>
</html>