mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-09-06 14:33:54 +05:00
Feat: add mobile (440-768px) styles
This commit is contained in:
parent
c2d825bf36
commit
5981db3626
GPG key ID:
858E8EE696525EED
51 changed files with 817 additions and 133 deletions
54
app/Section/Characters.tsx
Normal file
54
app/Section/Characters.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
import { CharacterImage } from "../components/CharacterImage";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/furaffinity.svg",
|
||||
text: "Furaffinity",
|
||||
desc: "radiquum",
|
||||
url: "https://furaffinity.net/user/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/itaku.svg",
|
||||
text: "Itaku",
|
||||
desc: "radiquum",
|
||||
url: "https://itaku.ee/profile/radiquum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Characters = () => {
|
||||
return (
|
||||
<Section>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-4xl">Characters</h2>
|
||||
<div className="flex items-center gap-4">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`photos.link.${item.text}`}>
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 mt-2">
|
||||
<CharacterImage
|
||||
name="Kentai"
|
||||
species="Red Panda"
|
||||
gender="Male"
|
||||
image="/images/red_panda.png"
|
||||
/>
|
||||
<CharacterImage
|
||||
name=""
|
||||
species="Protogen"
|
||||
gender="Male"
|
||||
image="/images/protogen.png"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
62
app/Section/Contacts.tsx
Normal file
62
app/Section/Contacts.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@radiquum",
|
||||
url: "https://t.me/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-discord.svg",
|
||||
text: "Discord",
|
||||
desc: "radiquum",
|
||||
url: null,
|
||||
},
|
||||
{
|
||||
icon: "/icons/material-symbols_mail.svg",
|
||||
text: "E-Mail",
|
||||
desc: "radiquum@wah.su",
|
||||
url: "mailto:radiquum@wah.su",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_vk-fill.svg",
|
||||
text: "Vkontakte",
|
||||
desc: "@radiquum",
|
||||
url: "https://vk.com/radiquum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Contacts = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl">Contacts</h2>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{links.map((item) => {
|
||||
if (item.url) {
|
||||
return (
|
||||
<Link href={item.url} key={`socials.link.${item.text}`}>
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<IconWithText
|
||||
key={`socials.${item.text}`}
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
/>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
20
app/Section/Intro.tsx
Normal file
20
app/Section/Intro.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export const Intro = () => {
|
||||
return (
|
||||
<div className="flex gap-4 flex-col">
|
||||
<div className="w-full flex items-center justify-center py-24 bg-[#101316] rounded-tl-[256px] rounded-br-[256px]">
|
||||
<h1 className="text-[#FFB1CD] tracking-tight font-bold text-8xl">
|
||||
Radiquum
|
||||
</h1>
|
||||
</div>
|
||||
<div className="w-full flex items-center justify-center py-24 bg-[#161213] rounded-bl-[128px] rounded-tr-[128px]">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-[#C8E8FE] font-medium text-4xl">Photographer</p>
|
||||
<p className="text-[#FF8686] font-medium text-4xl">Developer</p>
|
||||
<p className="text-[#FF851A] font-medium text-4xl">
|
||||
Self-Hosting admirer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
61
app/Section/Photos.tsx
Normal file
61
app/Section/Photos.tsx
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Section } from "../components/Section";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { EmblaOptionsType } from "embla-carousel";
|
||||
import EmblaCarousel from "../components/Photos.Carousel";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@photowah",
|
||||
url: "https://x.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/simple-icons_immich.svg",
|
||||
text: "Gallery",
|
||||
desc: "wah.su/photos",
|
||||
url: "https://bsky.app/profile/@radiquum.wah.su",
|
||||
},
|
||||
];
|
||||
|
||||
const OPTIONS: EmblaOptionsType = { dragFree: true, loop: true };
|
||||
const SLIDES = [
|
||||
"/images/photos/2024-06-14T19_32_04_024.JPG",
|
||||
"/images/photos/2024-06-17T18_55_55_030.JPG",
|
||||
"/images/photos/2024-06-17T19_44_15_068.JPG",
|
||||
"/images/photos/2024-06-17T19_48_32_074.JPG",
|
||||
"/images/photos/2024-06-22T20_17_57_001.JPG",
|
||||
"/images/photos/image_2024-06-02_16-55-04.png",
|
||||
"/images/photos/IMG_20230604_043911_43.JPG",
|
||||
"/images/photos/IMG_20240710_225123.jpg",
|
||||
"/images/photos/IMG_20240710_225448.jpg",
|
||||
"/images/photos/IMG_20230602_190558.JPG",
|
||||
"/images/photos/IMG_20230603_175135.JPG",
|
||||
];
|
||||
|
||||
export const Photos = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Section>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h2 className="text-4xl">Photos</h2>
|
||||
<div className="flex items-center gap-4">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`photos.link.${item.text}`}>
|
||||
<IconWithText
|
||||
icon={item.icon}
|
||||
text={item.text}
|
||||
desc={item.desc}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
<EmblaCarousel slides={SLIDES} options={OPTIONS} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
63
app/Section/Projects.tsx
Normal file
63
app/Section/Projects.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "Anix",
|
||||
desc: "Unofficial web client for anixart",
|
||||
url: "https://github.com/radiquum/AniX",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "Furaffinity-dl",
|
||||
desc: "Fork with additional functionality",
|
||||
url: "https://github.com/radiquum/furaffinity-dl",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "TG-Photos",
|
||||
desc: "Google Photo like bot for Telegram",
|
||||
url: "https://github.com/radiquum/TG-Photos",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "TIG",
|
||||
desc: "Generate images from text",
|
||||
url: "https://github.com/radiquum/TIG",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_github.svg",
|
||||
text: "GitHub",
|
||||
desc: "Other Projects",
|
||||
url: "https://github.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/wahsu.svg",
|
||||
text: "wah.su",
|
||||
desc: "Self-Hosting project",
|
||||
url: "https://wah.su",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Red Pandas Stickers",
|
||||
desc: "Collection of Red Panda related sticker packs",
|
||||
url: "https://t.me/red_panda_stickers",
|
||||
},
|
||||
];
|
||||
|
||||
export const Projects = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl">Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`socials.link.${item.text}`}>
|
||||
<IconWithText icon={item.icon} text={item.text} desc={item.desc} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
63
app/Section/Socials.tsx
Normal file
63
app/Section/Socials.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import Link from "next/link";
|
||||
import { IconWithText } from "../components/IconWithText";
|
||||
import { Section } from "../components/Section";
|
||||
|
||||
const links = [
|
||||
{
|
||||
icon: "/icons/uim_twitter.svg",
|
||||
text: "Twitter",
|
||||
desc: "@radiquum",
|
||||
url: "https://x.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_bluesky-fill.svg",
|
||||
text: "BlueSky",
|
||||
desc: "@radiquum.wah.su",
|
||||
url: "https://bsky.app/profile/@radiquum.wah.su",
|
||||
},
|
||||
{
|
||||
icon: "/icons/mdi_mastodon.svg",
|
||||
text: "Mastodon",
|
||||
desc: "@radiquum@furry.engineer",
|
||||
url: "https://furry.engineer/@radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ic_baseline-telegram.svg",
|
||||
text: "Telegram",
|
||||
desc: "@radiquumprojects",
|
||||
url: "https://t.me/radiquumprojects",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_vk-fill.svg",
|
||||
text: "Vkontakte",
|
||||
desc: "@radiquum",
|
||||
url: "https://vk.com/radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_pixelfed-fill.svg",
|
||||
text: "Pixey",
|
||||
desc: "@radiquum@pixey.org",
|
||||
url: "https://pixey.org/@radiquum",
|
||||
},
|
||||
{
|
||||
icon: "/icons/ri_pixelfed-fill.svg",
|
||||
text: "Instafops",
|
||||
desc: "@radiquwum@Instafops.net",
|
||||
url: "https://instafops.net/@radiquum",
|
||||
},
|
||||
];
|
||||
|
||||
export const Socials = () => {
|
||||
return (
|
||||
<Section>
|
||||
<h2 className="text-4xl">Socials</h2>
|
||||
<div className="grid grid-cols-2 gap-x-12 gap-y-2">
|
||||
{links.map((item) => (
|
||||
<Link href={item.url} key={`socials.link.${item.text}`}>
|
||||
<IconWithText icon={item.icon} text={item.text} desc={item.desc} />
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue