Felix - Dev

Felix - Testing

Sat, 23 May 2026 00:00:00 GMT

Welcome to the Felix - Dev advanced customization guide! Since Felix - Dev is designed under pure minimalist aesthetics, the codebase is kept raw, transparent, and extremely easy to tweak. In this tutorial, we will show you how to update your biographical profile card, tweak key CSS properties inside the global design system, and customize the translation dictionaries.

👤 1. Editing Core Metadata: `src/config.ts`

To personalize your name, current role, short biography, and social links, open the file src/config.ts. This file exports three main configurations:

SITE_CONFIG

Defines your global website parameters:

title: Shown in browser tabs and page layout headers.
description: Used for default SEO metadata description.
url: The canonical root domain address where your blog is deployed.

AUTHOR

Maintains your profile card data:

name: Your full name.
role: Localized roles for Turkish (tr) and English (en).
bio: Localized short summaries rendered under your avatar image.
avatar: Path to your profile picture (placed in /public/, e.g., /profile.jpeg).

SOCIALS

A list of social accounts rendered as rounded floating icons in the desktop sidebar or mobile footer:

export const SOCIALS = [
  {
    label: 'GitHub',
    href: 'https://github.com/johndoe',
    icon: 'mdi:github',
  },
  // Add more links using the same schema structure
];

Note: Any Iconify code prefix (like mdi:) can be referenced to render custom SVGs automatically.

🎨 2. Customizing Themes and Color Schemes

Felix - Dev’s design is fully controlled by CSS variables inside src/styles/global.css. You can completely restyle the theme color scheme and typography by editing the values defined inside the :root pseudo-selector:

:root {
  /* Main Colors */
  --bg-color: #00022b;     /* Deep canvas background color */
  --dark: #010e54;         /* Accented panels & container backdrops */
  --accent: #0855b1;       /* Primary link text, borders, and buttons */
  --light: #4fa5d8;        /* Hover effects, dynamic titles & bright cues */
  --text-color: #daeaff;   /* Softer tinted shade ensuring text readability */

  /* Typography */
  --font-family-body: 'Source Sans 3', sans-serif;
  --font-family-heading: 'Source Sans 3', sans-serif;

  /* Layout Widths */
  --site-width: 80%;       /* Global responsiveness container width constraint */
  --content-padding: 2rem;
}

Creating a Forest Green Theme:

For example, to transition the theme from a space-blue look into a dark forest theme, swap the color variables:

:root {
  --bg-color: #0d1a0d;
  --dark: #1b331b;
  --accent: #2e662e;
  --light: #66cc66;
  --text-color: #e2f2e2;
}

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`

All the UI-related static text fragments (such as navigations, “Published on” text, or the “Contents” sidebar title) are stored inside the src/i18n/ui.ts file.

To add or modify translation strings, look at the ui object:

export const ui = {
  zh: {
    'nav.home': 'Ana Sayfa',
    'toc.title': 'İçindekiler',
  },
  en: {
    'nav.home': 'Home',
    'toc.title': 'Contents',
  },
} as const;

Simply update the corresponding string values, or add new keys to adapt the dictionary according to your requirements.

Conclusion

Felix - Dev is built to remain out of your way and let your content shine. By leveraging the clean separation of src/config.ts, pure CSS tokens, and static dictionary keys, customizing your portfolio site is a matter of minutes.

Happy coding, and enjoy sharing your thoughts with the world!

Felix - Testing

Sat, 23 May 2026 00:00:00 GMT

👤 1. Editing Core Metadata: `src/config.ts`

To personalize your name, current role, short biography, and social links, open the file src/config.ts. This file exports three main configurations:

SITE_CONFIG

Defines your global website parameters:

title: Shown in browser tabs and page layout headers.
description: Used for default SEO metadata description.
url: The canonical root domain address where your blog is deployed.

AUTHOR

Maintains your profile card data:

name: Your full name.
role: Localized roles for Turkish (tr) and English (en).
bio: Localized short summaries rendered under your avatar image.
avatar: Path to your profile picture (placed in /public/, e.g., /profile.jpeg).

SOCIALS

A list of social accounts rendered as rounded floating icons in the desktop sidebar or mobile footer:

export const SOCIALS = [
  {
    label: 'GitHub',
    href: 'https://github.com/johndoe',
    icon: 'mdi:github',
  },
  // Add more links using the same schema structure
];

Note: Any Iconify code prefix (like mdi:) can be referenced to render custom SVGs automatically.

🎨 2. Customizing Themes and Color Schemes

:root {
  /* Main Colors */
  --bg-color: #00022b;     /* Deep canvas background color */
  --dark: #010e54;         /* Accented panels & container backdrops */
  --accent: #0855b1;       /* Primary link text, borders, and buttons */
  --light: #4fa5d8;        /* Hover effects, dynamic titles & bright cues */
  --text-color: #daeaff;   /* Softer tinted shade ensuring text readability */

  /* Typography */
  --font-family-body: 'Source Sans 3', sans-serif;
  --font-family-heading: 'Source Sans 3', sans-serif;

  /* Layout Widths */
  --site-width: 80%;       /* Global responsiveness container width constraint */
  --content-padding: 2rem;
}

Creating a Forest Green Theme:

For example, to transition the theme from a space-blue look into a dark forest theme, swap the color variables:

:root {
  --bg-color: #0d1a0d;
  --dark: #1b331b;
  --accent: #2e662e;
  --light: #66cc66;
  --text-color: #e2f2e2;
}

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`

