AMEGOFY is a free and open-source template for your Personal Portfolio Website built with Astro v4 and TailwindCSS. Launch a professional, fully-featured site in minutes — complete with a Blog, CV, Projects, Services, Store, and RSS Feed.
- Blog — Markdown & MDX-powered posts with pagination and tag-based filtering
- CV / Resume — Interactive timeline component for experience and education history
- Projects — Showcased with rich card components (image, description, badges, tags)
- Services — Dedicated services page for freelance or agency offerings
- Store — Paginated shop items with pricing, old-price strikethrough, checkout URLs, and custom links
- RSS Feed — Auto-generated
/rss.xmlfor subscribers via@astrojs/rss - Sitemap — Auto-generated on every build via
@astrojs/sitemap - Custom 404 Page — Branded error page included out of the box
- 30+ Themes — Swap DaisyUI themes instantly or define your own
- View Transitions API — Smooth client-side page navigation (toggleable in config)
- Image Optimization — Sharp-powered processing for fast load times
- Typography Plugin —
@tailwindcss/typographyfor beautifully styled prose content - Auto Slug Generation — Slugs derived from post title or filename (configurable)
| Technology | Version | Purpose |
|---|---|---|
| Astro | v4 | Core framework & static site generation |
| TailwindCSS | v3 | Utility-first styling |
| DaisyUI | v4 | Component library & multi-theming |
| @astrojs/mdx | v2 | MDX support in content collections |
| @astrojs/rss | v3 | RSS feed generation |
| @astrojs/sitemap | v3 | Automatic sitemap generation |
| @tailwindcss/typography | latest | Prose / article styling |
| dayjs | latest | Lightweight date formatting |
| sharp | latest | Server-side image optimization |
| TypeScript | — | Type safety across the codebase |
pnpm installpnpm devOpen http://localhost:4321 in your browser to see the site live with hot-module reloading.
pnpm buildpnpm preview├── src/
│ ├── components/
│ │ ├── cv/
│ │ │ └── TimeLine.astro # CV timeline entries
│ │ ├── BaseHead.astro # <head> meta tags & SEO
│ │ ├── Card.astro
│ │ ├── Footer.astro
│ │ ├── Header.astro
│ │ ├── HorizontalCard.astro # Blog / project cards
│ │ ├── HorizontalShopItem.astro # Store item cards
│ │ ├── SideBar.astro
│ │ ├── SideBarMenu.astro # Navigation links
│ │ └── SideBarFooter.astro # Social icons
│ ├── content/
│ │ ├── blog/ # Markdown/MDX blog posts
│ │ ├── store/ # Store item markdown files
│ │ └── config.ts # Content collection schemas
│ ├── layouts/
│ │ ├── BaseLayout.astro # Global page wrapper
│ │ ├── PostLayout.astro # Blog post layout
│ │ └── StoreItemLayout.astro # Store item detail layout
│ ├── lib/
│ │ └── createSlug.ts # Slug generation utility
│ ├── pages/
│ │ ├── blog/
│ │ │ ├── tag/[tag]/[...page].astro # Tag-filtered post list
│ │ │ ├── [...page].astro # Paginated post list
│ │ │ └── [slug].astro # Individual post page
│ │ ├── store/
│ │ │ ├── [...page].astro # Paginated store listing
│ │ │ └── [slug].astro # Individual store item
│ │ ├── cv.astro
│ │ ├── index.astro
│ │ ├── projects.astro
│ │ ├── services.astro
│ │ ├── 404.astro
│ │ └── rss.xml.js
│ ├── styles/
│ │ └── global.css
│ └── config.ts # Global site configuration
├── public/
│ └── robots.txt
├── astro.config.mjs
├── tailwind.config.cjs
├── package.json
└── tsconfig.json
Edit /src/config.ts to control global site variables:
export const SITE_TITLE = 'Your Name | Portfolio';
export const SITE_DESCRIPTION = 'Your site description for SEO.';
export const GENERATE_SLUG_FROM_TITLE = true; // false = use filename as slug
export const TRANSITION_API = true; // toggle View Transitions APIAlso update the site URL in astro.config.mjs to match your domain:
export default defineConfig({
site: 'https://your-domain.com',
integrations: [mdx(), sitemap(), tailwind()],
});This template requires no environment variables for its core static functionality. If you extend it with external services (e.g., contact forms, CMS APIs, analytics), add a .env file at the project root:
# All client-exposed variables must be prefixed with PUBLIC_
PUBLIC_ANALYTICS_ID=your_analytics_id
# Server-side only (no PUBLIC_ prefix) — accessible only in .astro frontmatter
CMS_API_SECRET=your_secret_keyAstro only exposes variables prefixed with
PUBLIC_to the browser. Keep sensitive keys unprefixed and server-side only.
BaseHead, Footer, Header, and SideBar are already wired into the layout system. Edit those files to change global content and metadata.
Update your profile picture, page links, and social icons inside SideBar.astro. Change the avatar shape using DaisyUI mask classes. Social icons use SVGs from the BoxIcons pack — swap them in SideBarFooter.astro.
Add a new page link in SideBarMenu.astro:
<li><a class="py-3 text-base" id="services" href="/services">Services</a></li>To mark a link as active, pass the matching sideBarActiveItemID to BaseLayout on your page:
<BaseLayout sideBarActiveItemID="services"><div class="time-line-container">
<TimeLineElement title="Job Title" subtitle="Company · 2022–Present">
Description of your role, responsibilities, and key achievements.
</TimeLineElement>
</div>Used for blog posts and project showcases:
<HorizontalCard
title="Card Title"
img="image_url"
desc="Short description"
url="https://link.com"
target="_blank"
badge="NEW"
tags={['astro', 'tailwind']}
/>Used in the Store layout:
<HorizontalShopItem
title="Item Title"
img="image_url"
desc="Item description"
pricing="$15"
oldPricing="$25"
checkoutUrl="https://checkout.example.com/"
badge="SALE"
url="/store/item-slug"
custom_link="https://demo.example.com"
custom_link_label="View Demo"
target="_self"
/>Create a .astro file in /src/components/. Every Astro component follows this structure:
---
// Component Script — imports, props, JS logic
const { title } = Astro.props;
---
<!-- Component Template — HTML + JSX-like expressions -->
<div>{title}</div>See the Astro components docs for full details.
Create .md or .mdx files inside /src/content/blog/:
---
title: "Post Title"
description: "A short SEO description"
pubDate: "Jan 01 2024"
heroImage: "/images/hero.webp"
tags: ["astro", "webdev"]
---
Your post content here.Create .md files inside /src/content/store/:
---
title: "Item Name"
description: "Item description"
heroImage: "/images/item.webp"
pubDate: "Jan 01 2024"
pricing: "$15"
oldPricing: "$25"
badge: "Featured"
checkoutUrl: "https://checkout.example.com/"
custom_link_label: "View Demo"
custom_link: "https://demo.example.com"
details: true
---Use BaseLayout in every page you create, and PostLayout for blog post pages. StoreItemLayout is used automatically for store item detail pages.
Add new content types in /src/content/ and register their schema in /src/content/config.ts. See the Astro content collections guide for details.
Change the data-theme attribute in BaseLayout.astro to switch themes instantly:
<html lang="en" data-theme="dark">30+ built-in themes are available. Browse and preview them at daisyui.com/docs/themes.
The sitemap is auto-generated at build time. Update public/robots.txt with your actual domain:
User-agent: *
Allow: /
Sitemap: https://your-domain.com/sitemap-index.xml
Deploy to any static hosting platform:
| Platform | Guide |
|---|---|
| Vercel | Astro on Vercel |
| Netlify | Astro on Netlify |
| GitHub Pages | Astro on GitHub Pages |
⚠️ CAUTION Blog and Store pagination use dynamic route parameters ([...page].astro), which are incompatible with SSR deploy configurations. Always use the default static output mode for deployments.
Suggestions and pull requests are welcomed! Feel free to open a discussion or an issue for a new feature request or bug.
One of the best ways to contribute is to grab a bug report or feature suggestion marked accepted and dig in.
Please be wary of working on issues not marked as accepted — just because someone has created an issue doesn't mean we'll accept a pull request for it.
AMEGOFY is licensed under the MIT license — see the LICENSE file for details.
Made with Kareem Amged.
AMEGOFY هو قالب مجاني ومفتوح المصدر لإنشاء موقع محفظة أعمال شخصية مبني على Astro v4 وTailwindCSS. أطلق موقعك الاحترافي في دقائق — مع مدونة، سيرة ذاتية، مشاريع، خدمات، متجر، وخلاصة RSS.
- المدونة — مقالات مكتوبة بصيغة Markdown وMDX مع ترقيم الصفحات وتصفية بالوسوم
- السيرة الذاتية — مكوّن جدول زمني تفاعلي للخبرات والتعليم
- المشاريع — عرض احترافي ببطاقات غنية تتضمن صورة ووصفًا وشارات ووسومًا
- الخدمات — صفحة مخصصة لعرض الخدمات المستقلة أو خدمات الشركة
- المتجر — قوائم منتجات مع الأسعار وخطوط الدفع والروابط المخصصة
- خلاصة RSS — ملف
/rss.xmlيُولَّد تلقائيًا للمشتركين - خريطة الموقع — تُولَّد تلقائيًا عند كل عملية بناء
- صفحة 404 مخصصة — صفحة خطأ احترافية جاهزة
- أكثر من 30 ثيمًا — تبديل ثيمات DaisyUI فورًا أو تصميم ثيم خاص بك
- واجهة برمجة انتقالات العرض — تنقل سلس بين الصفحات (قابل للتفعيل/التعطيل)
- تحسين الصور — معالجة تلقائية عبر Sharp لأوقات تحميل أسرع
- مكوّن الطباعة — تنسيق احترافي للمحتوى النصي الطويل
- توليد الرابط التلقائي — يُشتق من عنوان المقال أو اسم الملف (قابل للتهيئة)
| التقنية | الإصدار | الغرض |
|---|---|---|
| Astro | v4 | إطار العمل الأساسي وتوليد المواقع الثابتة |
| TailwindCSS | v3 | تنسيق مرن قائم على المرافق |
| DaisyUI | v4 | مكتبة مكوّنات وثيمات متعددة |
| @astrojs/mdx | v2 | دعم صيغة MDX في المحتوى |
| @astrojs/rss | v3 | توليد خلاصة RSS |
| @astrojs/sitemap | v3 | توليد خريطة الموقع تلقائيًا |
| @tailwindcss/typography | الأحدث | تنسيق المحتوى النثري |
| dayjs | الأحدث | تنسيق التواريخ |
| sharp | الأحدث | تحسين الصور من طرف الخادم |
| TypeScript | — | الأمان النوعي عبر قاعدة الشيفرة |
pnpm installpnpm devافتح المتصفح على http://localhost:4321 لمشاهدة الموقع مباشرةً.
pnpm buildpnpm preview├── src/
│ ├── components/
│ │ ├── cv/
│ │ │ └── TimeLine.astro # مدخلات الجدول الزمني للسيرة الذاتية
│ │ ├── BaseHead.astro # وسوم meta لـ SEO
│ │ ├── HorizontalCard.astro # بطاقات المدونة والمشاريع
│ │ ├── HorizontalShopItem.astro # بطاقات المتجر
│ │ ├── SideBar.astro
│ │ ├── SideBarMenu.astro # روابط التنقل
│ │ └── SideBarFooter.astro # أيقونات التواصل الاجتماعي
│ ├── content/
│ │ ├── blog/ # مقالات المدونة
│ │ ├── store/ # ملفات المتجر
│ │ └── config.ts # مخططات مجموعات المحتوى
│ ├── layouts/
│ │ ├── BaseLayout.astro # القالب العام للصفحات
│ │ ├── PostLayout.astro # قالب المقالات
│ │ └── StoreItemLayout.astro # قالب تفاصيل المنتج
│ ├── lib/
│ │ └── createSlug.ts # أداة توليد الروابط المختصرة
│ ├── pages/
│ │ ├── blog/ # صفحات المدونة والوسوم
│ │ ├── store/ # صفحات المتجر
│ │ ├── cv.astro
│ │ ├── index.astro
│ │ ├── projects.astro
│ │ ├── services.astro
│ │ ├── 404.astro
│ │ └── rss.xml.js
│ └── config.ts # إعدادات الموقع العامة
├── public/
│ └── robots.txt
├── astro.config.mjs
├── tailwind.config.cjs
└── package.json
عدّل ملف /src/config.ts للتحكم في المتغيرات العامة:
export const SITE_TITLE = 'اسمك | محفظة الأعمال';
export const SITE_DESCRIPTION = 'وصف موقعك لمحركات البحث.';
export const GENERATE_SLUG_FROM_TITLE = true; // false = استخدم اسم الملف
export const TRANSITION_API = true; // تفعيل/تعطيل انتقالات العرضحدّث أيضًا عنوان الموقع في astro.config.mjs:
export default defineConfig({
site: 'https://نطاقك.com',
integrations: [mdx(), sitemap(), tailwind()],
});لا يحتاج هذا القالب إلى متغيرات بيئية لوظائفه الثابتة الأساسية. إن أضفت خدمات خارجية (نماذج، واجهات API، تحليلات)، أنشئ ملف .env في جذر المشروع:
# المتغيرات المكشوفة للعميل تبدأ بـ PUBLIC_
PUBLIC_ANALYTICS_ID=معرّف_التحليلات
# متغيرات الخادم فقط — لا تُكشف للمتصفح
CMS_API_SECRET=مفتاحك_السرييكشف Astro فقط المتغيرات التي تبدأ بـ
PUBLIC_للمتصفح. احتفظ بالمفاتيح الحساسة بدون هذا البادئ.
عدّل الصورة الشخصية وروابط الصفحات وأيقونات التواصل الاجتماعي في SideBar.astro. غيّر شكل الصورة الرمزية باستخدام فئات DaisyUI mask.
أضف رابطًا جديدًا في SideBarMenu.astro:
<li><a class="py-3 text-base" id="services" href="/services">الخدمات</a></li>لتمييز الرابط النشط، مرّر sideBarActiveItemID إلى BaseLayout:
<BaseLayout sideBarActiveItemID="services"><div class="time-line-container">
<TimeLineElement title="المسمى الوظيفي" subtitle="الشركة · 2022–الآن">
وصف دورك ومسؤولياتك وإنجازاتك.
</TimeLineElement>
</div>أنشئ ملفات .md أو .mdx في /src/content/blog/:
---
title: "عنوان المقال"
description: "وصف مختصر لمحركات البحث"
pubDate: "Jan 01 2024"
heroImage: "/images/hero.webp"
tags: ["astro", "تطوير-ويب"]
---
محتوى المقال هنا.أنشئ ملفات .md في /src/content/store/:
---
title: "اسم المنتج"
description: "وصف المنتج"
heroImage: "/images/item.webp"
pubDate: "Jan 01 2024"
pricing: "$15"
oldPricing: "$25"
badge: "مميز"
checkoutUrl: "https://checkout.example.com/"
custom_link_label: "عرض تجريبي"
custom_link: "https://demo.example.com"
details: true
---غيّر خاصية data-theme في BaseLayout.astro لتبديل الثيم فورًا:
<html lang="ar" dir="rtl" data-theme="dark">يتوفر أكثر من 30 ثيمًا جاهزًا. استعرضها على daisyui.com/docs/themes.
تُولَّد خريطة الموقع تلقائيًا عند كل بناء. حدّث ملف public/robots.txt بنطاقك:
User-agent: *
Allow: /
Sitemap: https://نطاقك.com/sitemap-index.xml
انشر الموقع على أي منصة استضافة ثابتة:
| المنصة | الدليل |
|---|---|
| Vercel | Astro على Vercel |
| Netlify | Astro على Netlify |
| GitHub Pages | Astro على GitHub Pages |
⚠️ تحذير يستخدم ترقيم صفحات المدونة والمتجر معاملات مسار ديناميكية ([...page].astro)، وهي غير متوافقة مع إعدادات النشر SSR. استخدم دائمًا وضع الإخراج الثابت الافتراضي.
نرحب بالاقتراحات وطلبات السحب! لا تتردد في فتح نقاش أو إبلاغ عن مشكلة أو طلب ميزة جديدة.
ابحث عن تقارير الأخطاء وطلبات الميزات المُعلَّمة بـ accepted وابدأ العمل.
يخضع AMEGOFY لرخصة MIT — راجع ملف LICENSE للتفاصيل.
صُنع بواسطة Kareem Amged.