update

.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/

src/components/profile/Meta.astro

@@ -0,0 +1,16 @@
+---
+const {
+    Name,
+    Avatar
+} = Astro.props
+---
+
+<div class="profile-meta">
+    <div class="pm-start">
+        <img src={Avatar}/>
+        <h2>{Name}</h2>
+    </div>
+    <div class="pm-end">
+        <!-- <button>Email Me</button> -->
+    </div>
+</div>

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'
+---
+
+<img id="bg" alt="Random image" src="https://random-image-pepebigotes.vercel.app/api/random-image">
+<div class="profile">
+    <ProfileMeta Name={Name} Avatar={Avatar}/>
+    <Links
+        Amazon={Amazon}
+        AppleBooks={AppleBooks}
+        AppleMusic={AppleMusic}
+        ApplePodcasts={ApplePodcasts}
+        Appstore={Appstore}
+        Bandcamp={Bandcamp}
+        Behance={Behance}
+        Blog={Blog}
+        Bluesky={Bluesky}
+        Bookwyrm={Bookwyrm}
+        Booth={Booth}
+        Briar={Briar}
+        Cashapp={Cashapp}
+        Castopod={Castopod}
+        Codeberg={Codeberg}
+        Codepen={Codepen}
+        Coffee={Coffee}
+        Cryptpad={Cryptpad}
+        Custom={Custom}
+        Deezer={Deezer}
+        DevTo={DevTo}
+        Discord={Discord}
+        Email={Email}
+        EpicGames={EpicGames}
+        Etsy={Etsy}
+        Facebook={Facebook}
+        FDroid={FDroid}
+        Firefish={Firefish}
+        Figma={Figma}
+        Flickr={Flickr}
+        Firefox={Firefox}
+        Funkwhale={Funkwhale}
+        Friendica={Friendica}
+        Gdrive={Gdrive}
+        Furaffinity={Furaffinity}
+        Gitlab={Gitlab}
+        Github={Github}
+        Hearthisat={Hearthisat}
+        Goodreads={Goodreads}
+        Instagram={Instagram}
+        HumbleBundle={HumbleBundle}
+        Itchio={Itchio}
+        Itaku={Itaku}
+        Kit={Kit}
+        Kickstarter={Kickstarter}
+        LastFM={LastFM}
+        KoFi={KoFi}
+        Letterboxd={Letterboxd}
+        Lemmy={Lemmy}
+        Linkedin={Linkedin}
+        Liberapay={Liberapay}
+        Littlelink={Littlelink}
+        Linkstack={Linkstack}
+        Mastodon={Mastodon}
+        Llc={Llc}
+        Medium={Medium}
+        Matrix={Matrix}
+        Misskey={Misskey}
+        Messenger={Messenger}
+        Odysee={Odysee}
+        Notion={Notion}
+        Openstreetmap={Openstreetmap}
+        Onlyfans={Onlyfans}
+        Patreon={Patreon}
+        Owncast={Owncast}
+        Peertube={Peertube}
+        Paypal={Paypal}
+        Picarto={Picarto}
+        Phone={Phone}
+        Piwigo={Piwigo}
+        Pinterest={Pinterest}
+        Playstore={Playstore}
+        Pixelfed={Pixelfed}
+        Producthunt={Producthunt}
+        Pleroma={Pleroma}
+        Reddit={Reddit}
+        Pronounspage={Pronounspage}
+        Share={Share}
+        Session={Session}
+        Simplex={Simplex}
+        Signal={Signal}
+        Snapchat={Snapchat}
+        Skoob={Skoob}
+        Spotify={Spotify}
+        Soundcloud={Soundcloud}
+        Strava={Strava}
+        Steam={Steam}
+        Telegram={Telegram}
+        Streams={Streams}
+        Throne={Throne}
+        Threema={Threema}
+        Trakt={Trakt}
+        Tiktok={Tiktok}
+        Tumblr={Tumblr}
+        Trello={Trello}
+        Twitter={Twitter}
+        Twitch={Twitch}
+        Unraid={Unraid}
+        Unity={Unity}
+        Upptime={Upptime}
+        Untappd={Untappd}
+        Venmo={Venmo}
+        Vcard={Vcard}
+        Vrchat={Vrchat}
+        Vimeo={Vimeo}
+        Whatsapp={Whatsapp}
+        Website={Website}
+        Xing={Xing}
+        Wordpress={Wordpress}
+        YoutubeMusic={YoutubeMusic}
+        Youtube={Youtube}
+    />
+</div>

src/pages/index.astro

@@ -0,0 +1,124 @@
+---
+// Layout
+import Profile from '@layouts/Profile.astro'
+
+// Components
+import Links from '@components/profile/Links.astro'
+---
+
+<Profile 
+    Name="John Smith" 
+    Avatar="/avatar.png"
+    
+    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="#"
+/>

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;
+        }
+    }
+}