All the UI-related static text fragments (such as navigations, “Published on” text, or the “Contents” sidebar title) are stored inside the src/i18n/ui.ts file.

To add or modify translation strings, look at the ui object:

export const ui = {
  zh: {
    'nav.home': 'Ana Sayfa',
    'toc.title': 'İçindekiler',
  },
  en: {
    'nav.home': 'Home',
    'toc.title': 'Contents',
  },
} as const;

Simply update the corresponding string values, or add new keys to adapt the dictionary according to your requirements.

Conclusion

Happy coding, and enjoy sharing your thoughts with the world!

Felix - Dev Theme: How to Write and Organize Content

Thu, 21 May 2026 00:00:00 GMT

One of Felix - Dev’s most powerful assets is its clean, out-of-the-box support for bilingual content management. This guide will walk you through the folder architecture of your posts, formatting your post metadata (frontmatter), and utilizing Felix - Dev’s smart language switcher to link Turkish and English posts.

📂 Content Directory Structure

All blog posts reside under the src/content/blog/ directory. Within this directory, articles are organized into localized subfolders:

src/content/blog/zh/ — Holds your Chinese articles.
src/content/blog/en/ — Holds your English articles.

Astro automatically parses all files ending with .md or .mdx inside these subfolders thanks to the content collection loader defined in src/content.config.ts.

📋 The Post Frontmatter Schema

Every markdown post must contain a metadata block at the very top, enclosed by triple dashes ---. Felix - Dev’s content collection schema enforces the following fields:

---
title: 'Your Article Title'
description: 'A brief description of your article.'
pubDate: '2026-05-17'
tags: ['tag1', 'tag2']
translationKey: 'unique-post-identifier'
---

Explaining the Fields:

title & description: Essential fields rendered at the top of the article and dynamically injected into the HTML <head> tag for optimal SEO indexation.
pubDate: The publication date. Felix - Dev uses this date to sort posts chronologically and group them dynamically by year inside the /archive/ page.
tags: An array of tags. Make sure to include felix-guide if you want them grouped under the theme guide archive.
translationKey: A custom unique text key linking the English and Turkish translations of the post together.

🌐 The Smart i18n Switching Mechanism

Felix - Dev implements an advanced routing system inside the header language navigation toggle. When a visitor is reading an English post and clicks “TR”, the theme does not simply bounce them to the Chinese home page.

Instead, it searches through your blog collection to find a Turkish post that shares the exact same translationKey value.

If an identical key is found: It seamlessly redirects the reader directly to the Chinese translation page.
If no matching key is found: It gracefully redirects the reader to the /zh/archive/ page.

Best Practice Example:

To write a post about minimalist design in both languages:

Create src/content/blog/zh/sadelik.md containing translationKey: 'simplicity-post'.
Create src/content/blog/en/simplicity.md containing translationKey: 'simplicity-post'.

With this configuration, readers can toggle back and forth between English and Turkish on the fly without ever losing their place.

Next Steps

Now that you know how to organize and draft posts, you are ready to adjust the design tokens, switch colors, and modify your social link matrices.

Read our final guide: Felix - Dev Theme: Advanced Customization & Colors to learn more.

Felix - Dev Theme: Testing

Thu, 21 May 2026 00:00:00 GMT

📂 Content Directory Structure

