├── src
    ├── env.d.ts
    ├── styles
    │   └── global.css
    ├── images
    │   ├── product1.png
    │   ├── profilepic.png
    │   └── backgrounds
    │   │   ├── cityscape.png
    │   │   ├── cityscape2.png
    │   │   ├── cityscape3.png
    │   │   ├── cityscape4.png
    │   │   ├── mars-colony1.png
    │   │   ├── server-room1.png
    │   │   ├── server-room2.png
    │   │   ├── patterned-trees.png
    │   │   ├── patterned-trees2.png
    │   │   ├── watercolor-pink.png
    │   │   ├── vintage-computers.png
    │   │   ├── vintage-computers2.png
    │   │   ├── watercolor-blue-green.png
    │   │   ├── watercolor-pink-blue.png
    │   │   ├── watercolor-blue-green2.png
    │   │   ├── watercolor-blue-green3.png
    │   │   ├── watercolor-orange-centered.png
    │   │   └── watercolor-pink-blue-orange.png
    ├── components
    │   ├── LinkButton.astro
    │   ├── Profile.astro
    │   ├── pastel
    │   │   ├── SocialLinks.astro
    │   │   ├── Profile.astro
    │   │   ├── LinkButton.astro
    │   │   └── ProductLink.astro
    │   ├── SocialLinks.astro
    │   ├── modern
    │   │   ├── Profile.astro
    │   │   ├── SocialLinks.astro
    │   │   ├── LinkCard.astro
    │   │   ├── ProductLink.astro
    │   │   └── ThemeToggle.astro
    │   ├── Card.astro
    │   ├── ProductLink.astro
    │   ├── retro
    │   │   ├── SocialLinks.astro
    │   │   ├── Profile.astro
    │   │   ├── ProductLink.astro
    │   │   └── LinkCard.astro
    │   ├── Navbar.astro
    │   └── PostHog.astro
    ├── types.ts
    ├── pages
    │   ├── retro.astro
    │   ├── modern.astro
    │   ├── index.astro
    │   └── pastel.astro
    ├── layouts
    │   ├── PastelLayout.astro
    │   ├── Layout.astro
    │   ├── ModernLayout.astro
    │   └── RetroLayout.astro
    └── configs
    │   ├── modern-config.js
    │   ├── retro-config.js
    │   └── pastel-config.js
├── preview.png
├── preview-16x9.png
├── preview-16x9-2.png
├── postcss.config.js
├── .vscode
    ├── extensions.json
    └── launch.json
├── tsconfig.json
├── astro.config.mjs
├── .gitignore
├── package.json
├── public
    └── favicon.svg
├── tailwind.config.js
├── README.md
└── config.js


/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/preview.png


--------------------------------------------------------------------------------
/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/preview-16x9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/preview-16x9.png


--------------------------------------------------------------------------------
/preview-16x9-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/preview-16x9-2.png


--------------------------------------------------------------------------------
/src/images/product1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/product1.png


--------------------------------------------------------------------------------
/src/images/profilepic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/profilepic.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/src/images/backgrounds/cityscape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/cityscape.png


--------------------------------------------------------------------------------
/src/images/backgrounds/cityscape2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/cityscape2.png


--------------------------------------------------------------------------------
/src/images/backgrounds/cityscape3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/cityscape3.png


--------------------------------------------------------------------------------
/src/images/backgrounds/cityscape4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/cityscape4.png


--------------------------------------------------------------------------------
/src/images/backgrounds/mars-colony1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/mars-colony1.png


--------------------------------------------------------------------------------
/src/images/backgrounds/server-room1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/server-room1.png


--------------------------------------------------------------------------------
/src/images/backgrounds/server-room2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/server-room2.png


--------------------------------------------------------------------------------
/src/images/backgrounds/patterned-trees.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/patterned-trees.png


--------------------------------------------------------------------------------
/src/images/backgrounds/patterned-trees2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/patterned-trees2.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-pink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-pink.png


--------------------------------------------------------------------------------
/src/images/backgrounds/vintage-computers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/vintage-computers.png


--------------------------------------------------------------------------------
/src/images/backgrounds/vintage-computers2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/vintage-computers2.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-blue-green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-blue-green.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-pink-blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-pink-blue.png


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict",
3 |   "compilerOptions": {
4 |     "strictNullChecks": true,
5 |     "allowJs": true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-blue-green2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-blue-green2.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-blue-green3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-blue-green3.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-orange-centered.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-orange-centered.png


--------------------------------------------------------------------------------
/src/images/backgrounds/watercolor-pink-blue-orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ctrimm/astro-link-in-bio-theme/HEAD/src/images/backgrounds/watercolor-pink-blue-orange.png


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { defineConfig } from 'astro/config';
3 | import tailwind from "@astrojs/tailwind";
4 | 
5 | // https://astro.build/config
6 | export default defineConfig({
7 |   integrations: [tailwind()]
8 | });
9 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 
23 | # jetbrains setting folder
24 | .idea/
25 | 
26 | # vscode setting folder
27 | .vscode/
28 | 


--------------------------------------------------------------------------------
/src/components/LinkButton.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   title: string;
 4 |   url: string;
 5 |   icon?: string;
 6 | }
 7 | 
 8 | const { title, url, icon } = Astro.props;
 9 | ---
10 | 
11 | <a
12 |   href={url}
13 |   target="_blank"
14 |   rel="noopener noreferrer"
15 |   class="block w-full bg-white shadow-md rounded-lg overflow-hidden hover:shadow-lg transition duration-300 border-solid border-2 border-slate-950 py-3 px-4 text-center"
16 | >
17 |   {icon && <i class={`fas fa-${icon} mr-2`}></i>}
18 |   {title}
19 | </a>
20 | 


--------------------------------------------------------------------------------
/src/components/Profile.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../config.js';
 3 | import { Image } from 'astro:assets';
 4 | ---
 5 | 
 6 | <div class="text-center">
 7 |   <Image
 8 |     src={config.user.profileImage}
 9 |     alt={config.user.name}
