Published on

6 Steps To Create A Developer Portfolio With Tailwind CSS Like A Pro In Under An Hour

Tags
Developer portfolio

Are you a developer looking to showcase your skills and projects to potential employers or clients? A developer portfolio is a great way to do just that. In this article, we'll show you how to create a developer portfolio using Tailwind CSS, a popular utility-first CSS framework. With our step-by-step guide, you'll be able to create a professional-looking portfolio in under an hour.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes to help you quickly build custom user interfaces. It's designed to be highly customizable and easy to use, making it a popular choice among developers.

The description of Developer portfolio ui component

A developer portfolio is a collection of your best work, projects, and skills. It's an essential tool for any developer looking to showcase their abilities to potential employers or clients. A developer portfolio typically includes a brief bio, a list of skills, and a showcase of projects.

Why use Tailwind CSS to create a Developer portfolio ui component?

Tailwind CSS provides a set of pre-defined CSS classes that make it easy to create custom user interfaces quickly. It's highly customizable, which means you can create a unique portfolio that showcases your skills and projects in a way that suits you. Additionally, Tailwind CSS is easy to learn, even for beginners, which makes it a great choice for developers of all skill levels.

The preview of Developer portfolio ui component.

To give you an idea of what your developer portfolio could look like, here's a preview:

Free download of the Developer portfolio's source code

The source code of Developer portfolio ui component.

If you're interested in seeing the source code for the developer portfolio we'll be creating, here's a preview:

<style>
    .pattern {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23a0aec0' fill-opacity='0.1' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
    }

    ::-webkit-scrollbar {
        width: 5px;
    }
    ::-webkit-scrollbar-track{
        background: #CBD5E0;
    }
    ::-webkit-scrollbar-thumb{
        background: #2D3748;
    }
    ::-webkit-scrollbar-thumb:hover{
        background: #718096;
    }
</style>