All blog posts reside under the src/content/blog/ directory. Within this directory, articles are organized into localized subfolders:

src/content/blog/zh/ — Holds your Chinese articles.
src/content/blog/en/ — Holds your English articles.

Astro automatically parses all files ending with .md or .mdx inside these subfolders thanks to the content collection loader defined in src/content.config.ts.

📋 The Post Frontmatter Schema

Every markdown post must contain a metadata block at the very top, enclosed by triple dashes ---. Felix - Dev’s content collection schema enforces the following fields:

---
title: 'Your Article Title'
description: 'A brief description of your article.'
pubDate: '2026-05-17'
tags: ['tag1', 'tag2']
translationKey: 'unique-post-identifier'
---

Explaining the Fields:

title & description: Essential fields rendered at the top of the article and dynamically injected into the HTML <head> tag for optimal SEO indexation.
pubDate: The publication date. Felix - Dev uses this date to sort posts chronologically and group them dynamically by year inside the /archive/ page.
tags: An array of tags. Make sure to include felix-guide if you want them grouped under the theme guide archive.
translationKey: A custom unique text key linking the English and Turkish translations of the post together.

🌐 The Smart i18n Switching Mechanism

Instead, it searches through your blog collection to find a Turkish post that shares the exact same translationKey value.

If an identical key is found: It seamlessly redirects the reader directly to the Chinese translation page.
If no matching key is found: It gracefully redirects the reader to the /zh/archive/ page.

Best Practice Example:

To write a post about minimalist design in both languages:

Create src/content/blog/zh/sadelik.md containing translationKey: 'simplicity-post'.
Create src/content/blog/en/simplicity.md containing translationKey: 'simplicity-post'.

With this configuration, readers can toggle back and forth between English and Turkish on the fly without ever losing their place.

Next Steps

Now that you know how to organize and draft posts, you are ready to adjust the design tokens, switch colors, and modify your social link matrices.

Read our final guide: Felix - Dev Theme: Advanced Customization & Colors to learn more.

Felix - testing again

Thu, 21 May 2026 00:00:00 GMT

📂 Content Directory Structure

All blog posts reside under the src/content/blog/ directory. Within this directory, articles are organized into localized subfolders:

src/content/blog/zh/ — Holds your Chinese articles.
src/content/blog/en/ — Holds your English articles.

Astro automatically parses all files ending with .md or .mdx inside these subfolders thanks to the content collection loader defined in src/content.config.ts.

📋 The Post Frontmatter Schema

Every markdown post must contain a metadata block at the very top, enclosed by triple dashes ---. Felix - Dev’s content collection schema enforces the following fields:

---
title: 'Your Article Title'
description: 'A brief description of your article.'
pubDate: '2026-05-17'
tags: ['tag1', 'tag2']
translationKey: 'unique-post-identifier'
---

Explaining the Fields:

title & description: Essential fields rendered at the top of the article and dynamically injected into the HTML <head> tag for optimal SEO indexation.
pubDate: The publication date. Felix - Dev uses this date to sort posts chronologically and group them dynamically by year inside the /archive/ page.
tags: An array of tags. Make sure to include felix-guide if you want them grouped under the theme guide archive.
translationKey: A custom unique text key linking the English and Turkish translations of the post together.

🌐 The Smart i18n Switching Mechanism

Instead, it searches through your blog collection to find a Turkish post that shares the exact same translationKey value.

If an identical key is found: It seamlessly redirects the reader directly to the Chinese translation page.
If no matching key is found: It gracefully redirects the reader to the /zh/archive/ page.

Best Practice Example:

To write a post about minimalist design in both languages:

Create src/content/blog/zh/sadelik.md containing translationKey: 'simplicity-post'.
Create src/content/blog/en/simplicity.md containing translationKey: 'simplicity-post'.

With this configuration, readers can toggle back and forth between English and Turkish on the fly without ever losing their place.

Next Steps

Now that you know how to organize and draft posts, you are ready to adjust the design tokens, switch colors, and modify your social link matrices.

Read our final guide: Felix - Dev Theme: Advanced Customization & Colors to learn more.

Felix - Dev Theme: Testing

Thu, 21 May 2026 00:00:00 GMT

📂 Content Directory Structure

All blog posts reside under the src/content/blog/ directory. Within this directory, articles are organized into localized subfolders:

src/content/blog/zh/ — Holds your Chinese articles.
src/content/blog/en/ — Holds your English articles.

