個人ウェブサイト

目次

The Elements, Ideas, and Concept

DevCard

Shields.io

GitHub Repositories

DEV.to Articles

Future Updates

要素，思想，概念

私のウェブサイトを見たとき、それは私の最初のウェブサイトでした.これは、非常に楽しいプロジェクトと素晴らしい学習機会をWeb開発に私の最初のダイビングとして.しかし、それはまだ私が私が好きであるのと同じくらい掲示して、共有するのに十分誇っていたサイトでありませんでした.アンドマイwebsite 私は、業界に私の最良の部分を披露するために誇りに思っているエンティティでなければなりません.
それから私はつまずいたdev.page そして私の個人的なdevd . pageを占有し始めたすべての私の社会的なメディアのリンク、再開、および美しく更新された導入.…と思った.なぜ私のwebsite 私がこのすべてをしている間.つまずいてGitHub API Docs だけでなくDEV.to API Docs それほど遠く離れていないので、私は彼らの上で働きたいと思っていて、メモを取り始めました.

デーモンカード

すでに私のdevcardを私の中に実装したGitHub README.md , 私のウェブサイトにこのセクションをもたらすコードを得ることは、難しくありませんでした.あなたがDevCardsの詳細について読むことに興味があるならば、私はここで彼らについて特に記事を書きました:

何がdevcardですか？

チーナユン・ 4月3日・ 2分読む

#devcard #dailydev #reading #beginners

私のdevcardページからa タグを付けて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>

シールド。io

私は先に行って、シールドと私の導入に追加するいくつかのカスタムバッジを作成しました.IO -非常にシンプルで使いやすいサイトです.私は先に行き、彼らが使用しているアイコンを見たSimple Icons そして、私のロゴと残りのページにマッチするために、私のカスタムカラーを使用しました.

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

githubリポジトリ

私のGithub Reposを私のウェブサイトに登録するために行ったとき、次のように私のHTMLファイルのセクションを設定しました.

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

    </ul>
</div>

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);
}

それから、JavaScriptファイルにプロジェクトを実装し始めました.
最初に、私は私のGithubプロフィールから倉庫をつかむ必要がありました.私はこれを$.getJSON :

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

この後、私は動的に私が表示したい情報のドキュメント要素を作成することができ、私の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);

私は個人的にはレポにプッシュし、最後の更新の順序でプロジェクトを表示したい最後の時間が含まれています.私は最初に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);
})

GithubのユーザAPIには、以下のような興味があります.

GithubユーザAPIを使用したプロファイルデータ取得

テクニカルバンダール・ 9月24日・ 2分読む

#html #css #github #api

DEAD . TO記事

The DEV.to API APIを使用することに関する多くの情報を提供します.

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

fetch 記事を検索するために使用することができますそこから、それは非常に必要な情報を表示するには簡単ですブログの形式です.
devには、以下のようなAPIの使い方を説明しています.

どのようにdev . to APIを使用するには？

ヤチンシャーマ・ Oct 19 ' 21・ 1分読む

#dev #api

個人的なサイトにブログ投稿を追加します。

カール・W・ Apr 23，20・ 3分読む

#portfolio #api #react #hooks

あなたのDED . toへブログを投稿すること

ヴィシュヌ・ 7月9日・ 1分読む

#productivity #beginners #webdev #writing

このセクションをどのように実装したかを見たい場合はfull code to my project here .

将来更新

次に、私はいくつかのアイデアを私はサイトを頭にしたいとどのような新しい“機能”を追加したい:
[]GitHub Skyline
毎日です.スカイライン

2021年からの私のgithubスカイラインは、何も恐ろしいです!しかし、私は2022年のためにそれを変えるためにここにいます.スコットのような人々から、彼らのスカイラインが私がどれくらいのプロジェクトアイデアを始めるかについて印刷されるようにしたので、私は今年を数えさせるためにここにいます!
01:04

アニメーションスカイライン+ 3 D印刷としてGithub貢献グラフを見る

のためのミッチェルMannering・ Feb 18 ' 21・ 1分読む

#github #opensource

...そして、毎日.それが聞こえるように、devのスカイラインは見えます.


「最後の年に読まれる記事」は、すでに「昨年の貢献」に触発されます.なぜスカイライン機能も追加しない?毎日、週、または月は、ユーザーがそれを乗り越えるとき、最も読まれた話題のツールチップを持つことができました!それはあなたが読んでいるみんなを表示する別の美しい視覚的な方法だろう.皆さんは何を考えますか?
私がそれを理解することができるか、他の誰かが最初でないならば、私はそれを私自身で働かせ始めるかもしれません.
ハッピーコーディング!