<main class="font-sans bg-white">
    <div>
        <header class="bg-white shadow border-t-4 border-indigo-600">
            <div class="container mx-auto px-6 py-4">
                <div class="flex items-center justify-between">
                    <div>
                        <a class="flex items-center text-gray-800 hover:text-indigo-600" href="#">
                            <svg class="h-6 w-6 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>

                            <span class="mx-3 font-medium text-sm md:text-base">Agustin Rodríguez</span>
                        </a>
                    </div>
                    <div class="flex items-center -mx-2">
                        <a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5 sm:h-6 sm:w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>

                        <a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5 sm:h-6 sm:w-6 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                            </svg>
                        </a>

                        <a class="flex items-center mx-2 text-gray-800 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5 sm:h-6 sm:w-6 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                <path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <section class="bg-white mt-20">
            <div class="max-w-2xl px-6 text-center mx-auto">
                <h2 class="text-3xl font-semibold text-gray-800">Hi, <span class="bg-indigo-600 text-white rounded px-1">I’m Agustin</span> . Nice to meet you.</h2>
                <p class="text-gray-600 mt-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A aliquam veniam suscipit eaque iure, eligendi harum expedita cupiditate sequi, culpa autem! Quaerat ex fugit iste suscipit reiciendis, accusamus ipsum quae.</p>

                <div class="flex items-end justify-center mt-16">
                    <svg width="189" height="188" viewBox="0 0 189 188" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                            <path d="M94.074 188.148C146.03 188.148 188.148 146.03 188.148 94.074C188.148 42.1184 146.03 0 94.074 0C42.1184 0 0 42.1184 0 94.074C0 146.03 42.1184 188.148 94.074 188.148Z" fill="#2D3748"/>
                            <path d="M135.938 52.784V84.05C135.938 84.503 135.927 84.955 135.917 85.407C135.897 86.343 135.845 87.278 135.763 88.203C135.743 88.522 135.711 88.84 135.67 89.159C135.536 90.485 135.352 91.791 135.115 93.087C135.032 93.519 134.95 93.94 134.857 94.362C134.847 94.454 134.827 94.537 134.806 94.619C134.723 95.051 134.62 95.473 134.518 95.894C134.477 96.12 134.415 96.346 134.364 96.573C134.312 96.768 134.261 96.964 134.2 97.159C133.983 98.002 133.737 98.825 133.479 99.647C133.356 100.038 133.233 100.418 133.099 100.809C133.088 100.85 133.068 100.891 133.058 100.932C132.934 101.281 132.811 101.631 132.688 101.98C132.647 102.083 132.606 102.185 132.564 102.299C132.441 102.628 132.318 102.957 132.184 103.286C132.03 103.687 131.866 104.078 131.701 104.469C131.557 104.819 131.403 105.168 131.249 105.518C131.229 105.58 131.197 105.631 131.177 105.692C131.002 106.062 130.838 106.433 130.663 106.792C130.488 107.172 130.303 107.553 130.107 107.934C129.737 108.684 129.336 109.435 128.935 110.165C128.75 110.494 128.565 110.823 128.379 111.152C126.796 113.877 125.038 116.437 123.126 118.801C122.868 119.14 122.602 119.469 122.324 119.788C121.943 120.25 121.552 120.703 121.162 121.145C120.812 121.536 120.463 121.926 120.103 122.307C119.116 123.366 118.108 124.374 117.08 125.32C116.875 125.526 116.658 125.711 116.442 125.906C116.093 126.225 115.744 126.533 115.383 126.831C115.106 127.078 114.818 127.314 114.529 127.551C113.789 128.157 113.049 128.743 112.299 129.288C111.99 129.525 111.671 129.751 111.353 129.967C110.839 130.337 110.315 130.687 109.79 131.026C109.502 131.221 109.204 131.406 108.905 131.581C107.856 132.229 106.798 132.825 105.749 133.339C105.492 133.472 105.235 133.596 104.978 133.719C104.72 133.842 104.454 133.966 104.176 134.089C103.836 134.243 103.497 134.387 103.158 134.521C103.024 134.583 102.89 134.634 102.757 134.675C102.357 134.84 101.945 134.994 101.544 135.127C101.04 135.312 100.526 135.466 100.023 135.61C99.673 135.713 99.314 135.805 98.964 135.887C98.943 135.898 98.923 135.908 98.892 135.908C98.542 135.99 98.193 136.073 97.843 136.134C97.75 136.155 97.659 136.175 97.566 136.185C97.278 136.236 96.99 136.288 96.702 136.319C96.291 136.381 95.88 136.432 95.469 136.453C95.326 136.473 95.192 136.484 95.047 136.484C94.719 136.505 94.39 136.515 94.07 136.515H94.04C93.721 136.515 93.402 136.505 93.084 136.484C92.96 136.484 92.837 136.474 92.713 136.453C92.426 136.443 92.127 136.411 91.819 136.37C91.757 136.37 91.685 136.36 91.624 136.35C91.243 136.299 90.863 136.237 90.472 136.165C90.144 136.114 89.815 136.041 89.475 135.959C87.717 135.558 85.908 134.952 84.078 134.139C82.515 133.45 80.932 132.618 79.359 131.651C78.567 131.168 77.775 130.654 76.994 130.109C76.603 129.831 76.213 129.554 75.822 129.266C74.598 128.371 73.385 127.395 72.192 126.346C71.864 126.048 71.535 125.75 71.206 125.441C70.877 125.143 70.548 124.835 70.229 124.537C69.426 123.766 68.645 122.964 67.884 122.131C67.586 121.813 67.288 121.484 66.989 121.144C66.167 120.219 65.365 119.263 64.604 118.265C64.305 117.905 64.028 117.535 63.75 117.165C62.712 115.788 61.725 114.348 60.799 112.857C60.553 112.456 60.306 112.044 60.07 111.644C59.782 111.161 59.505 110.668 59.227 110.174C58.199 108.323 57.252 106.401 56.43 104.416C56.307 104.128 56.183 103.84 56.08 103.553C55.915 103.183 55.771 102.802 55.638 102.432C55.433 101.887 55.238 101.342 55.052 100.797C54.867 100.252 54.693 99.697 54.518 99.142C54.353 98.607 54.199 98.073 54.055 97.528C53.89 96.952 53.737 96.366 53.603 95.77C53.592 95.708 53.572 95.647 53.562 95.585C53.367 94.763 53.192 93.93 53.038 93.087C52.832 91.976 52.668 90.845 52.544 89.704C52.493 89.344 52.462 88.984 52.431 88.624C52.39 88.244 52.36 87.873 52.339 87.493C52.287 86.804 52.256 86.105 52.235 85.406C52.225 84.953 52.214 84.501 52.214 84.049V52.784C52.214 29.682 70.937 10.95 94.039 10.929H94.08C97.268 10.929 100.372 11.288 103.353 11.957C106.078 12.574 108.7 13.458 111.188 14.579C114.581 16.101 117.737 18.054 120.575 20.388C122.96 22.342 125.13 24.542 127.021 26.968C132.607 34.083 135.938 43.038 135.938 52.784Z" fill="#ECC19C"/>
                            <path d="M148.613 200.741V200.751H39.538V200.741C39.538 194.583 40.556 188.65 42.448 183.129C42.787 182.132 43.157 181.145 43.558 180.168V180.158C43.958 179.181 44.38 178.225 44.832 177.279C46.632 173.485 48.873 169.938 51.474 166.689C52.132 165.877 52.8 165.085 53.49 164.324C53.829 163.933 54.189 163.553 54.549 163.173C54.909 162.803 55.269 162.433 55.639 162.063C57.48 160.223 59.453 158.537 61.531 156.984C62.569 156.213 63.618 155.493 64.708 154.794C65.798 154.105 66.908 153.447 68.039 152.83C68.06 152.81 68.08 152.81 68.08 152.81C68.522 152.574 68.954 152.317 69.386 152.049C70.24 151.535 71.082 150.98 71.885 150.384C72.296 150.096 72.687 149.798 73.077 149.479C74.002 148.739 74.896 147.947 75.75 147.114C76.027 146.837 76.306 146.559 76.583 146.271C77.158 145.674 77.703 145.047 78.228 144.41C78.486 144.102 78.743 143.783 78.979 143.464C79.226 143.146 79.462 142.817 79.699 142.487C81.529 139.937 82.999 137.131 84.079 134.138C85.385 130.498 86.094 126.581 86.094 122.489L94.042 122.53L102.215 122.571C102.215 126.611 102.904 130.487 104.179 134.086C105.239 137.088 106.708 139.895 108.508 142.445C110.379 145.097 112.61 147.462 115.139 149.487C115.52 149.796 115.9 150.094 116.281 150.371C116.651 150.649 117.031 150.916 117.422 151.173C117.505 151.235 117.576 151.286 117.659 151.338C118.029 151.585 118.399 151.832 118.79 152.058C119.211 152.315 119.644 152.572 120.075 152.809C120.146 152.829 120.209 152.86 120.26 152.902C121.165 153.406 122.06 153.93 122.934 154.475C123.355 154.732 123.777 154.999 124.188 155.298C125.042 155.853 125.875 156.439 126.686 157.056C126.686 157.067 126.697 157.067 126.697 157.067H126.707C128.784 158.619 130.748 160.315 132.588 162.146C142.496 172.015 148.613 185.648 148.613 200.741Z" fill="#ECC19C"/>
                            <path d="M148.614 200.743H39.539C39.539 194.584 40.558 188.652 42.449 183.131C42.788 182.133 43.158 181.147 43.559 180.17C43.548 180.159 43.559 180.159 43.559 180.159C43.95 179.182 44.381 178.226 44.833 177.281C46.633 173.487 48.874 169.94 51.475 166.691C52.133 165.878 52.802 165.087 53.491 164.326C53.83 163.935 54.19 163.555 54.55 163.175C54.91 162.805 55.27 162.435 55.64 162.065C57.481 160.225 59.454 158.538 61.532 156.986C62.57 156.215 63.619 155.495 64.709 154.796C65.799 154.097 66.909 153.439 68.04 152.822C68.061 152.802 68.081 152.812 68.081 152.812V152.802C68.523 152.555 68.955 152.308 69.387 152.051C70.672 151.27 71.907 150.406 73.058 149.46C73.068 149.47 73.068 149.47 73.079 149.48C78.404 154.929 85.817 158.311 94.043 158.332H94.125C102.35 158.332 109.794 154.939 115.14 149.49L115.151 149.48C115.88 150.086 116.641 150.652 117.423 151.176C117.505 151.237 117.577 151.289 117.659 151.34C118.029 151.587 118.409 151.823 118.79 152.06C119.212 152.317 119.644 152.564 120.075 152.8C120.147 152.82 120.198 152.861 120.26 152.892C121.165 153.396 122.06 153.92 122.934 154.475C123.355 154.732 123.777 154.999 124.188 155.298C125.042 155.843 125.875 156.439 126.686 157.056H126.707C128.795 158.619 130.758 160.315 132.588 162.145C142.497 172.017 148.614 185.65 148.614 200.743Z" fill="#C7D4E2"/>
                            <path d="M135.938 84.05C135.938 84.503 135.927 84.955 135.917 85.407C135.897 86.343 135.845 87.278 135.763 88.203C135.743 88.522 135.711 88.84 135.67 89.159C135.536 90.485 135.352 91.791 135.115 93.087C135.032 93.519 134.95 93.94 134.857 94.362C134.847 94.454 134.827 94.537 134.806 94.619C134.723 95.051 134.62 95.473 134.518 95.894C134.466 96.141 134.405 96.377 134.332 96.614C134.302 96.799 134.25 96.984 134.199 97.159C133.982 98.002 133.736 98.825 133.478 99.647C133.355 100.038 133.232 100.418 133.098 100.809C133.087 100.85 133.067 100.891 133.057 100.932C132.933 101.281 132.81 101.631 132.687 101.98C132.646 102.083 132.605 102.185 132.563 102.299C132.44 102.628 132.317 102.957 132.183 103.286C132.029 103.687 131.865 104.078 131.7 104.469C131.556 104.819 131.402 105.168 131.248 105.518C131.228 105.58 131.196 105.631 131.176 105.692C131.001 106.062 130.837 106.433 130.662 106.792C130.487 107.172 130.302 107.553 130.106 107.934C129.736 108.684 129.335 109.435 128.934 110.165C128.749 110.494 128.564 110.823 128.378 111.152C126.795 113.877 125.037 116.437 123.125 118.801C122.867 119.14 122.601 119.469 122.323 119.788C121.942 120.25 121.551 120.703 121.161 121.145C120.811 121.536 120.462 121.926 120.102 122.307C119.115 123.366 118.107 124.374 117.079 125.32C116.874 125.526 116.657 125.711 116.441 125.906C116.092 126.225 115.743 126.533 115.382 126.831C115.105 127.078 114.817 127.314 114.528 127.551C113.788 128.157 113.048 128.743 112.298 129.288C111.989 129.525 111.67 129.751 111.352 129.967C110.838 130.337 110.314 130.687 109.789 131.026C109.501 131.221 109.203 131.406 108.904 131.581C107.855 132.229 106.797 132.825 105.748 133.339C105.491 133.472 105.234 133.596 104.977 133.719C104.719 133.842 104.453 133.966 104.175 134.089C103.835 134.243 103.496 134.387 103.157 134.521C103.023 134.583 102.889 134.634 102.756 134.675C102.356 134.84 101.944 134.994 101.543 135.127C101.039 135.312 100.525 135.466 100.022 135.61C99.672 135.713 99.313 135.805 98.963 135.887C98.942 135.898 98.922 135.908 98.891 135.908C98.541 135.99 98.192 136.073 97.842 136.134C97.749 136.155 97.658 136.175 97.565 136.185C97.277 136.236 96.989 136.288 96.701 136.319C96.29 136.381 95.879 136.432 95.468 136.453C95.325 136.473 95.191 136.484 95.046 136.484C94.718 136.505 94.389 136.515 94.069 136.515H94.039C93.72 136.515 93.401 136.505 93.083 136.484C92.959 136.484 92.836 136.474 92.712 136.453C92.425 136.443 92.126 136.411 91.818 136.37C91.756 136.37 91.684 136.36 91.623 136.35C91.242 136.299 90.862 136.237 90.471 136.165C90.143 136.114 89.814 136.041 89.474 135.959C87.716 135.558 85.907 134.952 84.077 134.139C82.514 133.45 80.931 132.618 79.358 131.651C78.566 131.178 77.785 130.664 76.993 130.109C76.602 129.831 76.212 129.554 75.821 129.266C74.597 128.371 73.384 127.395 72.191 126.346C71.863 126.048 71.534 125.75 71.205 125.441C70.876 125.143 70.547 124.835 70.228 124.537C69.425 123.766 68.644 122.964 67.883 122.131C67.585 121.813 67.287 121.484 66.988 121.144C66.166 120.219 65.364 119.263 64.603 118.265C64.304 117.905 64.027 117.535 63.749 117.165C62.711 115.788 61.724 114.348 60.798 112.857C60.552 112.456 60.305 112.044 60.069 111.644C59.781 111.161 59.504 110.668 59.226 110.174C58.198 108.323 57.251 106.401 56.429 104.416C56.306 104.128 56.182 103.84 56.079 103.553C55.914 103.183 55.77 102.802 55.637 102.432C55.432 101.887 55.237 101.342 55.051 100.797C54.866 100.252 54.692 99.697 54.517 99.142C54.352 98.607 54.198 98.073 54.054 97.528C53.889 96.952 53.736 96.366 53.602 95.77C53.591 95.708 53.571 95.647 53.561 95.585C53.366 94.763 53.191 93.93 53.037 93.087C52.831 91.976 52.667 90.845 52.543 89.704C52.492 89.344 52.461 88.984 52.43 88.624C52.389 88.244 52.359 87.873 52.338 87.493C52.286 86.804 52.255 86.105 52.234 85.406C52.224 84.953 52.213 84.501 52.213 84.049L58.897 97.189L70.381 102.196L83.962 103.42L94.038 104.335H94.1L103.528 105.189L124.533 107.081L135.938 84.05Z" fill="#543E36"/>
                            <path d="M127.023 26.968C124.977 31.605 122.314 35.913 119.168 39.82C118.983 40.047 118.798 40.273 118.603 40.499C112.157 48.261 103.706 54.297 94.041 57.823C91.501 58.759 88.88 59.519 86.186 60.085C84.387 60.465 82.557 60.764 80.696 60.98C78.557 61.216 76.378 61.34 74.168 61.34C71.639 61.34 69.161 61.175 66.725 60.857C64.339 60.559 62.005 60.117 59.723 59.521C58.417 59.192 57.142 58.812 55.877 58.39C54.633 57.979 53.42 57.526 52.217 57.033V52.787C52.217 29.685 70.94 10.953 94.042 10.932H94.083C97.271 10.932 100.375 11.291 103.356 11.96C106.081 12.577 108.703 13.461 111.191 14.582C114.584 16.104 117.74 18.057 120.578 20.391C122.962 22.341 125.132 24.542 127.023 26.968Z" fill="#543E36"/>
                            <path d="M135.938 52.784V61.019C128.802 55.498 122.891 48.517 118.624 40.539C118.614 40.529 118.614 40.508 118.603 40.498C114.409 32.664 111.807 23.873 111.191 14.578C114.584 16.1 117.74 18.053 120.578 20.387C122.963 22.341 125.133 24.541 127.024 26.967C132.607 34.083 135.938 43.038 135.938 52.784Z" fill="#543E36"/>
                            <path d="M57.12 56.013C56.679 56.784 56.277 57.576 55.876 58.388C55.723 58.706 55.568 59.046 55.414 59.375C53.389 63.878 52.37 68.299 52.226 72.289C52.226 72.402 52.215 72.525 52.215 72.639V56.517C52.215 55.941 52.236 55.375 52.236 54.82C53.861 55.242 55.485 55.653 57.12 56.013Z" fill="#543E36"/>
                            <path d="M131.054 56.013C131.676 57.106 132.231 58.226 132.764 59.374C134.852 64.017 135.874 68.552 135.962 72.642V56.512C135.962 55.945 135.941 55.378 135.941 54.824C134.318 55.243 132.697 55.648 131.054 56.013Z" fill="#543E36"/>
                            <path d="M135.909 63.71C135.909 63.5094 135.757 63.3329 135.558 63.3088C133.877 63.0498 126.307 62 118.167 62C108.927 62 97.0025 64.9225 94.9236 64.9225H93.0787C92.1085 64.9225 89.0026 64.2864 85.0311 63.6148C80.4643 62.8366 74.7648 62 69.8356 62C63.8794 62 58.2254 62.5662 54.9673 62.9662C53.7756 63.1083 52.8997 63.2366 52.4442 63.3077C52.2454 63.3318 52.0932 63.5083 52.0932 63.7088L52 68.7161C52 68.8926 52.1057 69.0462 52.2681 69.1172L52.8282 69.3178C53.6575 69.6364 53.5882 84.7304 58.0493 88.501C60.7008 90.7278 63.0603 92 72.9994 92C78.7579 92 82.3785 90.4333 85.8127 85.755C88.2892 82.3969 90.484 74.4545 90.484 74.4545C91.1497 71.179 93.5672 70.92 93.9534 70.8959C93.9773 70.8959 94 70.8959 94 70.8959C94.0807 70.8959 96.8037 70.9429 97.516 74.4545C97.516 74.4545 99.7119 82.3969 102.187 85.755C105.62 90.4333 109.242 92 114.999 92C124.94 92 127.298 90.7278 129.95 88.501C134.412 84.7304 134.341 69.6364 135.171 69.3178L135.732 69.1172C135.894 69.0462 136 68.8937 136 68.7161L135.909 63.71ZM85.8138 81.5729C84.354 85.0604 80.5813 89.5623 75.2669 89.8328C59.324 90.6453 58.5878 86.1561 57.5597 82.5975C56.5202 79.0389 56.2521 75.9158 56.66 72.3572C57.0803 68.7986 57.9687 66.7127 59.5693 65.664C60.2578 65.2045 61.0064 64.7919 62.9217 64.4973C64.6383 64.2383 67.2898 64.0847 71.7044 64.0847C74.2616 64.0847 76.6563 64.2853 78.7932 64.6383C84.4699 65.5575 88.3006 67.5024 88.3006 69.4221C88.3006 70.732 87.9734 76.4109 85.8138 81.5729ZM130.441 82.5975C129.414 86.1561 128.678 90.6453 112.735 89.8328C107.421 89.5623 103.648 85.0604 102.188 81.5729C100.028 76.4121 99.7017 70.732 99.7017 69.4244C99.7017 66.7849 106.967 64.0859 116.298 64.0859C125.63 64.0859 127.124 64.793 128.434 65.6652C130.034 66.7139 130.921 68.7997 131.342 72.3583C131.751 75.9169 131.482 79.04 130.441 82.5975Z" fill="#2D3748"/>
                            <path d="M94.123 90.65L94.112 100.788L94.102 104.335V107.121L94.091 116.374V116.384L94.081 116.374H94.07L94.04 116.353L53.604 95.771C53.593 95.709 53.573 95.648 53.563 95.586C53.368 94.764 53.193 93.931 53.039 93.088C52.833 91.977 52.669 90.846 52.545 89.705C52.494 89.345 52.463 88.985 52.432 88.625C52.391 88.245 52.361 87.874 52.34 87.494C52.288 86.805 52.257 86.106 52.236 85.407C52.226 84.954 52.215 84.502 52.215 84.05V71.764C52.215 71.939 52.226 72.114 52.226 72.288C52.308 75.259 52.781 78.529 53.696 81.87C54.406 84.44 55.29 86.815 56.318 88.933V88.943C59.012 94.547 62.621 98.35 65.941 98.967C66.147 98.998 66.363 99.018 66.569 99.039C67.854 99.183 69.201 99.265 70.589 99.265C75.832 99.265 80.49 95.05 83.42 93.343C83.441 93.333 83.461 93.322 83.482 93.312C83.636 93.219 83.791 93.127 83.924 93.034C83.965 93.003 84.006 92.983 84.047 92.962C86.515 91.553 90.072 90.659 94.041 90.649H94.123V90.65Z" fill="#543E36"/>
                            <path d="M135.947 71.764L135.937 84.05C135.937 87.135 135.649 90.157 135.115 93.088C134.898 94.26 134.652 95.421 134.364 96.573L124.874 110.278L94.092 116.375H94.082L94.071 116.385V116.375L94.041 90.648H94.123C98.092 90.658 101.659 91.553 104.127 92.961C104.168 92.982 104.198 93.002 104.24 93.033C104.384 93.126 104.538 93.218 104.692 93.311C104.702 93.321 104.722 93.332 104.743 93.342C107.684 95.049 112.331 99.267 117.575 99.267C118.963 99.267 120.309 99.185 121.594 99.041C121.81 99.02 122.016 99 122.232 98.969C125.543 98.352 129.162 94.548 131.845 88.945V88.935C132.872 86.817 133.757 84.442 134.466 81.872C135.392 78.479 135.875 75.169 135.937 72.156C135.947 72.021 135.947 71.897 135.947 71.764Z" fill="#543E36"/>
                            <path d="M94.074 107.125C99.7377 107.125 104.329 105.706 104.329 103.955C104.329 102.204 99.7377 100.785 94.074 100.785C88.4103 100.785 83.819 102.204 83.819 103.955C83.819 105.706 88.4103 107.125 94.074 107.125Z" fill="#ECC19C"/>
                            <path d="M64.131 155.174V211.732H59.762V158.362C60.348 157.889 60.934 157.426 61.531 156.984C62.384 156.347 63.247 155.75 64.131 155.174Z" fill="#435363"/>
                            <path d="M124.021 155.185V200.741V211.732H128.39V200.741V158.372L124.021 155.185Z" fill="#435363"/>
                            <path d="M82.113 151.713L94.074 166.049L106.036 151.713H82.113Z" fill="#1A202C"/>
                            <path d="M94.074 225.437H87.001L92.111 159.637C92.326 160.474 95.823 160.474 96.038 159.637L101.148 225.437H94.074Z" fill="#1A202C"/>
                            <path d="M94.07 151.638L94.04 151.689L94.029 151.71L89.063 160.048L84.426 167.82L71.872 150.373C72.273 150.085 72.674 149.777 73.055 149.458C73.065 149.468 73.065 149.468 73.076 149.479C75.594 147.474 77.836 145.12 79.697 142.488L94.04 151.618L94.07 151.638Z" fill="#E7ECF2"/>
                            <path d="M116.278 150.373L103.724 167.82L99.087 160.048L94.11 151.71L94.069 151.638L108.505 142.447C110.376 145.099 112.607 147.464 115.136 149.489C115.518 149.797 115.897 150.096 116.278 150.373Z" fill="#E7ECF2"/>
                        </g>
                        <defs>
                            <clipPath id="clip0">
                                <rect width="188.148" height="188.148" fill="white"/>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
            </div>
        </section>

        <section class="bg-gray-800 pattern py-20">
            <div class="max-w-5xl px-6 mx-auto text-center">
                <h2 class="text-2xl font-semibold text-white">About Me</h2>

                <p class="text-gray-400 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper nulla nunc quis molestie volutpat elementum at. Ultrices ipsum, enim cursus lorem ac. Orci maecenas praesent arcu eget orci est orci nullam. Leo purus est pellentesque massa at tortor, est. Aliquet pulvinar a mattis sagittis. Suspendisse porta id elementum, massa.</p>
            </div>
        </section>

        <section class="bg-white py-20">
            <div class="max-w-5xl px-6 mx-auto text-center">
                <h2 class="text-2xl font-semibold text-gray-800">Latest Posts</h2>

                <div class="flex flex-col items-center justify-center mt-6">
                    <a class="max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
                        <div class="flex items-center justify-between px-4 py-2">
                            <h3 class="text-lg font-medium text-gray-700">Easy, Free Laravel CI Using GitHub Actions</h3>
                            <span class="block text-gray-600 font-light text-sm">20 Jan 2020</span>
                        </div>
                    </a>

                    <a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
                        <div class="flex items-center justify-between px-4 py-2">
                            <h3 class="text-lg font-medium text-gray-700">Pest: a delightful PHP Testing Framework</h3>
                            <span class="block text-gray-600 font-light text-sm">29 Oct 2019</span>
                        </div>
                    </a>

                    <a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
                        <div class="flex items-center justify-between px-4 py-2">
                            <h3 class="text-lg font-medium text-gray-700">Using inline SVGs in Vue components</h3>
                            <span class="block text-gray-600 font-light text-sm">15 Oct 2019</span>
                        </div>
                    </a>

                    <a class="mt-8 max-w-2xl w-full block bg-white shadow-md rounded-md border-t-4 border-indigo-600 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110" href="#">
                        <div class="flex items-center justify-between px-4 py-2">
                            <h3 class="text-lg font-medium text-gray-700">Acceptance Testing Laravel & VueJs Apps with Codeception</h3>
                            <span class="block text-gray-600 font-light text-sm">3 Oct 2019</span>
                        </div>
                    </a>
                </div>

                <div class="flex items-center justify-center mt-12">
                    <a class="flex items-center text-gray-600 hover:underline hover:text-gray-500" href="#">
                        <span>View More</span>

                        <svg class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                </div>
            </div>
        </section>

        <section class="bg-gray-800 pattern py-20">
            <div class="max-w-5xl px-6 mx-auto text-center">
                <h2 class="text-2xl font-semibold text-white">Projects</h2>

                <div class="flex items-center justify-center mt-10">
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        <div class="max-w-xs w-full">
                            <div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
                                <img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
                            </div>

                            <a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
                                <div class="py-2 px-3 text-center text-sm">
                                    <p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                                    <span class="block text-gray-500 mt-2">tailwindcomponents.com</span>
                                </div>
                            </a>
                        </div>

                        <div class="max-w-xs w-full">
                            <div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
                                <img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
                            </div>

                            <a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
                                <div class="py-2 px-3 text-center text-sm">
                                    <p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                                    <span class="block text-gray-500 mt-2">tailwindcomponents.com</span>
                                </div>
                            </a>
                        </div>

                        <div class="max-w-xs w-full">
                            <div class="flex items-center justify-center h-56 bg-white border-b-8 border-teal-400 rounded-md overflow-hidden">
                                <img class="object-cover h-8" src="https://premium-tailwindcomponents.netlify.app/assets/svg/tailwindcomponent-dark.svg" alt="">
                            </div>

                            <a href="#" class="block bg-gray-700 mt-5 rounded-md overflow-hidden transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
                                <div class="py-2 px-3 text-center text-sm">
                                    <p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

                                    <span class="block text-gray-500 mt-2">tailwindcomponents.com</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-center mt-12">
                    <a class="flex items-center text-white hover:underline hover:text-gray-200" href="#">
                        <span>View More On Github</span>

                        <svg class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                </div>
            </div>
        </section>

        <footer class="bg-white">
            <div class="container mx-auto px-6 py-4">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="text-gray-600">&copy; Agustin Rodríguez</div>
                    </div>

                    <div class="flex items-center -mx-2">
                        <a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </a>

                        <a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                            </svg>
                        </a>

                        <a class="flex items-center mx-2 text-gray-600 hover:text-indigo-600" href="#">
                            <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                <path d='M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z'/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</main>

How to create a Developer portfolio with Tailwind CSS?

Now that you know why Tailwind CSS is a great choice for creating a developer portfolio, let's dive into the steps to create one.

Step 1: Set up your development environment

Before we can start building our portfolio, we need to set up our development environment. You'll need a code editor like Visual Studio Code and Node.js installed on your computer.

Step 2: Create a new project

Next, we'll create a new project using the command line. Open your terminal and navigate to the folder where you want to create your project. Then, run the following command:

npx tailwindcss-cli@latest init

This will create a new project with Tailwind CSS installed.

Step 3: Create the HTML structure

Now that we have our project set up, we can start building our portfolio. We'll start by creating the HTML structure for our portfolio. Here's an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Developer Portfolio</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header class="bg-gray-800 text-white py-4">
      <div class="container mx-auto flex justify-between items-center px-4">
        <h1 class="text-2xl font-bold">Developer Portfolio</h1>
        <nav>
          <ul class="flex">
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main class="container mx-auto py-8">
      <section class="pb-8">
        <h2 class="text-2xl font-bold">About Me</h2>
        <p class="mt-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          condimentum, nulla eu bibendum elementum, odio sapien commodo
          turpis, eget bibendum quam erat a ipsum. Sed efficitur, quam
          quis faucibus malesuada, quam sapien rutrum elit, vitae
          vestibulum sapien libero sit amet ipsum. Nulla facilisi. Sed
          pharetra, mi vel imperdiet varius, sapien libero bibendum
          sapien, vel commodo nulla mi sit amet enim.
        </p>
      </section>
      <section class="pb-8">
        <h2 class="text-2xl font-bold">Skills</h2>
        <ul class="mt-4">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>React</li>
          <li>Tailwind CSS</li>
        </ul>
      </section>
      <section>
        <h2 class="text-2xl font-bold">Projects</h2>
        <ul class="mt-4">
          <li>
            <a href="#">Project 1</a>
            <p class="mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Sed condimentum, nulla eu bibendum elementum, odio sapien
              commodo turpis, eget bibendum quam erat a ipsum.
            </p>
          </li>
          <li>
            <a href="#">Project 2</a>
            <p class="mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Sed condimentum, nulla eu bibendum elementum, odio sapien
              commodo turpis, eget bibendum quam erat a ipsum.
            </p>
          </li>
          <li>
            <a href="#">Project 3</a>
            <p class="mt-2">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Sed condimentum, nulla eu bibendum elementum, odio sapien
              commodo turpis, eget bibendum quam erat a ipsum.
            </p>
          </li>
        </ul>
      </section>
    </main>
  </body>