Astro automatically parses all files ending with .md or .mdx inside these subfolders thanks to the content collection loader defined in src/content.config.ts.

📋 The Post Frontmatter Schema

Every markdown post must contain a metadata block at the very top, enclosed by triple dashes ---. Felix - Dev’s content collection schema enforces the following fields:

---
title: 'Your Article Title'
description: 'A brief description of your article.'
pubDate: '2026-05-17'
tags: ['tag1', 'tag2']
translationKey: 'unique-post-identifier'
---

Explaining the Fields:

title & description: Essential fields rendered at the top of the article and dynamically injected into the HTML <head> tag for optimal SEO indexation.
pubDate: The publication date. Felix - Dev uses this date to sort posts chronologically and group them dynamically by year inside the /archive/ page.
tags: An array of tags. Make sure to include felix-guide if you want them grouped under the theme guide archive.
translationKey: A custom unique text key linking the English and Turkish translations of the post together.

🌐 The Smart i18n Switching Mechanism

Instead, it searches through your blog collection to find a Turkish post that shares the exact same translationKey value.

If an identical key is found: It seamlessly redirects the reader directly to the Chinese translation page.
If no matching key is found: It gracefully redirects the reader to the /zh/archive/ page.

Best Practice Example:

To write a post about minimalist design in both languages:

Create src/content/blog/zh/sadelik.md containing translationKey: 'simplicity-post'.
Create src/content/blog/en/simplicity.md containing translationKey: 'simplicity-post'.

With this configuration, readers can toggle back and forth between English and Turkish on the fly without ever losing their place.

Next Steps

Now that you know how to organize and draft posts, you are ready to adjust the design tokens, switch colors, and modify your social link matrices.

Read our final guide: Felix - Dev Theme: Advanced Customization & Colors to learn more.

Felix - Testing again 2

Sun, 17 May 2026 00:00:00 GMT

Welcome to the Felix - Dev installation guide! Felix - Dev is a raw, flat minimalist Astro v6 theme built on the philosophy that simplicity is depth. In this guide, we will walk you through the process of deploying the project, installing the required dependencies, and starting the local development environment.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

Node.js: Version 22.12.0 or higher is recommended. You can verify your version by running:

  node --version

Git: Essential for deploying the project and managing your source code versions.

Step 1: Clone the Repository

To install Felix - Dev, you first need to clone the repository to your local directory. Open your terminal and run the following command:

git clone https://github.com/kuscadev/Felix - Dev.git

Once the cloning process is complete, navigate into the project directory:

cd Felix - Dev

Step 2: Install Project Dependencies

Felix - Dev uses lightweight dependencies like @astrojs/mdx for content rendering and astro-icon for flat SVG styling. Run the following command in the root folder of the project to install all required packages:

npm install

This command will read the package.json file and create the local node_modules folder.

Step 3: Run the Development Server

Now that the installation is complete, you can start Astro’s rapid local development server:

npm run dev

Your terminal will display the active local URL, which is usually:

  ┃ Local    http://localhost:4321/

Open your favorite web browser and navigate to http://localhost:4321/ to view your live, interactive minimalist environment! Any changes you make to the source code will update automatically in real-time.

Next Steps

Now that your Felix - Dev theme is successfully installed and running, you are ready to configure your profile details and write your first bilingual blog post.

Proceed to our next guide: Felix - Dev Theme: How to Write and Organize Content to learn more about the structure of content collections and dynamic i18n routing.

Felix - Dev Theme: Step-by-Step Installation Guide

Sun, 17 May 2026 00:00:00 GMT

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

Node.js: Version 22.12.0 or higher is recommended. You can verify your version by running:
```
node --version
```
Git: Essential for deploying the project and managing your source code versions.

Step 1: Clone the Repository

To install Felix - Dev, you first need to clone the repository to your local directory. Open your terminal and run the following command:

git clone https://github.com/kuscadev/Felix - Dev.git

Once the cloning process is complete, navigate into the project directory:

cd Felix - Dev

Step 2: Install Project Dependencies

npm install

This command will read the package.json file and create the local node_modules folder.

Step 3: Run the Development Server

Now that the installation is complete, you can start Astro’s rapid local development server:

npm run dev

Your terminal will display the active local URL, which is usually:

  ┃ Local    http://localhost:4321/

Next Steps

Now that your Felix - Dev theme is successfully installed and running, you are ready to configure your profile details and write your first bilingual blog post.

