Modern, accessibility (a11y), and customizable React bio link (link in bio) theme.

Light Theme — Dark Theme

Note: Defined as two separate themes, not just a mode

• Built with Vite + React + TypeScript
• Modular and reusable React/TSX components
• Modular CSS (BEM), centralized configuration, and reusable components
• Atomic CSS architecture & simple design system
• SCSS-based, fully customizable theme and styles
• Light and Dark (defined as two separate themes, not just a mode)
• Fully accessible (a11y)
• Comprehensive test setup with Vitest
• Code quality with ESLint, Stylelint, and Prettier
• One-command Netlify deploy (optional)

This project comes with a simple design system and atomic CSS architecture. Thanks to the atomic CSS approach, you can easily create your own bio link themes with small, reusable classes. All core visual building blocks are designed to be customizable and extendable with SCSS.

You can easily change font families, font sizes, and theme colors to create your own design.

You can edit and view atomic CSS structures using the following SCSS configuration files:

• src/assets/scss/config/_theme-colors.config.scss
• src/assets/scss/config/_font-family.config.scss
• src/assets/scss/config/_font-size.config.scss

Linkly/
├── public/                # Static files
├── src/                   # Application source code
│   ├── components/        # React components
│   ├── assets/            # Images, fonts
│   ├── scss/              # SCSS styles
│   ├── config/            # Configuration files
│   └── types/             # TypeScript type definitions
├── package.json           # Project dependencies and scripts
├── vite.config.ts         # Vite configuration
├── LICENSE                # License (MIT)
└── README.md              # Project documentation

1. Clone the repository:

   git clone https://github.com/keremzor/Linkly.git
   cd Linkly

2. Install:

   npm install
   # or
   yarn install

3. Edit src/config/app.config.ts according to your profile:

   You can easily update your profile info, links, and SEO settings in this file.

   export const appConfig = validateConfig({
     theme: THEMES.LIGHT,
     profile: {
       imageSrc: validateString('/avatar.webp'),
       title: validateString('Ronald Paul Andersen'),
       description: validateString('Frontend Developer & Designer — SF, CA'),
       links: [
         {
           type: LINK_TYPES.EMAIL,
           href: validateString('[email protected]'),
           label: validateString('Drop me a line for collaboration'),
         },
         {
           type: LINK_TYPES.PHONE,
           href: validateString('+10000000000'),
           label: validateString("Let's hop on a quick consultation call"),
         },
         {
           type: LINK_TYPES.CUSTOM,
           href: validateString('https://github.com/github'),
           label: validateString('Check out my GitHub projects'),
         },
         {
           type: LINK_TYPES.CUSTOM,
           href: validateString('https://example.com/'),
           label: validateString('Blog for CSS and JavaScript tips'),
         },
       ],
     },
     seo: {
       language: validateString('en'),
       websiteUrl: validateString('https://example.com'),
       title: validateString('Website Title'),
       description: validateString('Website description'),
       ogImage: validateString('https://example.com/og-image.png'),
       favicon: validateString('/favicon.png'),
     },
   } as const satisfies AppConfig);

4. Build the project:

   npm run build
   # or
   yarn build

5. Deploy for free on Netlify (Optional):

   This step is completely optional; you can quickly go live for free with Netlify.

   npm run deploy
   # or
   yarn deploy

To run all tests:

npm test
# or
yarn test
# or
npx vitest run

• For lint check: npm run lint or yarn lint
• For auto-fix: npm run lint:fix or yarn lint:fix
• For SCSS lint: npm run lint:css or yarn lint:css
• For TypeScript type check: npm run type-check or yarn type-check
• For automatic code formatting: npm run format or yarn format

For questions, collaborations, and everything else: [email protected]

Feel free to visit my blog, where I share insights and experiences on JavaScript and CSS tips, design-focused coding, UI development, and design systems: uiduck.com

This project is licensed under the MIT license.