一个包含所有内容的个人网站

2025-06-07

一个包含所有内容的个人网站

目录

  1. 元素、思想和概念
  2. 开发卡
  3. Shields.io
  4. GitHub 存储库
  5. DEV.to 文章
  6. 未来更新

元素、思想和概念

当我看着我的网站时，那是我的第一个网站，我对我所做的工作并不十分满意。这是一个非常有趣的项目，也是我第一次涉足Web开发，这是一个绝佳的学习机会。但它仍然不是一个让我感到自豪到可以尽情发布和分享内容的网站。我的网站应该是一个让我引以为豪的实体，以便向业界展示我最好的一面。

然后我偶然发现了dev.page，并开始在我的个人 dev.page 上填充我所有的社交媒体链接、简历和精美更新的自我介绍。我想……为什么不趁着做这些的时候重新设计我的网站呢？之前偶然发现了GitHub API 文档和DEV.to API 文档，它们相隔不远，所以我想研究一下，并开始做笔记。

开发卡

由于我已经将 DevCard 实现到我的GitHub README.md中，因此将这部分内容添加到我的网站并不难。如果你想了解更多关于 DevCard 的信息，我写了一篇专门的文章，地址如下：

tmchuynh

什么是 DevCard？

Tina Huynh ・ 2022年4月3日

#devcard #dailydev #阅读 #初学者

我从我的 DevCard 页面抓取a标签并将其放入div如下内容中：

<div class="devcard d-flex">
    <a href="https://app.daily.dev/tmchuynh"><img align=center src="https://api.daily.dev/devcards/9b4d6fa7ff784d3297e67d1edf73fc06.png?r=mg3" width="500" alt="Tina Huynh's Dev Card" /></a>
</div>
Enter fullscreen mode Exit fullscreen mode

Shields.io

我使用 Shields.io（一个非常简单易用的网站）创建了一些自定义徽章，添加到我的介绍中。我参考了他们在Simple Icons中使用的图标，并使用了我的自定义颜色，以便我的 logo 和页面的其他部分能够完美匹配。

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>
Enter fullscreen mode Exit fullscreen mode

shieldsio

GitHub 存储库

当我将我的 GitHub 存储库填充到我的网站时，我继续在 HTML 文件中设置一个部分，如下所示：

<div class="section-title">
    <h2 id="project-tiles">Projects</h2>
    <ul id="project-list">

    </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

我在我的 css 文件中添加了一些样式：

#project-list .cards {
    color: var(--eerie-black);
    display: flex;
    flex-direction: column;
    height: 150px;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    border: 1px solid var(--eerie-black);
    box-shadow: 3px 10px 25px rgb(180,180,180, 0.4);
}
Enter fullscreen mode Exit fullscreen mode

然后开始在我的 JavaScript 文件中实现项目。

首先，我需要从我的 GitHub 个人资料中获取仓库。我这样做了$.getJSON：

$.getJSON('https://api.github.com/users/tmchuynh/repos', (data) => {
    console.log(data);
.
.
Enter fullscreen mode Exit fullscreen mode

之后，我就能动态创建想要显示的信息的文档元素，并将其添加到我的 html 文件的相应部分中。例如：

var title = document.createElement("a");
title.classList.add("title");
title.innerHTML = name;
var hyperlink = document.createAttribute("href");
hyperlink.value = url;
title.setAttributeNode(hyperlink);
card.appendChild(title);
Enter fullscreen mode Exit fullscreen mode

我个人记录了上次推送到仓库的时间，并希望项目按上次更新的顺序显示。为此，我首先通过 API 获取数组后，对数据进行了排序.sort()：

data.sort((a,b) => (b.pushed_at > a.pushed_at) ? 1 : ((a.pushed_at > b.pushed_at) ? -1 : 0))

data.forEach((element, index) => {
   populate(element.name, element.html_url, element.pushed_at, index);
})
Enter fullscreen mode Exit fullscreen mode

如果您有兴趣，还有其他专门关于 GitHub 用户 API 的文章，例如@technicalvandar885：

technicalvandar885

使用 Github User Api 获取 Github 个人资料数据

技术范达尔 ・ 2021 年 9 月 24 日

#html #css #github #api

DEV.to 文章

DEV.to API提供了大量有关使用其 API 的信息。

const response = await fetch(`https://dev.to/api/articles/${id}`);
const data = await response.json();
Enter fullscreen mode Exit fullscreen mode

fetch可用于检索文章，并从那里以博客形式非常简单地显示您需要的信息。

DEV.to 本身有很多文章解释了如何使用 API 的过程，例如但不限于@j471n @ugglr @hackerkid：

j471n

如何使用 dev.to API？

Jatin Sharma ・ 2021年10月19日

#javascript #webdev #教程 #beginners
ugglr

使用 DEV.to API、React 和 React hooks 将博客文章添加到个人网站。

Carl-W ・ 2020年4月23日

#portfolio #api #react #hooks
黑客小子

将您的 dev.to 博客文章发布到 diff.blog

Vishnu Ks ・ 19年7月9日

#生产力 #beginners #webdev #writing

如果您想了解我是如何实现此部分的，请在此处查看我的项目的完整代码。

未来更新

接下来，我对网站的发展方向和想要添加的新“功能”有一些想法：
[ ] GitHub Skyline
[ ] Daily.dev“Skyline”

GitHub Skyline

我 2021 年的 GitHub 天际线看起来糟透了！但 2022 年，我要改变这一切。从像 Scott 这样的人把自己的天际线打印出来，到我有多少项目想法想要开始，我都要让今年变得有意义！

摄像机01:04
GitHub

以动画天际线的形式查看你的 GitHub 贡献图 + 3D 打印

Michelle Duke 于 GitHub 发表 ・ 2021 年 2 月 18 日

#github #开源

...Daily.dev 的天际线看起来就像听起来的那样。

dailydev 绿色盒子

GitHub 贡献

“去年阅读的文章”已经受到“去年贡献”的启发。为什么不也添加一个天际线功能呢？每天、每周或每月，当用户将鼠标悬停在最热门的主题上时，都会出现一个工具提示！@dailydevtips1这将是另一种美观直观的方式，向所有人展示您正在阅读的内容。大家觉得怎么样？

如果我能解决这个问题或者其他人没有先解决这个问题，我可能会自己开始解决这个问题。

编码愉快！

文章来源：https://dev.to/tmchuynh/a-personal-website-w-everything-268k
Devto 翻译
PREV
你需要了解的 JavaScript 特性
NEXT
你需要了解的关于 JavaScript 数组的一切