10 |     width={64}
11 |     height={64}
12 |     class="w-36 h-36 rounded-full mx-auto mb-4 shadow-sm border-solid border-2 border-red-300"
13 |   />
14 |   <h1 class="text-4xl font-extrabold tracking-wide">{config.user.name}</h1>
15 |   <p class="text-gray-700 front-semibold tracking-wide">{config.user.bio}</p>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/components/pastel/SocialLinks.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // src/components/SocialLinks.astro
 3 | import config from '../../configs/pastel-config.js';
 4 | ---
 5 | 
 6 | <div class="flex justify-center space-x-4 mt-4">
 7 |   {config.socialLinks.map((link) => (
 8 |     <a
 9 |       href={link.url}
10 |       target="_blank"
11 |       rel="noopener noreferrer"
12 |       class="text-pastel-green hover:text-pastel-blue transition-colors duration-300 sm:text-3xl hover:animate-wiggle"
13 |     >
14 |       <i class={`fab fa-${link.platform} font-bold`}></i>
15 |     </a>
16 |   ))}
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/components/SocialLinks.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // src/components/SocialLinks.astro
 3 | import config from '../../config.js';
 4 | ---
 5 | 
 6 | <div class="flex justify-center space-x-4 md:space-x-8 mt-4">
 7 |   {config.socialLinks.map((link) => (
 8 |     <a
 9 |       href={link.url}
10 |       target="_blank"
11 |       rel="noopener noreferrer"
12 |       class="text-gray-600 hover:text-gray-800 transition-colors duration-300 text-2xl sm:text-3xl md:text-4xl hover:animate-wiggle"
13 |     >
14 |       <i class={`fab fa-${link.platform} font-bold`}></i>
15 |     </a>
16 |   ))}
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/components/pastel/Profile.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../configs/pastel-config.js';
 3 | ---
 4 | 
 5 | <div class="flex flex-col items-center mb-6">
 6 |   <img
 7 |     src={config.user.profileImage}
 8 |     alt={`${config.user.name} profile picture`}
 9 |     class="w-32 h-32 rounded-full mb-4 border-2 border-pastel-purple"
10 |   />
11 |   <h1 class="text-4xl font-extrabold text-pastel-purple mb-2 tracking-wide drop-shadow-lg">{config.user.name}</h1>
12 |   <p class="text-center font-semibold text-pastel-blue tracking-wide drop-shadow-md">{config.user.bio}</p>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/components/pastel/LinkButton.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 |   title: string;
 4 |   url: string;
 5 |   icon?: string;
 6 | }
 7 | 
 8 | const { title, url, icon } = Astro.props;
 9 | ---
10 | 
11 | <a
12 |   href={url}
13 |   target="_blank"
14 |   rel="noopener noreferrer"
15 |   class="block p-4 bg-pastel-yellow rounded-lg hover:bg-pastel-green transition-colors duration-300"
16 | >
17 |   <div class="flex items-center">
18 |     <i class={`fas fa-${icon} text-2xl text-pastel-blue mr-4`}></i>
19 |     <span class="text-xl font-semibold text-pastel-purple drop-shadow-md">{title}</span>
20 |   </div>
21 | </a>
22 | 


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | export interface SiteConfig {
 2 |   user: {
 3 |     name: string;
 4 |     bio: string;
 5 |     profileImage: string;
 6 |   };
 7 |   background: {
 8 |     color: string;
 9 |     image: string;
10 |   };
11 |   socialLinks: Array<{
12 |     platform: string;
13 |     url: string;
14 |     icon?: string;
15 |   }>;
16 |   links: Array<{
17 |     title: string;
18 |     url: string;
19 |     icon?: string;
20 |   }>;
21 |   products: Array<{
22 |     title: string;
23 |     description: string;
24 |     url: string;
25 |     price: number;
26 |     includePriceOnSite: boolean;
27 |     image: string;
28 |   }>;
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/modern/Profile.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../../config.js';
 3 | ---
 4 | 
 5 | <div class="flex flex-col items-center space-y-4 p-4">
 6 |   <img
 7 |     src={config.user.profileImage}
 8 |     alt="Profile"
 9 |     class="w-32 h-32 rounded-full border-4 border-gray-200 dark:border-gray-700 shadow-lg"
10 |   />
11 |   <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{config.user.name}</h1>
12 |   <p class="text-lg text-gray-600 dark:text-gray-300 mb-2">Software Engineer</p>
13 |   <p class="text-center text-gray-500 dark:text-gray-400 max-w-md">
14 |     {config.user.bio}
15 |   </p>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-link-in-bio-theme",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/check": "^0.9.4",
14 |     "@astrojs/tailwind": "^5.1.1",
15 |     "astro": "^4.15.12",
16 |     "posthog-js": "^1.166.2",
17 |     "typescript": "^5.6.2"
18 |   },
19 |   "devDependencies": {
20 |     "autoprefixer": "^10.4.20",
21 |     "postcss": "^8.4.47",
22 |     "tailwindcss": "^3.4.13"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/components/Card.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // src/components/Card.astro
 3 | interface Props {
 4 |   title: string;
 5 |   body: string;
 6 |   href: string;
 7 | }
 8 | 
 9 | const { href, title, body } = Astro.props;
10 | ---
11 | 
12 | <li class="link-card">
13 |   <a
14 |     href={href}
15 |     class="block p-6 bg-gray-800 rounded-lg hover:bg-gradient-to-r from-primary to-secondary transition-colors duration-300"
16 |   >
17 |     <h2 class="text-xl font-bold text-white transition-colors duration-300 group-hover:text-white">
18 |       {title}
19 |       <span>&rarr;</span>
20 |     </h2>
21 |     <p class="mt-2 text-gray-300">{body}</p>
22 |   </a>
23 | </li>
24 | 


--------------------------------------------------------------------------------
/src/components/modern/SocialLinks.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../../config.js';
 3 | ---
 4 | 
 5 | <div class="flex justify-center space-x-4 my-6">
 6 |   {
 7 |     config.socialLinks.map((link) => (
 8 |       <a
 9 |         href={link.url}
10 |         target="_blank"
11 |         rel="noopener noreferrer"
12 |         class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-all duration-200 hover:scale-110 hover:-translate-y-1"
13 |       >
14 |         <i class={`fab fa-${link.platform} text-2xl`} aria-hidden="true" />
15 |         <span class="sr-only">{link.platform}</span>
16 |       </a>
17 |     ))
18 |   }
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/pages/retro.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import RetroLayout from '../layouts/RetroLayout.astro';
 3 | import Profile from '../components/retro/Profile.astro';
 4 | import SocialLinks from '../components/retro/SocialLinks.astro';
 5 | import LinkCard from '../components/retro/LinkCard.astro';
 6 | import ProductLink from '../components/retro/ProductLink.astro';
 7 | import config from '../configs/retro-config.js';
 8 | ---
 9 | 
10 | <RetroLayout title="Retro Theme - Link in Bio">
11 |   <Profile />
12 |   <SocialLinks />
13 |   <div class="space-y-6 mt-8">
14 |     {config.links.map((link) => <LinkCard link={link} />)}
15 |     {config.products.map((product) => <ProductLink product={product} />)}
16 |   </div>
17 | </RetroLayout>
18 | 


--------------------------------------------------------------------------------
/src/pages/modern.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import ModernLayout from '../layouts/ModernLayout.astro';
 3 | import Profile from '../components/modern/Profile.astro';
 4 | import SocialLinks from '../components/modern/SocialLinks.astro';
 5 | import ProductLink from '../components/modern/ProductLink.astro';
 6 | import LinkCard from '../components/modern/LinkCard.astro';
 7 | import config from '../configs/modern-config.js';
 8 | ---
 9 | 
10 | <ModernLayout title="Modern Theme - Link in Bio">
11 |   <Profile />
12 |   <SocialLinks />
13 |   <div class="space-y-6 mt-8">
14 |     {config.products.map((product) => <ProductLink product={product} />)}
15 |     {config.links.map((link) => <LinkCard link={link} />)}
16 |   </div>
17 | </ModernLayout>
18 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/modern/LinkCard.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 |   link: {
 4 |     title: string;
 5 |     url: string;
 6 |     icon?: string;
 7 |   };
 8 | }
 9 | 
