AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(page): add animated links to main page

Browse Source 
The changes in this commit add animated link components to the homepage.

The key changes are:

- Imported the `AnimatedLink` component from the `../components/animatedLink` file.
- Replaced the regular `<a>` tags in the main page with `<AnimatedLink>` components, which apply a smooth animation effect on hover.
This commit is contained in:
AderKonstantin
2025-03-01 08:23:57 +03:00
parent 91ff17e8b7
commit b319b6508a
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/page.tsx
View File

@@ -1,4 +1,5 @@
import Image from "next/image";
import AnimatedLink from '../components/animatedLink';
import BlogArea from "../components/blogpost";
// Mock data for blog posts
@@ -24,9 +25,9 @@ export default function Home() {
<div className="flex flex-row mt-12 mb-22">
<ul className="w-full flex flex-row justify-between list-none">
<li className="text-6xl p-2 pr-0">
<a href="https://aderk.tech/" className="text-white no-underline relative hover:text-white">
<AnimatedLink href="https://aderk.tech/">
AderKI
</a>
</AnimatedLink>
</li>
</ul>
</div>
@@ -44,19 +45,19 @@ export default function Home() {
<footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-3xl"><h3>Socials</h3></li>
<li className="p-3 text-xl"><a href="https://www.instagram.com/aderkitty/">Instagram</a></li>
<li className="p-3 text-xl"><a href="https://mastodon.social/@aderkonstantin">Mastodon</a></li>
<li className="p-3 text-xl"><a href="https://github.com/AderKonstantin">GitHub</a></li>
<li className="p-3 text-xl"><a href="https://steamcommunity.com/yourprofile">Steam</a></li>
<li className="p-3 text-xl"><AnimatedLink href="https://www.instagram.com/aderkitty/">Instagram</AnimatedLink></li>
<li className="p-3 text-xl"><AnimatedLink href="https://mastodon.social/@aderkonstantin">Mastodon</AnimatedLink></li>
<li className="p-3 text-xl"><AnimatedLink href="https://github.com/AderKonstantin">GitHub</AnimatedLink></li>
<li className="p-3 text-xl"><AnimatedLink href="https://steamcommunity.com/yourprofile">Steam</AnimatedLink></li>
</ul>
<ul className="list-none m-4">
<li className="text-3xl"><h3>Games</h3></li>
<li className="p-3 text-xl"><a href="#">Joe The Rabbit</a></li>
<li className="p-3 text-xl"><AnimatedLink href="#">Joe The Rabbit</AnimatedLink></li>
</ul>
<ul className="list-none m-4">
<li className="text-3xl"><h3>Other Projects</h3></li>
<li className="p-3 text-xl"><a href="#">Ader Berry Bot (Telegram)</a></li>
<li className="p-3 text-xl"><a href="#">Store</a></li>
<li className="p-3 text-xl"><AnimatedLink href="#">Ader Berry Bot (Telegram)</AnimatedLink></li>
<li className="p-3 text-xl"><AnimatedLink href="#">Store</AnimatedLink></li>
</ul>
</footer>
</div>