Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-07 23:13:55 +05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add hover effect on links

Browse source
This commit is contained in:
Kentai Radiquum 2025-07-23 13:22:53 +05:00
parent 72bad7b8ea
commit 814b43498b
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/Section/Characters.tsx
View file

@ -23,9 +23,9 @@ export const Characters = () => {
<Section> <Section>
<div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center"> <div className="flex flex-col gap-2 mt-2 md:flex-row md:justify-between md:items-center">
<h2 className="text-4xl md:text-5xl">Characters</h2> <h2 className="text-4xl md:text-5xl">Characters</h2>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 xl:gap-8">
{links.map((item) => ( {links.map((item) => (
<Link href={item.url} key={`photos.link.${item.text}`}> <Link href={item.url} key={`characters.link.${item.text}`}>
<IconWithText <IconWithText
icon={item.icon} icon={item.icon}
text={item.text} text={item.text}

2
app/Section/Contacts.tsx
View file

@ -37,7 +37,7 @@ export const Contacts = () => {
{links.map((item) => { {links.map((item) => {
if (item.url) { if (item.url) {
return ( return (
<Link href={item.url} key={`socials.link.${item.text}`}> <Link href={item.url} key={`contacts.link.${item.text}`}>
<IconWithText <IconWithText
icon={item.icon} icon={item.icon}
text={item.text} text={item.text}

2
app/Section/Photos.tsx
View file

@ -42,7 +42,7 @@ export const Photos = () => {
<Section> <Section>
<div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center"> <div className="flex flex-col gap-2 md:flex-row md:justify-between md:items-center">
<h2 className="text-4xl md:text-5xl">Photos</h2> <h2 className="text-4xl md:text-5xl">Photos</h2>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4 xl:gap-8">
{links.map((item) => ( {links.map((item) => (
<Link href={item.url} key={`photos.link.${item.text}`}> <Link href={item.url} key={`photos.link.${item.text}`}>
<IconWithText <IconWithText

2
app/Section/Projects.tsx
View file

@ -53,7 +53,7 @@ export const Projects = () => {
<h2 className="text-4xl md:text-5xl">Projects</h2> <h2 className="text-4xl md:text-5xl">Projects</h2>
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3"> <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
{links.map((item) => ( {links.map((item) => (
<Link href={item.url} key={`socials.link.${item.text}`}> <Link href={item.url} key={`projects.link.${item.text}`}>
<IconWithText icon={item.icon} text={item.text} desc={item.desc} /> <IconWithText icon={item.icon} text={item.text} desc={item.desc} />
</Link> </Link>
))} ))}

2
app/components/IconWithText.tsx
View file

@ -6,7 +6,7 @@ type IconWithTextProps = {
export const IconWithText = ({ icon, text, desc }: IconWithTextProps) => { export const IconWithText = ({ icon, text, desc }: IconWithTextProps) => {
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 hover:text-[#c8e8fe] transition-colors">
{/* eslint-disable-next-line @next/next/no-img-element */} {/* eslint-disable-next-line @next/next/no-img-element */}
<img src={icon} alt={""} /> <img src={icon} alt={""} />
<div> <div>