Proceed to our next guide: Felix - Dev Theme: How to Write and Organize Content to learn more about the structure of content collections and dynamic i18n routing.

Markdown testing 4

Sat, 10 May 2025 00:00:00 GMT

Markdown is a lightweight markup language that lets you create formatted documents using plain text. It’s the most natural way to produce content on Astro-based sites like Felix - Dev.

Headings

# H1 Heading
## H2 Heading
### H3 Heading

Text Formatting

Use double asterisks for bold text, single asterisks for italics, and double tildes for ~~strikethrough~~.

Use > for blockquotes. This is a great way to highlight important sentences you want readers to notice.

Lists

Unordered list:

First item
Second item
- Nested item
Third item

Ordered list:

Do this first
Then this
Finally this

Links and Images

Add links in the format Astro official site.

Code Blocks

Use backticks for inline code.

function felix() {
  return 'Simplicity is depth, not lack.';
}

Tables

Syntax	Description
`bold`	Bold text
`italic`	Italic text
`[text](url)`	Link

Markdown takes minutes to learn and a lifetime to appreciate.

Markdown testing 3

Sat, 10 May 2025 00:00:00 GMT

Markdown is a lightweight markup language that lets you create formatted documents using plain text. It’s the most natural way to produce content on Astro-based sites like Felix - Dev.

Headings

# H1 Heading
## H2 Heading
### H3 Heading

Text Formatting

Use double asterisks for bold text, single asterisks for italics, and double tildes for ~~strikethrough~~.

Use > for blockquotes. This is a great way to highlight important sentences you want readers to notice.

Lists

Unordered list:

First item
Second item
- Nested item
Third item

Ordered list:

Do this first
Then this
Finally this

Links and Images

Add links in the format Astro official site.

Code Blocks

Use backticks for inline code.

function felix() {
  return 'Simplicity is depth, not lack.';
}

Tables

Syntax	Description
`bold`	Bold text
`italic`	Italic text
`[text](url)`	Link

Markdown takes minutes to learn and a lifetime to appreciate.

Felix - Dev

Felix - Testing

👤 1. Editing Core Metadata: src/config.ts

SITE_CONFIG

AUTHOR

SOCIALS

🎨 2. Customizing Themes and Color Schemes

Creating a Forest Green Theme:

🗣️ 3. Modifying Dict Translations: src/i18n/ui.ts

Conclusion

Felix - Testing

👤 1. Editing Core Metadata: src/config.ts

SITE_CONFIG

AUTHOR

SOCIALS

🎨 2. Customizing Themes and Color Schemes

Creating a Forest Green Theme:

🗣️ 3. Modifying Dict Translations: src/i18n/ui.ts

Conclusion

Felix - Dev Theme: How to Write and Organize Content

📂 Content Directory Structure

📋 The Post Frontmatter Schema

Explaining the Fields:

🌐 The Smart i18n Switching Mechanism

Best Practice Example:

Next Steps

Felix - Dev Theme: Testing

📂 Content Directory Structure

📋 The Post Frontmatter Schema

Explaining the Fields:

🌐 The Smart i18n Switching Mechanism

Best Practice Example:

Next Steps

Felix - testing again

📂 Content Directory Structure

📋 The Post Frontmatter Schema

Explaining the Fields:

🌐 The Smart i18n Switching Mechanism

Best Practice Example:

Next Steps

Felix - Dev Theme: Testing

📂 Content Directory Structure

📋 The Post Frontmatter Schema

Explaining the Fields:

🌐 The Smart i18n Switching Mechanism

Best Practice Example:

Next Steps

Felix - Testing again 2

Prerequisites

Step 1: Clone the Repository

Step 2: Install Project Dependencies

Step 3: Run the Development Server

Next Steps

Felix - Dev Theme: Step-by-Step Installation Guide

Prerequisites

Step 1: Clone the Repository

Step 2: Install Project Dependencies

Step 3: Run the Development Server

Next Steps

Markdown testing 4

Headings

Text Formatting

Lists

Links and Images

Code Blocks

Tables

Markdown testing 3

Headings

Text Formatting

Lists

Links and Images

Code Blocks

Tables

👤 1. Editing Core Metadata: `src/config.ts`

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`

👤 1. Editing Core Metadata: `src/config.ts`

🗣️ 3. Modifying Dict Translations: `src/i18n/ui.ts`