10 | const { link } = Astro.props;
11 | ---
12 | 
13 | <a
14 |   href={link.url}
15 |   class="block w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-200 overflow-hidden mb-6 group"
16 | >
17 |   <div class="p-6 flex items-center">
18 |     {link.icon && (
19 |       <i class={`fas fa-${link.icon} text-xl text-gray-600 dark:text-gray-400 mr-4`} aria-hidden="true" />
20 |     )}
21 |     <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
22 |       {link.title}
23 |     </h3>
24 |     <i class="fas fa-arrow-right ml-auto text-gray-400 dark:text-gray-500 transform group-hover:translate-x-1 transition-transform duration-200" aria-hidden="true" />
25 |   </div>
26 | </a>
27 | 


--------------------------------------------------------------------------------
/src/components/ProductLink.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Image } from 'astro:assets';
 3 | 
 4 | export interface Props {
 5 |   title: string;
 6 |   description: string;
 7 |   url: string;
 8 |   price: number;
 9 |   includePriceOnSite: boolean;
10 |   image: string;
11 | }
12 | 
13 | const { title, description, url, price, includePriceOnSite, image } = Astro.props;
14 | ---
15 | 
16 | <a
17 |   href={url}
18 |   target="_blank"
19 |   rel="noopener noreferrer"
20 |   class="block w-full bg-white shadow-md rounded-lg overflow-hidden hover:shadow-lg transition duration-300 border-solid border-2 border-slate-950"
21 | >
22 |   <div class="flex items-center p-4">
23 |     <Image
24 |       src={image}
25 |       alt={title}
26 |       width={64}
27 |       height={64}
28 |       class="w-16 h-16 object-cover rounded-md mr-4"
29 |     />
30 |     <div class="flex-grow">
31 |       <h3 class="font-bold">{title}</h3>
32 |       <p class="text-sm text-gray-600">{description}</p>
33 |     </div>
34 |     {includePriceOnSite && (
35 |       <div class="text-lg font-bold text-green-600">${price.toFixed(2)}</div>
36 |     )}
37 |   </div>
38 | </a>
39 | 


--------------------------------------------------------------------------------
/src/components/pastel/ProductLink.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { Image } from 'astro:assets';
 3 | 
 4 | export interface Props {
 5 |   title: string;
 6 |   description: string;
 7 |   url: string;
 8 |   price: number;
 9 |   includePriceOnSite: boolean;
10 |   image: string;
11 | }
12 | 
13 | const { title, description, url, price, includePriceOnSite, image } = Astro.props;
14 | ---
15 | 
16 | <a
17 |   href={url}
18 |   target="_blank"
19 |   rel="noopener noreferrer"
20 |   class="block p-4 bg-pastel-pink rounded-lg hover:bg-pastel-purple transition-colors duration-300"
21 | >
22 |   <div class="flex items-center group">
23 |     <Image
24 |       src={image}
25 |       alt={title}
26 |       width={16}
27 |       height={16}
28 |       class="w-16 h-16 mr-4 rounded-lg"
29 |     />
30 |     <div>
31 |       <h3 class="text-lg font-semibold text-pastel-blue drop-shadow-md">{title}</h3>
32 |       <p class="text-pastel-green drop-shadow-md">{description}</p>
33 |       {includePriceOnSite && (
34 |         <p class="text-pastel-purple font-bold group-hover:text-pastel-green drop-shadow-md">${price.toFixed(2)}</p>
35 |       )}
36 |     </div>
37 |   </div>
38 | </a>
39 | 


--------------------------------------------------------------------------------
/src/components/retro/SocialLinks.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../configs/retro-config.js';
 3 | 
 4 | const animations = `
 5 |   @keyframes float {
 6 |     0% { transform: translateY(0) rotate(0deg); }
 7 |     25% { transform: translateY(-4px) rotate(-2deg); }
 8 |     75% { transform: translateY(4px) rotate(2deg); }
 9 |     100% { transform: translateY(0) rotate(0deg); }
10 |   }
11 | `;
12 | ---
13 | 
14 | <style set:html={animations}></style>
15 | 
16 | <div class="flex justify-center flex-wrap gap-6 my-8">
17 |   {
18 |     config.socialLinks.map((link, index) => (
19 |       <a
20 |         href={link.url}
21 |         target="_blank"
22 |         rel="noopener noreferrer"
23 |         class={`bg-${link.color} p-4 rounded transform transition-all duration-300 animate-[float_3s_ease-in-out_infinite] hover:scale-125 hover:rotate-12 hover:shadow-[0_0_20px_rgba(255,255,255,0.5)] group`}
24 |         style={`animation-delay: ${index * 0.15}s`}
25 |       >
26 |         <i
27 |           class={`fab fa-${link.platform} text-2xl text-black transition-transform duration-300 group-hover:scale-110`}
28 |           aria-hidden="true"
29 |         />
30 |         <span class="sr-only">{link.platform}</span>
31 |       </a>
32 |     ))
33 |   }
34 | </div>
35 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../config.js';
 3 | 
 4 | import Layout from '../layouts/Layout.astro';
 5 | import Profile from '../components/Profile.astro';
 6 | import SocialLinks from '../components/SocialLinks.astro';
 7 | import LinkButton from '../components/LinkButton.astro';
 8 | import ProductLink from '../components/ProductLink.astro';
 9 | ---
10 | 
11 | <Layout title={`${config.user.name} - Link in Bio`}>
12 |   <div class="mx-auto px-4 py-8 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
13 |     <main class="container mx-auto">
14 |       <Profile />
15 |       <SocialLinks />
16 |       <div class="space-y-4 mt-6">
17 |         {config.links.map((link) => (
18 |           <LinkButton title={link.title} url={link.url} icon={link.icon} />
19 |         ))}
20 |       </div>
21 |       <div class="space-y-4 mt-6">
22 |         {config.products.map((product) => (
23 |           <ProductLink
24 |             title={product.title}
25 |             description={product.description}
26 |             url={product.url}
27 |             price={product.price}
28 |             includePriceOnSite={product.includePriceOnSite}
29 |             image={product.image}
30 |           />
31 |         ))}
32 |       </div>
33 |     </main>
34 |   </div>
35 | </Layout>
36 | 


--------------------------------------------------------------------------------
/src/layouts/PastelLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css';
 3 | import config from '../configs/pastel-config.js';
 4 | import PostHog from '../components/PostHog.astro';
 5 | import Navbar from '../components/Navbar.astro';
 6 | 
 7 | export interface Props {
 8 |   title: string;
 9 | }
