Designer Portfolio & Blog Template

This is a modern, customizable designer portfolio and blog template built with Astro.js, Sass, and TypeScript, designed for showcasing creative work and publishing articles. It provides a robust foundation for designers and developers to quickly launch their personal websites.

Key Features:

• Modern Tech Stack: Leverages Astro.js (v5.12.8) for fast, content-focused websites, Sass (v1.79.4) for powerful CSS pre-processing, and TypeScript (v5.6.2) for type-safe development.
• Easy Customization: Centralized data management in src/data/ allows users to easily update website information, contact details, navigation, and SEO metadata (content.ts). Project listings for the homepage (home.json) and a comprehensive project list (project.ts) are also managed here.
• Flexible Content Management: Blog posts are created by simply adding Markdown files to content/blog/, which are automatically processed and listed. Detailed project pages can be created as individual .astro files in src/pages/detail/.
• Environment Variables: Supports .env configuration for essential site settings like PUBLIC_SITE_URL, PUBLIC_SITE_NAME, and optional integration with analytics platforms such as Google Analytics 4 (PUBLIC_GA4_ID) and Umami Analytics (PUBLIC_UMAMI_ID).
• Optimized for Performance: Astro's island architecture ensures minimal JavaScript is shipped to the client, resulting in excellent performance and user experience.
• Responsive Design: Built with a focus on adaptability across various devices, ensuring a consistent and appealing presentation of your portfolio and blog content.
• Custom Font Support: Includes specific font choices for Chinese and English text, with guidance on embedding large Chinese fonts as SVG for optimal loading.

Use Cases:

• Personal Portfolio: Ideal for designers (UI/UX, graphic, web) to showcase their projects with dedicated detail pages and high-quality images.
• Personal Blog: A perfect platform for sharing insights, tutorials, and updates through a clean and organized blog section.
• Developer Portfolio: Developers can adapt it to highlight their coding projects, technical articles, and skills.

Getting Started: The project uses Yarn for dependency management.

1. yarn install: Install all necessary dependencies.
2. yarn dev: Start the local development server at localhost:4321.
3. yarn build: Build the production-ready site to the ./dist/ directory.
4. yarn preview: Preview the built site locally before deployment.

This template offers a streamlined workflow for creating a professional online presence, combining modern web technologies with straightforward content management.