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

✨ feat(footer): Add social media icons and game/project icons to footer

Browse Source 
This commit adds new SVG icons for Mastodon, GitHub, Instagram, and Steam to the footer. It also adds icons for a gamepad and a project icon.
This commit is contained in:
AderKonstantin
2025-03-26 13:41:10 +03:00
parent 102fac4f11
commit 7113768663
7 changed files with 93 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/page.tsx
View File

@@ -1,6 +1,14 @@
import searchPic from '../public/search.svg';
import mastodonPic from '../public/mastodon.svg';
import githubPic from '../public/github.svg';
import instagramPic from '../public/instagram.svg';
import steamPic from '../public/steam.svg';
import gamePic from '../public/gamepad.svg';
import projectPic from '../public/project.svg';
import Image from "next/image";
import Link from "next/link";
import AnimatedLink from '../components/animatedLink';
@@ -21,6 +29,18 @@ const blogposts = [
publish: '2023-09-25',
get_absolute_url: '/blog/science-video-games',
},
{
label: 'How to install Docker & Docker Compose',
body: 'Guide to install Docker & Docker Compose on your machine.',
publish: '2023-09-25',
get_absolute_url: '/blog/docker-installation',
},
{
label: 'Rocket Science',
body: 'Discover how rocket are work.',
publish: '2023-09-25',
get_absolute_url: '/blog/rocket-science',
},
];
export default function Home() {
@@ -49,7 +69,7 @@ export default function Home() {
</div>
<div className="text-2xl mb-20">
<p className="leading-10">
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
</p>
</div>
<HeaderToolbar />
@@ -61,20 +81,66 @@ export default function Home() {
<footer className="border-t border-white pt-4 flex lg:flex-row max-md:flex-col justify-around text-2xl">
<ul className="list-none m-4">
<li className="text-3xl"><h3>Socials</h3></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>
<li className="text-2xl mb-3"><h3>Socials</h3></li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://www.instagram.com/aderkitty/">
<Image
src={instagramPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://mastodon.social/@aderkonstantin">
<Image
src={mastodonPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://github.com/AderKonstantin">
<Image
src={githubPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
<li className="inline text-xl pr-2 mr-2">
<Link href="https://steamcommunity.com/yourprofile">
<Image
src={steamPic}
alt="lang"
width={32}
height={32}
className="inline filter brightness-0 invert"
/>
</Link>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-3xl"><h3>Games</h3></li>
<li className="p-3 text-xl"><AnimatedLink href="#">Joe The Rabbit</AnimatedLink></li>
<li className="text-2xl mb-3"><h3 className='inline'>Games</h3><Image src={gamePic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert"/></li>
<li className="text-xl">
<AnimatedLink href="#">Robot Fire</AnimatedLink>
</li>
</ul>
<ul className="list-none m-4">
<li className="text-3xl"><h3>Other Projects</h3></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>
<li className="text-2xl mb-3"><h3 className='inline'>Other Projects</h3><Image src={projectPic} alt="lang" width={24} height={24} className="ml-2 inline filter brightness-0 invert"/></li>
<li className="text-xl">
<AnimatedLink href="#">cloudberrygames</AnimatedLink>
</li>
<li className="text-xl">
<AnimatedLink href="#">northfamily</AnimatedLink>
</li>
</ul>
</footer>
</div>