10 | 
11 | const { title } = Astro.props;
12 | ---
13 | 
14 | <!DOCTYPE html>
15 | <html lang="en">
16 |   <head>
17 |     <meta charset="UTF-8" />
18 |     <meta name="viewport" content="width=device-width" />
19 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
20 |     <meta name="generator" content={Astro.generator} />
21 |     <title>{title}</title>
22 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
23 |     <PostHog />
24 |   </head>
25 |   <body class="min-h-screen relative flex flex-col">
26 |     <div
27 |       class="absolute inset-0 bg-cover bg-center bg-no-repeat"
28 |       style={`background-color: ${config.background.color};`}
29 |     >
30 |       <div class="absolute inset-0 bg-slate-300 opacity-25"></div>
31 |     </div>
32 |     <Navbar />
33 |     <main class="relative z-10 flex-1">
34 |       <div class="container mx-auto px-4 py-8">
35 |         <slot/>
36 |       </div>
37 |     </main>
38 |   </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/src/pages/pastel.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../config.js';
 3 | 
 4 | import Layout from '../layouts/PastelLayout.astro';
 5 | import Profile from '../components/pastel/Profile.astro';
 6 | import SocialLinks from '../components/pastel/SocialLinks.astro';
 7 | import LinkButton from '../components/pastel/LinkButton.astro';
 8 | import ProductLink from '../components/pastel/ProductLink.astro';
 9 | ---
10 | 
11 | <Layout title={`${config.user.name} - Link in Bio`}>
12 |   <div class="mx-auto px-4 py-8 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
13 |     <main class="container mx-auto">
14 |       <Profile />
15 |       <SocialLinks />
16 |       <div class="space-y-4 mt-6">
17 |         {config.links.map((link) => (
18 |           <LinkButton title={link.title} url={link.url} icon={link.icon} />
19 |         ))}
20 |       </div>
21 |       <div class="space-y-4 mt-6">
22 |         {config.products.map((product) => (
23 |           <ProductLink
24 |             title={product.title}
25 |             description={product.description}
26 |             url={product.url}
27 |             price={product.price}
28 |             includePriceOnSite={product.includePriceOnSite}
29 |             image={product.image}
30 |           />
31 |         ))}
32 |       </div>
33 |     </main>
34 |   </div>
35 | </Layout>
36 | 


--------------------------------------------------------------------------------
/src/components/modern/ProductLink.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../../config.js';
 3 | 
 4 | interface Props {
 5 |   product: {
 6 |     title: string;
 7 |     description: string;
 8 |     url: string;
 9 |     price: number;
10 |     includePriceOnSite: boolean;
11 |     image: string;
12 |   };
13 | }
14 | 
15 | const { product } = Astro.props;
16 | ---
17 | 
18 | <a
19 |   href={product.url}
20 |   class="block w-full max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-200 overflow-hidden mb-6 group"
21 | >
22 |   <div class="relative overflow-hidden">
23 |     <img
24 |       src={product.image}
25 |       alt={product.title}
26 |       class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-200"
27 |     />
28 |     {product.includePriceOnSite && (
29 |       <div class="absolute top-4 right-4 bg-black/75 text-white px-3 py-1 rounded-full text-sm font-medium transform group-hover:scale-110 transition-transform duration-200">
30 |         ${product.price}
31 |       </div>
32 |     )}
33 |   </div>
34 |   <div class="p-6">
35 |     <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
36 |       {product.title}
37 |     </h3>
38 |     <p class="text-gray-600 dark:text-gray-300">
39 |       {product.description}
40 |     </p>
41 |   </div>
42 | </a>
43 | 


--------------------------------------------------------------------------------
/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css';
 3 | import config from '../../config.js';
 4 | import PostHog from '../components/PostHog.astro';
 5 | import Navbar from '../components/Navbar.astro';
 6 | 
 7 | export interface Props {
 8 |   title: string;
 9 | }
10 | 
11 | const { title } = Astro.props;
12 | ---
13 | 
14 | <!DOCTYPE html>
15 | <html lang="en">
16 |   <head>
17 |     <meta charset="UTF-8" />
18 |     <meta name="viewport" content="width=device-width" />
19 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
20 |     <meta name="generator" content={Astro.generator} />
21 |     <title>{title}</title>
22 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
23 |     <PostHog />
24 |   </head>
25 |   <body
26 |     class="min-h-screen flex flex-col"
27 |     style={`
28 |       background-color: ${config.background.color};
29 |       background-image: url(${config.background.image});
30 |       background-size: cover; /* This will make the image cover the entire background */
31 |       background-repeat: no-repeat; /* This will prevent the image from repeating */
32 |       background-position: center center; /* This will center the image */
33 |     `}
34 |   >
35 |     <Navbar />
36 |     <main class="flex-1">
37 |       <slot />
38 |     </main>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/components/Navbar.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const currentPath = Astro.url.pathname;
 3 | ---
 4 | 
 5 | <nav class="bg-white/90 backdrop-blur-sm shadow-md w-full py-3 px-4">
 6 |   <div class="max-w-7xl mx-auto flex justify-between items-center">
 7 |     <div class="text-gray-800 font-bold">Link in Bio</div>
 8 |     <div class="relative group">
 9 |       <select
10 |         id="themeSelect"
11 |         class="bg-white text-gray-800 font-semibold py-2 px-4 rounded border border-gray-200 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none cursor-pointer pr-8"
12 |         onchange="window.location.href = this.value"
13 |       >
14 |         <option value="/" selected={currentPath === "/"}>Default Theme</option>
15 |         <option value="/pastel" selected={currentPath === "/pastel"}>Pastel Theme</option>
16 |         <option value="/modern" selected={currentPath === "/modern"}>Modern Theme</option>
17 |         <option value="/retro" selected={currentPath === "/retro"}>Retro Theme</option>
18 |       </select>
19 |       <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
20 |         <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
21 |           <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
22 |         </svg>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </nav>
27 | 


