diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..16d54bb --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# build output +dist/ +# generated types +.astro/ + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store + +# jetbrains setting folder +.idea/ diff --git a/public/avatar.png b/public/avatar.png new file mode 100644 index 0000000..e24624c Binary files /dev/null and b/public/avatar.png differ diff --git a/src/components/profile/Links.astro b/src/components/profile/Links.astro new file mode 100644 index 0000000..29f7405 --- /dev/null +++ b/src/components/profile/Links.astro @@ -0,0 +1,1006 @@ +--- +const { + Amazon, + AppleBooks, + AppleMusic, + ApplePodcasts, + Appstore, + Bandcamp, + Behance, + Blog, + Bluesky, + Bookwyrm, + Booth, + Briar, + Cashapp, + Castopod, + Codeberg, + Codepen, + Coffee, + Cryptpad, + Custom, + Deezer, + DevTo, + Discord, + Email, + EpicGames, + Etsy, + Facebook, + FDroid, + Firefish, + Figma, + Flickr, + Firefox, + Funkwhale, + Friendica, + Gdrive, + Furaffinity, + Gitlab, + Github, + Hearthisat, + Goodreads, + Instagram, + HumbleBundle, + Itchio, + Itaku, + Kit, + Kickstarter, + LastFM, + KoFi, + Letterboxd, + Lemmy, + Linkedin, + Liberapay, + Littlelink, + Linkstack, + Mastodon, + Llc, + Medium, + Matrix, + Misskey, + Messenger, + Odysee, + Notion, + Openstreetmap, + Onlyfans, + Patreon, + Owncast, + Peertube, + Paypal, + Picarto, + Phone, + Piwigo, + Pinterest, + Playstore, + Pixelfed, + Producthunt, + Pleroma, + Reddit, + Pronounspage, + Share, + Session, + Simplex, + Signal, + Snapchat, + Skoob, + Spotify, + Soundcloud, + Strava, + Steam, + Telegram, + Streams, + Throne, + Threema, + Trakt, + Tiktok, + Tumblr, + Trello, + Twitter, + Twitch, + Unraid, + Unity, + Upptime, + Untappd, + Venmo, + Vcard, + Vrchat, + Vimeo, + Whatsapp, + Website, + Xing, + Wordpress, + YoutubeMusic, + Youtube, +} = Astro.props +--- + + + +
{Amazon ? + + +

Amazon

+ + : + null} + +{AppleBooks ? + + +

AppleBooks

+ + : + null} + +{AppleMusic ? + + +

AppleMusic

+ + : + null} + +{ApplePodcasts ? + + +

ApplePodcasts

+ + : + null} + +{Appstore ? + + +

Appstore

+ + : + null} + +{Bandcamp ? + + +

Bandcamp

+ + : + null} + +{Behance ? + + +

Behance

+ + : + null} + +{Blog ? + + +

Blog

+ + : + null} + +{Bluesky ? + + +

Bluesky

+ + : + null} + +{Bookwyrm ? + + +

Bookwyrm

+ + : + null} + +{Booth ? + + +

Booth

+ + : + null} + +{Briar ? + + +

Briar

+ + : + null} + +{Cashapp ? + + +

Cashapp

+ + : + null} + +{Castopod ? + + +

Castopod

+ + : + null} + +{Codeberg ? + + +

Codeberg

+ + : + null} + +{Codepen ? + + +

Codepen

+ + : + null} + +{Coffee ? + + +

Coffee

+ + : + null} + +{Cryptpad ? + + +

Cryptpad

+ + : + null} + +{Custom ? + + +

Custom

+ + : + null} + +{Deezer ? + + +

Deezer

+ + : + null} + +{DevTo ? + + +

DevTo

+ + : + null} + +{Discord ? + + +

Discord

+ + : + null} + +{Email ? + + +

Email

+ + : + null} + +{EpicGames ? + + +

EpicGames

+ + : + null} + +{Etsy ? + + +

Etsy

+ + : + null} + +{Facebook ? + + +

Facebook

+ + : + null} + +{FDroid ? + + +

FDroid

+ + : + null} + +{Firefish ? + + +

Firefish

+ + : + null} + +{Figma ? + + +

Figma

+ + : + null} + +{Flickr ? + + +

Flickr

+ + : + null} + +{Firefox ? + + +

Firefox

+ + : + null} + +{Funkwhale ? + + +

Funkwhale

+ + : + null} + +{Friendica ? + + +

Friendica

+ + : + null} + +{Gdrive ? + + +

Gdrive

+ + : + null} + +{Furaffinity ? + + +

Furaffinity

+ + : + null} + +{Gitlab ? + + +

Gitlab

+ + : + null} + +{Github ? + + +

Github

+ + : + null} + +{Hearthisat ? + + +

Hearthisat

+ + : + null} + +{Goodreads ? + + +

Goodreads

+ + : + null} + +{Instagram ? + + +

Instagram

+ + : + null} + +{HumbleBundle ? + + +

HumbleBundle

+ + : + null} + +{Itchio ? + + +

Itchio

+ + : + null} + +{Itaku ? + + +

Itaku

+ + : + null} + +{Kit ? + + +

Kit

+ + : + null} + +{Kickstarter ? + + +

Kickstarter

+ + : + null} + +{LastFM ? + + +

LastFM

+ + : + null} + +{KoFi ? + + +

KoFi

+ + : + null} + +{Letterboxd ? + + +

Letterboxd

+ + : + null} + +{Lemmy ? + + +

Lemmy

+ + : + null} + +{Linkedin ? + + +

Linkedin

+ + : + null} + +{Liberapay ? + + +

Liberapay

+ + : + null} + +{Littlelink ? + + +

Littlelink

+ + : + null} + +{Linkstack ? + + +

Linkstack

+ + : + null} + +{Mastodon ? + + +

Mastodon

+ + : + null} + +{Llc ? + + +

Llc

+ + : + null} + +{Medium ? + + +

Medium

+ + : + null} + +{Matrix ? + + +

Matrix

+ + : + null} + +{Misskey ? + + +

Misskey

+ + : + null} + +{Messenger ? + + +

Messenger

+ + : + null} + +{Odysee ? + + +

Odysee

+ + : + null} + +{Notion ? + + +

Notion

+ + : + null} + +{Openstreetmap ? + + +

Openstreetmap

+ + : + null} + +{Onlyfans ? + + +

Onlyfans

+ + : + null} + +{Patreon ? + + +

Patreon

+ + : + null} + +{Owncast ? + + +

Owncast

+ + : + null} + +{Peertube ? + + +

Peertube

+ + : + null} + +{Paypal ? + + +

Paypal

+ + : + null} + +{Picarto ? + + +

Picarto

+ + : + null} + +{Phone ? + + +

Phone

+ + : + null} + +{Piwigo ? + + +

Piwigo

+ + : + null} + +{Pinterest ? + + +

Pinterest

+ + : + null} + +{Playstore ? + + +

Playstore

+ + : + null} + +{Pixelfed ? + + +

Pixelfed

+ + : + null} + +{Producthunt ? + + +

Producthunt

+ + : + null} + +{Pleroma ? + + +

Pleroma

+ + : + null} + +{Reddit ? + + +

Reddit

+ + : + null} + +{Pronounspage ? + + +

Pronounspage

+ + : + null} + +{Share ? + + +

Share

+ + : + null} + +{Session ? + + +

Session

+ + : + null} + +{Simplex ? + + +

Simplex

+ + : + null} + +{Signal ? + + +

Signal

+ + : + null} + +{Snapchat ? + + +

Snapchat

+ + : + null} + +{Skoob ? + + +

Skoob

+ + : + null} + +{Spotify ? + + +

Spotify

+ + : + null} + +{Soundcloud ? + + +

Soundcloud

+ + : + null} + +{Strava ? + + +

Strava

+ + : + null} + +{Steam ? + + +

Steam

+ + : + null} + +{Telegram ? + + +

Telegram

+ + : + null} + +{Streams ? + + +

Streams

+ + : + null} + +{Throne ? + + +

Throne

+ + : + null} + +{Threema ? + + +

Threema

+ + : + null} + +{Trakt ? + + +

Trakt

+ + : + null} + +{Tiktok ? + + +

Tiktok

+ + : + null} + +{Tumblr ? + + +

Tumblr

+ + : + null} + +{Trello ? + + +

Trello

+ + : + null} + +{Twitter ? + + +

Twitter

+ + : + null} + +{Twitch ? + + +

Twitch

+ + : + null} + +{Unraid ? + + +

Unraid

+ + : + null} + +{Unity ? + + +

Unity

+ + : + null} + +{Upptime ? + + +

Upptime

+ + : + null} + +{Untappd ? + + +

Untappd

+ + : + null} + +{Venmo ? + + +

Venmo

+ + : + null} + +{Vcard ? + + +

Vcard

+ + : + null} + +{Vrchat ? + + +

Vrchat

+ + : + null} + +{Vimeo ? + + +

Vimeo

+ + : + null} + +{Whatsapp ? + + +

Whatsapp

+ + : + null} + +{Website ? + + +

Website

+ + : + null} + +{Xing ? + + +

Xing

+ + : + null} + +{Wordpress ? + + +

Wordpress

+ + : + null} + +{YoutubeMusic ? + + +

YoutubeMusic

+ + : + null} + +{Youtube ? + + +

Youtube

+ + : + null} +
\ No newline at end of file diff --git a/src/components/profile/Meta.astro b/src/components/profile/Meta.astro new file mode 100644 index 0000000..8842004 --- /dev/null +++ b/src/components/profile/Meta.astro @@ -0,0 +1,16 @@ +--- +const { + Name, + Avatar +} = Astro.props +--- + +
+
+ +

