返回主题列表

开发者作品集

一个使用 Astro.js 构建的现代化、高性能个人作品集和博客。旨在以极快的性能和卓越的 SEO 展示您的项目和技术文章。


价格

免费


✨ 特性


🚀 极速性能 - 使用 Astro.js 构建,实现最佳加载速度

📝 功能齐全的博客 - 支持带代码高亮的技术文章

🎨 精美UI - 现代化、响应式设计,由Tailwind CSS驱动

🌙 暗模式支持 - 无缝切换亮/暗主题

📱 完全响应式 - 在从移动设备到桌面设备的所有设备上都能完美呈现

🔍 SEO优化 - 结构化数据、元标签,并针对搜索引擎进行优化

🏷️ 标签系统 - 使用标签对博客文章和项目进行分类

📊 内容集合 - 使用Astro的内容集合进行有组织的内容管理

🖼️ 项目展示 - 通过图片、描述和技术标签展示您的作品


🛠️ 技术栈


Astro.js - 性能卓越的静态网站生成器

React.js - 用于交互式组件

Tailwind CSS - 实用优先的CSS框架

TypeScript - 类型安全,提升开发者体验

MDX - 结合JSX的Markdown,用于富内容创建

Preact - React的轻量级替代方案,用于UI组件


📋 前提条件


在开始之前,请确保您已安装以下软件:

Node.js (v18 或更高版本)

npm 或 yarn

Git


⚙️ 安装与设置


克隆仓库

  git clone https://github.com/cojocaru-david/portfolio.git
  cd portfolio


安装依赖

   npm install

  yarn install


启动开发服务器

   npm run dev

  yarn dev


打开您的浏览器

  导航到 https://:4321 以查看本地运行的网站。


📁 项目结构


portfolio/
├── public/         # Static assets
├── src/
│  ├── components/     # UI components
│  ├── content/      # Content collections
│  │  ├── blog/      # Blog posts in MD/MDX format
│  │  └── projects/    # Project data
│  ├── layouts/      # Page layouts
│  ├── lib/        # Utility functions
│  ├── pages/       # Page routes
│  └── styles/       # Global styles
├── astro.config.mjs    # Astro configuration
├── tailwind.config.cjs   # Tailwind CSS configuration
├── tsconfig.json      # TypeScript configuration
└── package.json      # Project dependencies


🚀 用法


创建博客文章


在 `src/content/blog` 中创建一个新的 `.mdx` 或 `.md` 文件

添加包含标题、描述、日期、标签和作者的 frontmatter

使用 Markdown 和 MDX 组件编写您的内容


title: "Your Post Title"
description: "A brief description of your post"
date: 2025-04-20
tags: ["tag1", "tag2", "tag3"]
authors: ["Your Name", "Co-author (optional)"]
Your Post Title


在此处使用 Markdown 编写您的内容。


副标题


更多内容...


添加项目


在 `projects` 中创建一个新的 `.md` 文件

添加项目详细信息,包括名称、描述、标签和图片路径


🌙 暗模式


该项目使用 Tailwind CSS 和 Preact 支持暗模式。它会检测用户偏好并应用相应的主题,并提供在亮模式和暗模式之间切换的选项。


📊 数据工具


该项目在 `data-utils.ts` 中包含多个实用函数:


getAllPosts() - 检索所有博客文章

getRecentPosts(count) - 获取最新文章

getAdjacentPosts(currentId) - 获取相邻文章(上一篇和下一篇)

getAllTags() - 获取文章中使用的所有标签

getSortedTags() - 获取按使用次数排序的标签

getPostsByAuthor(authorId) - 获取特定作者的所有文章


🤝 贡献


欢迎贡献!请随时提交拉取请求(Pull Request)。


Fork 该仓库

创建您的特性分支 (`git checkout -b feature/amazing-feature`)

提交您的更改 (`git commit -m 'Add some amazing feature'`)

推送到该分支 (`git push origin feature/amazing-feature`)

打开拉取请求(Pull Request)


📄 许可


本项目采用 MIT 许可证授权 - 详情请参阅 LICENSE 文件。