[Added] Animations, Intro, Projects, Spinning links

This commit is contained in:
Ninjaws
2024-11-22 02:56:26 +01:00
parent 87ca17c1ba
commit 007c3dd588
26 changed files with 366 additions and 244 deletions
+19 -4
View File
@@ -1,7 +1,22 @@
<section id="contact" class="py-20 bg-gray-100">
<div class="container mx-auto text-center">
<h2 class="text-3xl font-semibold text-gray-800 mb-6">Contact</h2>
<section id="contact" class="py-16 md:py-20 bg-gray-100">
<div class="container mx-auto text-center px-6">
<h2 class="text-3xl font-semibold text-gray-800 mb-6 relative">Contact</h2>
<p class="text-xl text-gray-600 mb-6">Feel free to reach out to me via email or social media.</p>
<a href="mailto:your-email@example.com" class="text-blue-500">Send me an email</a>
<!-- <a href="mailto:vink.ian@protonmail.ch" class="text-blue-500">Send me an email</a> -->
<div class="mt-6">
<a href="mailto:vink.ian@protonmail.ch" target="_blank" class="text-gray-600 inline-block mx-3 p-4 rounded-full hover:text-orange-500 transition-all transform hover:rotate-[360deg] duration-700 ease-in-out">
<i class="bi bi-envelope-fill text-4xl"></i> <!-- Larger icon with Tailwind -->
</a>
<a href="https://github.com/ninjaws" target="_blank" class="text-gray-600 inline-block mx-3 p-4 rounded-full hover:text-black transition-all transform hover:rotate-[360deg] duration-700 ease-in-out">
<i class="bi bi-github text-4xl"></i> <!-- Larger icon with Tailwind -->
</a>
<!-- LinkedIn link with icon -->
<a href="https://www.linkedin.com/in/vink-development" target="_blank" class="text-gray-600 inline-block mx-3 p-4 rounded-full hover:text-blue-700 transition-all transform hover:rotate-[360deg] duration-700 ease-in-out">
<i class="bi bi-linkedin text-4xl"></i> <!-- Larger icon with Tailwind -->
</a>
</div>
</div>
</section>
+11
View File
@@ -0,0 +1,11 @@
$distance: 13.5rem;
h2:before {
display:none;
left: -$distance;
}
h2:after {
display:none;
left: $distance;
}