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):

📁 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!