{Name}

+
+
+ +
+
\ No newline at end of file diff --git a/src/layouts/Profile.astro b/src/layouts/Profile.astro new file mode 100644 index 0000000..feb01be --- /dev/null +++ b/src/layouts/Profile.astro @@ -0,0 +1,243 @@ +--- +// Properties +const { + Name, + Avatar, + Amazon, + AppleBooks, + AppleMusic, + ApplePodcasts, + Appstore, + Bandcamp, + Behance, + Blog, + Bluesky, + Bookwyrm, + Booth, + Briar, + Cashapp, + Castopod, + Codeberg, + Codepen, + Coffee, + Cryptpad, + Custom, + Deezer, + DevTo, + Discord, + Email, + EpicGames, + Etsy, + Facebook, + FDroid, + Firefish, + Figma, + Flickr, + Firefox, + Funkwhale, + Friendica, + Gdrive, + Furaffinity, + Gitlab, + Github, + Hearthisat, + Goodreads, + Instagram, + HumbleBundle, + Itchio, + Itaku, + Kit, + Kickstarter, + LastFM, + KoFi, + Letterboxd, + Lemmy, + Linkedin, + Liberapay, + Littlelink, + Linkstack, + Mastodon, + Llc, + Medium, + Matrix, + Misskey, + Messenger, + Odysee, + Notion, + Openstreetmap, + Onlyfans, + Patreon, + Owncast, + Peertube, + Paypal, + Picarto, + Phone, + Piwigo, + Pinterest, + Playstore, + Pixelfed, + Producthunt, + Pleroma, + Reddit, + Pronounspage, + Share, + Session, + Simplex, + Signal, + Snapchat, + Skoob, + Spotify, + Soundcloud, + Strava, + Steam, + Telegram, + Streams, + Throne, + Threema, + Trakt, + Tiktok, + Tumblr, + Trello, + Twitter, + Twitch, + Unraid, + Unity, + Upptime, + Untappd, + Venmo, + Vcard, + Vrchat, + Vimeo, + Whatsapp, + Website, + Xing, + Wordpress, + YoutubeMusic, + Youtube, +} = Astro.props + +// Components +import ProfileMeta from '@components/profile/Meta.astro' +import Links from '@components/profile/Links.astro' + +// Styles +import '@styles/index.scss' +--- + +Random image +
+ + +
\ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 0000000..2605c0d --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,124 @@ +--- +// Layout +import Profile from '@layouts/Profile.astro' + +// Components +import Links from '@components/profile/Links.astro' +--- + + \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..0f03990 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,88 @@ +body { + background: #202020; + color: white; + font-family: Arial, Helvetica, sans-serif; + max-width: 600px; + margin: auto; + padding: 12px 24px; + &::before { + content: ""; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: -1; + backdrop-filter: brightness(0.25) blur(60px); + } +} + +#bg { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -2; +} + +.profile-meta { + margin-top: 12px; + background: rgba(0, 0, 0, 0.50) !important; + border-radius: 24px; + display: flex; + justify-content: space-between; + padding: 24px; + .pm-start { + display: flex; + align-items: center; + gap: 24px; + img { + width: 64px; + background: #202020; + border-radius: 5rem; + } + } + .pm-end { + display: flex; + align-items: center; + button { + color: white; + background: #202020; + border: none; + border-radius: 3rem; + padding: 6px 12px; + cursor: pointer; + } + } +} + +.links { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + grid-gap: 12px; + margin-top: 12px; + .link { + color: white; + text-decoration: none; + background: rgba(0, 0, 0, 0.50) !important; + display: flex; + align-items: center; + gap: 24px; + border-radius: 12px; + margin-bottom: 6px; + font-size: 14px; + padding: 6px 12px; + border: 2px transparent solid; + transition: 0.3s border; + &:hover { + border-color: white; + transition: 0.3s border; + } + img { + width: 32px; + height: 32px; + } + } +} \ No newline at end of file