</html>

Step 4: Add Tailwind CSS classes

Now that we have our HTML structure in place, we can start adding Tailwind CSS classes to style our portfolio. Here's an example of how we can use Tailwind CSS classes to style our header:

<header class="bg-gray-800 text-white py-4">
  <div class="container mx-auto flex justify-between items-center px-4">
    <h1 class="text-2xl font-bold">Developer Portfolio</h1>
    <nav>
      <ul class="flex">
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Step 5: Customize your portfolio

Tailwind CSS is highly customizable, which means you can easily change the colors, fonts, and other styles to match your personal brand. Here's an example of how we can customize our header:

<header class="bg-blue-500 text-white py-4">
  <div class="container mx-auto flex justify-between items-center px-4">
    <h1 class="text-2xl font-bold">Developer Portfolio</h1>
    <nav>
      <ul class="flex">
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Step 6: Deploy your portfolio

Once you're happy with your portfolio, it's time to deploy it. You can use a service like Netlify or GitHub Pages to host your portfolio for free.

Conclusion

Creating a developer portfolio with Tailwind CSS is a great way to showcase your skills and projects to potential employers or clients. With our step-by-step guide, you can create a professional-looking portfolio in under an hour. Tailwind CSS is highly customizable, which means you can create a unique portfolio that showcases your abilities in a way that suits you. So what are you waiting for? Start building your portfolio today!