Terminal Portfolio 项目教程

Terminal Portfolio 项目教程

terminal-portfolio Terminal-portfolio - ideal for showcasing software developer projects. 项目地址: https://gitcode.com/gh_mirrors/ter/terminal-portfolio

1、项目介绍

Terminal Portfolio 是一个以终端为主题的个人作品集展示项目，特别适合软件开发者展示自己的项目。该项目基于 Gatsby 和 Markdown 文件构建，使用 Winbox.js 实现独立的终端窗口效果。在桌面端，项目展示通过 Winbox 实例实现，用户可以调整大小和移动窗口；在移动端，项目展示通过 Gatsby 生成的静态站点实现，提供更好的用户体验和设备窗口控制。

2、项目快速启动

2.1 环境准备

在开始之前，请确保你已经安装了以下工具：

• Node.js 和 npm：用于安装和管理项目依赖。
• Yarn：用于安装和管理项目依赖。

2.2 安装步骤

1. 克隆项目仓库：

   git clone https://github.com/Kielx/terminal-portfolio.git
   cd terminal-portfolio
   

2. 安装依赖：

   yarn install
   

3. 启动开发服务器：

   yarn develop
   

4. 访问项目： 打开浏览器，访问 http://localhost:8000 即可查看项目。

3、应用案例和最佳实践

3.1 自定义项目展示

你可以通过修改 /src/markdown-pages/projects/ 目录下的 Markdown 文件来自定义项目展示。每个 Markdown 文件的头部包含项目的元数据，如项目名称、技术栈、截图等。

示例：

---
slug: "projects/country-quiz"
nameOfClass: "projects-items"
title: "Country Quiz"
listName: "🌎 /Country Quiz"
popupImageSrc: "country-quiz.webp"
popupImageAlt: "Country Quiz screenshot"
popupLiveLink: "https://country-quiz.pantak.net/"
popupGithubLink: "https://github.com/Kielx/country-quiz"
techIcons: [ "react", "html5", "css3", "tailwindcss" ]
---

项目描述内容...

3.2 修改主题颜色

你可以通过修改 /src/styles/styles.scss 文件中的颜色变量来自定义主题颜色。

示例：

:root {
  --primaryText: #ffc600;
  --secondaryText: #ccc;
  --linkText: #047be3;
  --bg: #1b2d3a;
  --windowBg: #193549;
  --focusBg: hsl(205, 51%, 16%);
  --borderColor: black;
}

4、典型生态项目

4.1 Gatsby

Gatsby 是一个基于 React 的静态站点生成器，适用于构建快速、现代的 Web 应用程序。Terminal Portfolio 项目使用 Gatsby 生成静态页面，提供高性能的用户体验。

4.2 Winbox.js

Winbox.js 是一个轻量级的 JavaScript 库，用于创建可调整大小和移动的窗口。Terminal Portfolio 项目使用 Winbox.js 在桌面端实现独立的终端窗口效果。

4.3 Markdown

Markdown 是一种轻量级标记语言，易于阅读和编写。Terminal Portfolio 项目使用 Markdown 文件来定义项目内容，方便开发者快速更新和维护项目展示。

通过以上步骤，你可以快速启动并自定义 Terminal Portfolio 项目，展示你的软件开发作品。

terminal-portfolio Terminal-portfolio - ideal for showcasing software developer projects. 项目地址: https://gitcode.com/gh_mirrors/ter/terminal-portfolio