--------------------------------------------------------------------------------
/src/layouts/ModernLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css';
 3 | import config from '../configs/modern-config.js';
 4 | import PostHog from '../components/PostHog.astro';
 5 | import Navbar from '../components/Navbar.astro';
 6 | import ThemeToggle from '../components/modern/ThemeToggle.astro';
 7 | 
 8 | export interface Props {
 9 |   title: string;
10 | }
11 | 
12 | const { title } = Astro.props;
13 | ---
14 | 
15 | <!DOCTYPE html>
16 | <html lang="en">
17 |   <head>
18 |     <meta charset="UTF-8" />
19 |     <meta name="viewport" content="width=device-width" />
20 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
21 |     <meta name="generator" content={Astro.generator} />
22 |     <title>{title}</title>
23 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
24 |     <PostHog />
25 |   </head>
26 |   <body class="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
27 |     <Navbar />
28 |     <ThemeToggle />
29 |     <main class="container mx-auto px-4 py-8">
30 |       <div class="max-w-4xl mx-auto">
31 |         <slot />
32 |       </div>
33 |     </main>
34 |   </body>
35 | </html>
36 | 
37 | <script is:inline>
38 |   // Initialize dark mode on page load
39 |   const savedTheme = localStorage.getItem('theme');
40 |   if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
41 |     document.documentElement.classList.add('dark');
42 |   }
43 | </script>
44 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   content: [
 3 |     "./src/**/*.{astro,js,jsx,ts,tsx}",
 4 |   ],
 5 |   darkMode: 'class',
 6 |   theme: {
 7 |     extend: {
 8 |       keyframes: {
 9 |         wiggle: {
10 |           '0%, 100%': {
11 |             transform: 'rotate(-3deg)'
12 |           },
13 |           '50%': {
14 |             transform: 'rotate(3deg)'
15 |           },
16 |         }
17 |       },
18 |       animation: {
19 |         wiggle: 'wiggle 1s ease-in-out infinite',
20 |       },
21 |       colors: {
22 |         'pastel-pink': '#ffcdd2',
23 |         'pastel-purple': '#e1bee7',
24 |         'pastel-blue': '#bbdefb',
25 |         'pastel-green': '#c8e6c9',
26 |         'pastel-yellow': '#fff9c4',
27 |         'retro-yellow': '#FFE800',
28 |         'retro-pink': '#FF00FF',
29 |         'retro-cyan': '#00FFFF',
30 |         'retro-green': '#00FF00',
31 |         'retro-orange': '#FF8B00',
32 |         'retro-purple': '#9D00FF',
33 |       },
34 |       backgroundImage: {
35 |         'retro-grid': 'linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent)',
36 |       },
37 |     },
38 |   },
39 |   plugins: [],
40 | }
41 | 


--------------------------------------------------------------------------------
/src/configs/modern-config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   user: {
 3 |     name: "Cory Trimm",
 4 |     bio: "Serial builder of things - software, hardware, and everything in between. This is my little link in bio project built with Astro and Tailwind.",
 5 |     profileImage: "/src/images/profilepic.png"
 6 |   },
 7 |   background: {
 8 |     color: "#f9fafb",
 9 |     image: ""
10 |   },
11 |   socialLinks: [
12 |     {
13 |       platform: "instagram",
14 |       url: "#",
15 |     },
16 |     {
17 |       platform: "threads",
18 |       url: "#",
19 |     },
20 |     {
21 |       platform: "linkedin",
22 |       url: "#",
23 |     },
24 |     {
25 |       platform: "spotify",
26 |       url: "#",
27 |     },
28 |     {
29 |       platform: "snapchat",
30 |       url: "#",
31 |     },
32 |     {
33 |       platform: "tiktok",
34 |       url: "#",
35 |     }
36 |   ],
37 |   links: [
38 |     {
39 |       title: "Building a Modern Link in Bio with Astro",
40 |       url: "#",
41 |       icon: "newspaper"
42 |     },
43 |     {
44 |       title: "Use This Template",
45 |       url: "#",
46 |       icon: "code"
47 |     },
48 |     {
49 |       title: "My Personal Web Site",
50 |       url: "#",
51 |       icon: "globe"
52 |     }
53 |   ],
54 |   products: [
55 |     {
56 |       title: "My YouTube Channel",
57 |       description: "Check out my latest videos on software development, hardware projects, and more!",
58 |       url: "#",
59 |       price: 0,
60 |       includePriceOnSite: false,
61 |       image: "/src/images/product1.png"
62 |     }
63 |   ]
64 | };
65 | 


--------------------------------------------------------------------------------
/src/components/PostHog.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | // src/components/PostHog.astro
 3 | import { analytics } from '../../config.js';
 4 | ---
 5 | 
 6 | {analytics.posthog.enableTracking && (
 7 |   <script is:inline>
 8 |     !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
 9 |     posthog.init(
10 |     'phc_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // update this with your PostHog project token
11 |       {
12 |         api_host: 'https://us.i.posthog.com', // or a self hosted address
13 |         person_profiles: 'identified_only'
14 |       }
15 |     )
16 |   </script>
17 | )}
18 | 


