自己紹介ポートフォリオ

                <section id="about" class="py-16 bg-gray-100">
    <div class="container mx-auto px-6 text-center">
        <h2 class="text-4xl font-bold text-indigo-600">自己紹介</h2>
        <p class="mt-4 text-gray-600">私はフロントエンドエンジニアで、UI/UXデザインに情熱を持っています。美しいデザインと優れたユーザー体験を提供することを目指しています。</p>
    </div>
</section>
<section id="projects" class="py-16">
    <div class="container mx-auto px-6">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-indigo-600">プロジェクト</h2>
            <p class="mt-4 text-gray-600">これまでに手掛けたプロジェクトの一部をご紹介します。</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <img src="https://via.placeholder.com/300" alt="プロジェクト1" class="rounded-t-lg w-full">
                <h3 class="mt-4 text-xl font-semibold text-indigo-600">プロジェクト名1</h3>
                <p class="mt-2 text-gray-600">プロジェクトの説明がここに入ります。</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <img src="https://via.placeholder.com/300" alt="プロジェクト2" class="rounded-t-lg w-full">
                <h3 class="mt-4 text-xl font-semibold text-indigo-600">プロジェクト名2</h3>
                <p class="mt-2 text-gray-600">プロジェクトの説明がここに入ります。</p>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <img src="https://via.placeholder.com/300" alt="プロジェクト3" class="rounded-t-lg w-full">
                <h3 class="mt-4 text-xl font-semibold text-indigo-600">プロジェクト名3</h3>
                <p class="mt-2 text-gray-600">プロジェクトの説明がここに入ります。</p>
            </div>
        </div>
    </div>
</section>
<section id="contact" class="py-16 bg-indigo-600 text-white">
    <div class="container mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold">連絡先</h2>
        <p class="mt-4">新しいプロジェクトやコラボレーションについてのご連絡をお待ちしています。</p>
        <a href="mailto:youremail@example.com" class="mt-8 inline-block bg-white text-indigo-600 py-3 px-8 rounded-full text-lg font-semibold shadow hover:bg-gray-100 transition">メールを送る</a>
    </div>
</section>