Astro Portfolio & Bilingual Blog Template

Welcome! This is a feature-rich Astro template designed to help you kickstart your personal portfolio and bilingual (French/English) blog. Built with Astro, TypeScript, and Tailwind CSS, it focuses on performance, clean code, and ease of customization.

This template is based on the personal portfolio of Bakate (https://www.bakateba.eu/).

✨ Key Features

• Portfolio Ready: Showcase your projects and achievements. (Content needs to be added by you!)
• Bilingual Blog: Pre-configured for technical articles in French and English using MDX. Comes with example posts.
• Modern & Clean Design: Sleek user interface powered by Tailwind CSS and shadcn/ui.
• Optimal Performance: Lightning-fast static site generated by Astro.
• Static Typing with TypeScript: For robust and maintainable code.
• Clean Code Principles: A strong focus on code quality and architecture.
• Responsive Design: Optimal user experience across all devices.
• Internationalization (i18n): Basic setup for UI translations.

🛠️ Tech Stack

• Framework: Astro
• Language: TypeScript
• Styling: Tailwind CSS & shadcn/ui
• Blog Content: MDX (with React components for interactivity)
• Package Manager: Bun (You can use npm, yarn, or pnpm if you prefer, just adapt the commands)

🚀 Getting Started

1. Use this template:

   • Click the "Use this template" button on GitHub to create your own repository.
   • Or, clone it directly:

     git clone YOUR_TEMPLATE_REPOSITORY_URL your-project-name # Replace YOUR_TEMPLATE_REPOSITORY_URL with the actual URL
     cd your-project-name

2. Install dependencies: (Using Bun by default)

   bun install

   If you prefer npm/yarn/pnpm:

   # npm install
   # yarn install
   # pnpm install

3. Start the development server:

   bun dev

   The site will be available at http://localhost:4321.

✍️ Adding Your Content

Blog Posts

1. Navigate to src/features/blog/content/.
2. Add your articles in Markdown (.md) or MDX (.mdx) format:
   • For English posts: src/features/blog/content/en/your-article-slug.mdx
   • For French posts: src/features/blog/content/fr/votre-slug-article.mdx
3. Edit the frontmatter of each post (title, description, pubDate, tags, heroImage, etc.). See example-post.mdx for a reference.
4. Place your blog post images in src/assets/blog/ or public/ and update the heroImage.url path accordingly.

Portfolio Projects

• The template includes a sample project. To add your own projects or modify the sample:
  • Define your project data in src/features/projects/service.ts (see the projectsData array).
  • Add corresponding translations (title, description, details, etc.) in src/i18n/ui.ts under the projectsContent section for each language.
  • Ensure project images (like imageUrl) are correctly imported as ImageMetadata objects in service.ts if using Astro's optimized images, or place them in public/ and use string paths.

Customization

• Tailwind CSS: Modify tailwind.config.mjs and src/styles/global.css (or other style files) to change the look and feel.
• Astro Components: Edit or create new components in src/components/ and src/features/**/components/.
• Layouts: Modify page layouts in src/layouts/.
• Internationalization (UI Texts): Update src/i18n/ui.ts with your translations.

🧞 Available Commands

All commands are run from the root of the project (using bun by default):

Command	Action
bun install	Installs project dependencies.
bun dev	Starts the local development server with hot-reloading.
bun build	Builds the site for production in the ./dist/ folder.
bun preview	Allows you to preview the production build locally.
bun astro ...	Executes Astro CLI commands (e.g., astro add, astro check).
npm run <cmd>	(If using npm, replace bun with npm run)

📁 Project Structure (Simplified for Users)

/
├── public/                   # Static assets (images, favicons, etc.) - Place your global images here
├── src/
│   ├── assets/               # Astro-managed assets (e.g., blog post images if optimized by Astro)
│   ├── components/           # Reusable Astro/React components for the whole site
│   ├── features/             # Main feature modules
│   │   └── blog/
│   │       ├── components/   # Blog-specific components (e.g., InfoAlert)
│   │       └── content/      # YOUR BLOG ARTICLES GO HERE (en/ and fr/ subfolders)
│   │       ├── layouts/      # Layouts for blog pages
│   │       └── ...           # Other blog-related files (types, screens)
│   │
│   │   └── projects/         # (Example) Portfolio projects feature - CUSTOMIZE THIS
│   │       └── ...
│   │
│   ├── i18n/                 # Internationalization configuration
│   │   └── ui.ts             # UI string translations
│   │
│   ├── layouts/              # Global Astro page layouts
│   ├── pages/                # Astro pages and routes (e.g., index.astro, about.astro)
│   └── styles/               # Global styles
│
├── astro.config.mjs          # Astro configuration
├── content.config.mjs        # Content configuration
├── tailwind.config.mjs       # Tailwind CSS configuration
└── package.json              # Project dependencies and scripts

👀 Want to learn more about Astro?

Feel free to check out the official Astro documentation or join their Discord server.

---

Happy coding! If you use this template, feel free to give credit or a star to the original repository!