--------------------------------------------------------------------------------
/src/configs/retro-config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   user: {
 3 |     name: "Cory Trimm",
 4 |     bio: "Serial builder of things - software, hardware, and everything in between. This is my little link in bio project built with Astro and Tailwind.",
 5 |     profileImage: "/src/images/profilepic.png"
 6 |   },
 7 |   background: {
 8 |     color: "#000000",
 9 |     image: "",
10 |     pattern: "retro-grid"
11 |   },
12 |   theme: {
13 |     primary: "retro-yellow",
14 |     secondary: "retro-pink",
15 |     accent: "retro-cyan"
16 |   },
17 |   socialLinks: [
18 |     {
19 |       platform: "instagram",
20 |       url: "#",
21 |       color: "retro-pink"
22 |     },
23 |     {
24 |       platform: "threads",
25 |       url: "#",
26 |       color: "retro-cyan"
27 |     },
28 |     {
29 |       platform: "linkedin",
30 |       url: "#",
31 |       color: "retro-green"
32 |     },
33 |     {
34 |       platform: "spotify",
35 |       url: "#",
36 |       color: "retro-purple"
37 |     },
38 |     {
39 |       platform: "snapchat",
40 |       url: "#",
41 |       color: "retro-yellow"
42 |     },
43 |     {
44 |       platform: "tiktok",
45 |       url: "#",
46 |       color: "retro-orange"
47 |     }
48 |   ],
49 |   links: [
50 |     {
51 |       title: "Check Out My Blog",
52 |       url: "#",
53 |       icon: "newspaper",
54 |       color: "retro-green"
55 |     },
56 |     {
57 |       title: "Use This Template",
58 |       url: "#",
59 |       icon: "code",
60 |       color: "retro-orange"
61 |     },
62 |     {
63 |       title: "My Personal Web Site",
64 |       url: "#",
65 |       icon: "globe",
66 |       color: "retro-purple"
67 |     }
68 |   ],
69 |   products: [
70 |     {
71 |       title: "My YouTube Channel",
72 |       description: "Check out my latest videos on software development, hardware projects, and more!",
73 |       url: "#",
74 |       price: 0,
75 |       includePriceOnSite: false,
76 |       image: "/src/images/product1.png",
77 |       color: "retro-pink"
78 |     }
79 |   ]
80 | };
81 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Link in Bio Astro Theme
 2 | 
 3 | This is a customizable Link in Bio theme built with [Astro](https://astro.build) and [TailwindCSS](https://tailwindcss.com).
 4 | 
 5 | [Live Preview Here](https://lib.corytrimm.com/)
 6 | 
 7 | ## Preview
 8 | 
 9 | ![Preview screenshot](./preview.png)
10 | 
11 | ## Getting Started
12 | 
13 | 1. Clone this repository
14 | 2. Run `npm install`
15 | 3. Run `npm run dev` to start the development server
16 | 
17 | ## Customization
18 | 
19 | ### Updating User Information
20 | 
21 | To update your information, edit the `config.js` file in the root directory. You can modify the following:
22 | 
23 | - User details (name, bio, profile image)
24 | - Background color and image
25 | - Social links
26 | - Custom links
27 | - Products
28 | 
29 | ### Changing Profile Photo
30 | 
31 | 1. Add your profile photo to the `/src/images/` directory
32 | 2. Update the `profileImage` path in `config.js`
33 | 
34 | **Note** - You can create a notion like [profile photo here](https://www.avatartion.com/)
35 | 
36 | ### Changing Background
37 | 
38 | 1. To change the background color, update the `background.color` value in `config.js`
39 | 2. To use a background image, add the image to `src/images/backgrounds/` and update the `background.image` path in `config.js`
40 | 
41 | **NOTE** - I've added a few sample background that you can use for free in the `src/images/backgrounds/*` folder.
42 | 
43 | ### Changing Icons
44 | 
45 | 1. Search the [Font Awesome website](https://fontawesome.com/) for a free icon name
46 | 2. Update whatever you would like in the `config.js` file
47 | 
48 | ### Ordering Content
49 | 
50 | The order of links and products is determined by their order in the `config.js` file. To change the order, simply rearrange the items in the `links` and `products` arrays.
51 | 
52 | ## Building for Production
53 | 
54 | Run `npm run build` to create a production-ready build of your site.
55 | 
56 | ## Deploy
57 | 
58 | You can deploy this site to any static site hosting platform. We recommend using [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/) for easy deployment.
59 | 


--------------------------------------------------------------------------------
/src/components/retro/Profile.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import config from '../../configs/retro-config.js';
 3 | 
 4 | // Add keyframe animations to the global styles
 5 | const animations = `
 6 |   @keyframes float {
 7 |     0%, 100% { transform: translateY(0); }
 8 |     50% { transform: translateY(-10px); }
 9 |   }
10 |   @keyframes glow {
11 |     0%, 100% { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00ffff; }
12 |     50% { text-shadow: 0 0 20px #fff, 0 0 30px #ff00ff, 0 0 40px #ff00ff; }
13 |   }
14 |   @keyframes spin {
15 |     from { transform: rotate(0deg); }
16 |     to { transform: rotate(360deg); }
17 |   }
18 | `;
19 | ---
20 | 
21 | <style set:html={animations}></style>
22 | 
23 | <div class="flex flex-col items-center space-y-6 p-8 relative">
24 |   <!-- Decorative elements -->
25 |   <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
26 |     <div class="absolute top-4 left-4 w-8 h-8 border-4 border-retro-yellow animate-[spin_4s_linear_infinite]"></div>
27 |     <div class="absolute bottom-4 right-4 w-8 h-8 border-4 border-retro-pink animate-[spin_4s_linear_infinite_reverse]"></div>
28 |     <div class="absolute top-4 right-4 w-4 h-4 bg-retro-cyan animate-[float_2s_ease-in-out_infinite]"></div>
29 |     <div class="absolute bottom-4 left-4 w-4 h-4 bg-retro-green animate-[float_2s_ease-in-out_infinite_reverse]"></div>
30 |   </div>
31 | 
32 |   <!-- Profile Image -->
33 |   <div class="relative">
34 |     <div class="absolute inset-0 bg-gradient-to-r from-retro-pink via-retro-yellow to-retro-cyan rounded-full animate-[spin_10s_linear_infinite] opacity-75"></div>
35 |     <img
36 |       src={config.user.profileImage}
37 |       alt="Profile"
38 |       class="w-32 h-32 rounded-full border-4 border-white relative animate-[float_3s_ease-in-out_infinite]"
39 |     />
40 |   </div>
41 | 
42 |   <!-- Name and Bio -->
43 |   <div class="text-center z-10">
44 |     <h1 class="text-4xl font-bold text-retro-yellow mb-2 animate-[glow_2s_ease-in-out_infinite]">
45 |       {config.user.name}
46 |     </h1>
47 |     <p class="text-xl text-white mb-4">
48 |       <span class="bg-retro-pink px-2">Software</span>
49 |       <span class="bg-retro-cyan px-2 mx-1">Engineer</span>
50 |     </p>
51 |     <p class="text-white max-w-md mx-auto leading-relaxed">
52 |       {config.user.bio}
53 |     </p>
54 |   </div>
55 | </div>
56 | 


--------------------------------------------------------------------------------
/src/layouts/RetroLayout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import '../styles/global.css';
 3 | import PostHog from '../components/PostHog.astro';
 4 | import Navbar from '../components/Navbar.astro';
 5 | 
 6 | export interface Props {
 7 |   title: string;
 8 | }
 9 | 
10 | const { title } = Astro.props;
11 | 
12 | ---
13 | ---
14 | 
15 | <!DOCTYPE html>
16 | <html lang="en">
17 |   <head>
18 |     <meta charset="UTF-8" />
19 |     <meta name="viewport" content="width=device-width" />
20 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
21 |     <meta name="generator" content={Astro.generator} />
22 |     <title>{title}</title>
23 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
24 |     <PostHog />
25 |   </head>
26 |   <body class="min-h-screen bg-black">
27 |     <!-- Static grid background -->
28 |     <div class="fixed inset-0 bg-retro-grid" style="background-size: 50px 50px;"></div>
29 | 
30 |     <!-- Spotlight effect -->
31 |     <div id="spotlight" class="fixed inset-0 pointer-events-none opacity-0 transition-opacity duration-300"></div>
32 | 
33 |     <Navbar />
34 |     <main class="relative z-10">
35 |       <div class="max-w-4xl mx-auto px-4">
36 |         <slot />
37 |       </div>
38 |     </main>
39 | 
40 |     <!-- Retro corner decorations -->
41 |     <div class="fixed top-0 left-0 w-16 h-16 border-t-4 border-l-4 border-retro-cyan"></div>
42 |     <div class="fixed top-0 right-0 w-16 h-16 border-t-4 border-r-4 border-retro-pink"></div>
43 |     <div class="fixed bottom-0 left-0 w-16 h-16 border-b-4 border-l-4 border-retro-yellow"></div>
44 |     <div class="fixed bottom-0 right-0 w-16 h-16 border-b-4 border-r-4 border-retro-green"></div>
45 | 
46 |     <script>
47 |       const spotlight = document.getElementById('spotlight');
48 |       if (spotlight) {
49 |         document.addEventListener('mousemove', (e) => {
50 |           const x = e.clientX;
51 |           const y = e.clientY;
52 |           
53 |           spotlight.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 15%, transparent 60%)`;
54 |           spotlight.style.opacity = '1';
55 |         });
56 | 
57 |         document.addEventListener('mouseleave', () => {
58 |           spotlight.style.opacity = '0';
59 |         });
60 |       }
61 |     </script>
62 |   </body>
63 | </html>
64 | 


--------------------------------------------------------------------------------
/src/components/retro/ProductLink.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 |   product: {
 4 |     title: string;
 5 |     description: string;
 6 |     url: string;
 7 |     price: number;
 8 |     includePriceOnSite: boolean;
 9 |     image: string;
10 |     color: string;
11 |   };
12 | }
13 | 
14 | const { product } = Astro.props;
15 | 
16 | const animations = `
17 |   @keyframes glitch {
18 |     0% { transform: translate(0); }
19 |     20% { transform: translate(-2px, 2px); }
20 |     40% { transform: translate(-2px, -2px); }
21 |     60% { transform: translate(2px, 2px); }
22 |     80% { transform: translate(2px, -2px); }
23 |     100% { transform: translate(0); }
24 |   }
25 | `;
26 | ---
27 | 
28 | <style set:html={animations}></style>
29 | 
30 | <a
31 |   href={product.url}
32 |   class="block w-full max-w-md mx-auto mb-8 group relative"
33 | >
34 |   <div class={`bg-${product.color} rounded-lg overflow-hidden relative`}>
35 |     <!-- Static border effect -->
36 |     <div class="absolute inset-0 rounded-lg border-2 border-white opacity-50"></div>
37 | 
38 |     <!-- Image container -->
39 |     <div class="relative overflow-hidden">
40 |       <img
41 |         src={product.image}
42 |         alt={product.title}
43 |         class="w-full h-48 object-cover transform transition-transform duration-300 group-hover:scale-110"
44 |       />
45 |       {product.includePriceOnSite && (
46 |         <div class="absolute top-4 right-4 bg-black text-retro-yellow px-4 py-2 rounded-full font-bold transform -rotate-12 group-hover:rotate-0 transition-transform duration-300 group-hover:animate-[glitch_0.3s_ease-in-out_infinite]">
47 |           ${product.price}
48 |         </div>
49 |       )}
50 |     </div>
51 | 
52 |     <!-- Content -->
53 |     <div class="p-6 relative z-10">
54 |       <h3 class="text-2xl font-bold text-black mb-2 group-hover:animate-[glitch_0.3s_ease-in-out]">
55 |         {product.title}
56 |       </h3>
57 |       <p class="text-black/80">
58 |         {product.description}
59 |       </p>
60 | 
61 |       <!-- Retro decorative elements -->
62 |       <div class="absolute bottom-2 right-2">
63 |         <div class="flex gap-1">
64 |           {Array.from({ length: 3 }).map(() => (
65 |             <div class="w-2 h-2 bg-white animate-[blink_1s_ease-in-out_infinite]"></div>
66 |           ))}
67 |         </div>
68 |       </div>
69 |     </div>
70 |   </div>
71 | </a>
72 | 


--------------------------------------------------------------------------------
/src/components/modern/ThemeToggle.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | ---
 3 | 
 4 | <button
 5 |   id="theme-toggle"
 6 |   class="fixed top-4 right-4 p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors duration-200"
 7 |   aria-label="Toggle theme"
 8 | >
 9 |   <svg
10 |     id="sun-icon"
11 |     class="w-6 h-6 hidden"
12 |     fill="none"
13 |     stroke="currentColor"
14 |     viewBox="0 0 24 24"
15 |     xmlns="http://www.w3.org/2000/svg"
16 |   >
17 |     <path
18 |       stroke-linecap="round"
19 |       stroke-linejoin="round"
20 |       stroke-width="2"
21 |       d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
22 |     />
23 |   </svg>
24 |   <svg
25 |     id="moon-icon"
26 |     class="w-6 h-6 hidden"
27 |     fill="none"
28 |     stroke="currentColor"
29 |     viewBox="0 0 24 24"
30 |     xmlns="http://www.w3.org/2000/svg"
31 |   >
32 |     <path
33 |       stroke-linecap="round"
34 |       stroke-linejoin="round"
35 |       stroke-width="2"
36 |       d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
37 |     />
38 |   </svg>
39 | </button>
40 | 
41 | <script>
42 |   const themeToggle = document.getElementById('theme-toggle');
43 |   const sunIcon = document.getElementById('sun-icon');
44 |   const moonIcon = document.getElementById('moon-icon');
45 | 
46 |   // Function to set the theme and update icons
47 |   function setTheme(isDark: boolean) {
48 |     if (isDark) {
49 |       document.documentElement.classList.add('dark');
50 |       sunIcon?.classList.remove('hidden');
51 |       moonIcon?.classList.add('hidden');
52 |     } else {
53 |       document.documentElement.classList.remove('dark');
54 |       sunIcon?.classList.add('hidden');
55 |       moonIcon?.classList.remove('hidden');
56 |     }
57 |     localStorage.setItem('theme', isDark ? 'dark' : 'light');
58 |   }
59 | 
60 |   // Initialize theme based on localStorage or system preference
61 |   const savedTheme = localStorage.getItem('theme');
62 |   if (savedTheme) {
63 |     setTheme(savedTheme === 'dark');
64 |   } else {
65 |     setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
66 |   }
67 | 
68 |   // Toggle theme on button click
69 |   themeToggle?.addEventListener('click', () => {
70 |     const isDark = document.documentElement.classList.contains('dark');
71 |     setTheme(!isDark);
72 |   });
73 | </script>
74 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import profileImage from './src/images/profilepic.png?url';
 3 | import backgroundImage from './src/images/backgrounds/watercolor-blue-green.png?url';
 4 | import productImage from './src/images/product1.png?url';
 5 | 
 6 | /** @type {import('./src/types').SiteConfig} */
 7 | const config = {
 8 |   user: {
 9 |     name: "Cory Trimm",
10 |     bio: "Serial builder of things - software, hardware, and everything in between. This is my little link in bio project built with Astro and Tailwind.",
11 |     profileImage: profileImage,
12 |   },
13 |   background: {
14 |     color: "#f0f0f0",
15 |     image: backgroundImage,
16 |   },
17 |   socialLinks: [
18 |     {
19 |       platform: "instagram",
20 |       url: "https://instagram.com/journey.unknown",
21 |       icon: "camera-retro",
22 |     },
23 |     {
24 |       platform: "threads",
25 |       url: "https://threads.net/@journey.unknown",
26 |       icon: "threads",
27 |     },
28 |     {
29 |       platform: "linkedin",
30 |       url: "https://linkedin.com/in/cory-trimm",
31 |       icon: "linkedin",
32 |     },
33 |     {
34 |       platform: "spotify",
35 |       url: "https://spotify.com",
36 |       icon: "spotify",
37 |     },
38 |     {
39 |       platform: "snapchat",
40 |       url: "https://snapchat.com",
41 |       icon: "snapchaat",
42 |     },
43 |     {
44 |       platform: "tiktok",
45 |       url: "https://tiktok.com",
46 |       icon: "tiktok",
47 |     },
48 |     // Add more social links as needed
49 |     // Search for icons here - https://fontawesome.com/search
50 |   ],
51 |   links: [
52 |     {
53 |       title: "Use This Template",
54 |       url: "https://github.com/ctrimm/astro-link-in-bio-theme",
55 |       icon: "code",
56 |     },
57 |     {
58 |       title: "My Personal Web Site",
59 |       url: "https://corytrimm.com",
60 |       icon: "globe",
61 |     },
62 |     {
63 |       title: "Join My YouTube Channel",
64 |       url: "https://youtube.com/c/corytrimm",
65 |       icon: "play",
66 |     },
67 |     // Add more links as needed
68 |   ],
69 |   products: [
70 |     {
71 |       title: "Digital Product",
72 |       description: "Description of your digital product",
73 |       url: "https://inshortpod.com",
74 |       price: 19.99,
75 |       includePriceOnSite: true,
76 |       image: productImage,
77 |     },
78 |     // Add more products as needed
79 |   ],
80 | };
81 | 
82 | export const analytics = {
83 |   posthog: {
84 |     enableTracking: false
85 |   }
86 | };
87 | 
88 | export default config;
89 | 


--------------------------------------------------------------------------------
/src/configs/pastel-config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import profileImage from '../images/profilepic.png?url';
 3 | import backgroundImage from '../images/backgrounds/watercolor-orange-centered.png?url';
 4 | import productImage from '../images/product1.png?url';
 5 | 
 6 | /** @type {import('../types').SiteConfig} */
 7 | const config = {
 8 |   user: {
 9 |     name: "Cory Trimm",
10 |     bio: "Serial builder of things - software, hardware, and everything in between. This is my little link in bio project built with Astro and Tailwind.",
11 |     profileImage: profileImage,
12 |   },
13 |   background: {
14 |     color: "#000000",
15 |     image: backgroundImage,
16 |   },
17 |   socialLinks: [
18 |     {
19 |       platform: "instagram",
20 |       url: "https://instagram.com/journey.unknown",
21 |       icon: "camera-retro",
22 |     },
23 |     {
24 |       platform: "threads",
25 |       url: "https://threads.net/@journey.unknown",
26 |       icon: "threads",
27 |     },
28 |     {
29 |       platform: "linkedin",
30 |       url: "https://linkedin.com/in/cory-trimm",
31 |       icon: "linkedin",
32 |     },
33 |     {
34 |       platform: "spotify",
35 |       url: "https://spotify.com",
36 |       icon: "spotify",
37 |     },
38 |     {
39 |       platform: "snapchat",
40 |       url: "https://snapchat.com",
41 |       icon: "snapchaat",
42 |     },
43 |     {
44 |       platform: "tiktok",
45 |       url: "https://tiktok.com",
46 |       icon: "tiktok",
47 |     },
48 |     // Add more social links as needed
49 |     // Search for icons here - https://fontawesome.com/search
50 |   ],
51 |   links: [
52 |     {
53 |       title: "Use This Template",
54 |       url: "https://github.com/ctrimm/astro-link-in-bio-theme",
55 |       icon: "code",
56 |     },
57 |     {
58 |       title: "My Personal Web Site",
59 |       url: "https://corytrimm.com",
60 |       icon: "globe",
61 |     },
62 |     {
63 |       title: "Join My YouTube Channel",
64 |       url: "https://youtube.com/c/corytrimm",
65 |       icon: "play",
66 |     },
67 |     // Add more links as needed
68 |   ],
69 |   products: [
70 |     {
71 |       title: "Digital Product",
72 |       description: "Description of your digital product",
73 |       url: "https://inshortpod.com",
74 |       price: 19.99,
75 |       includePriceOnSite: true,
76 |       image: productImage,
77 |     },
78 |     // Add more products as needed
79 |   ],
80 | };
81 | 
82 | export const analytics = {
83 |   posthog: {
84 |     enableTracking: false
85 |   }
86 | };
87 | 
88 | export default config;
89 | 


--------------------------------------------------------------------------------
/src/components/retro/LinkCard.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 |   link: {
 4 |     title: string;
 5 |     url: string;
 6 |     icon?: string;
 7 |     color: string;
 8 |   };
 9 | }
10 | 
11 | const { link } = Astro.props;
12 | 
13 | const animations = `
14 |   @keyframes blink {
15 |     0%, 100% { opacity: 1; }
16 |     50% { opacity: 0.5; }
17 |   }
18 |   @keyframes marquee {
19 |     0% { transform: translateX(0); }
20 |     100% { transform: translateX(-100%); }
21 |   }
22 | `;
23 | ---
24 | 
25 | <style set:html={animations}></style>
26 | 
27 | <a
28 |   href={link.url}
29 |   class={`block w-full max-w-md mx-auto mb-6 group relative overflow-hidden`}
30 | >
31 |   <!-- Background with animated pattern -->
32 |   <div class={`bg-${link.color} p-6 rounded transform transition-transform duration-300 group-hover:scale-105`}>
33 |     <!-- Retro decorative elements -->
34 |     <div class="absolute top-0 left-0 w-full h-1 bg-white opacity-50 animate-[blink_1s_ease-in-out_infinite]"></div>
35 |     <div class="absolute bottom-0 right-0 w-full h-1 bg-white opacity-50 animate-[blink_1s_ease-in-out_infinite_reverse]"></div>
36 |     <div class="absolute top-0 left-0 w-1 h-full bg-white opacity-50 animate-[blink_1s_ease-in-out_infinite]"></div>
37 |     <div class="absolute top-0 right-0 w-1 h-full bg-white opacity-50 animate-[blink_1s_ease-in-out_infinite_reverse]"></div>
38 | 
39 |     <div class="flex items-center relative z-10">
40 |       {link.icon && (
41 |         <i
42 |           class={`fas fa-${link.icon} text-2xl text-black mr-4 transform transition-transform duration-300 group-hover:scale-110 group-hover:rotate-12`}
43 |           aria-hidden="true"
44 |         />
45 |       )}
46 |       <div class="flex-1">
47 |         <h3 class="text-xl font-bold text-black relative overflow-hidden">
48 |           <span class="relative z-10 group-hover:animate-[marquee_2s_linear_infinite]">
49 |             {link.title}
50 |           </span>
51 |         </h3>
52 |       </div>
53 |       <div class="ml-4">
54 |         <div class="text-black text-xl transform transition-transform duration-300 group-hover:translate-x-2">
55 |           →
56 |         </div>
57 |       </div>
58 |     </div>
59 | 
60 |     <!-- Retro corner decorations -->
61 |     <div class="absolute top-0 left-0 border-t-4 border-l-4 border-white w-4 h-4"></div>
62 |     <div class="absolute top-0 right-0 border-t-4 border-r-4 border-white w-4 h-4"></div>
63 |     <div class="absolute bottom-0 left-0 border-b-4 border-l-4 border-white w-4 h-4"></div>
64 |     <div class="absolute bottom-0 right-0 border-b-4 border-r-4 border-white w-4 h-4"></div>
65 |   </div>
66 | </a>
67 | 


--------------------------------------------------------------------------------