私のポートフォリオウェブサイト

29621 ワード
webdev astro portfolio テキストリンク
私のポートフォリオのウェブサイトは現在、プレーンHTML、エレベーター、ブートストラップのミックスのビットです.
しかし、内容を編集するのは少し保守的でした.私はすでにアストロを見ていたので、すぐにポートフォリオをリファクタにすることにしました.
クールな部分:
私open-sourced it 誰もが使用するために!

Note: This article doesn't describe the build step-by-step but showcases some important highlights of the process.


基地再考


ポートフォリオはすでに1ページだったので、それについては何も新しいものではありませんでしたが、それがどのようにコンポーネントとして見えるかについて考えて、私はすぐに次のアプローチを思いつきました.
  • ヘッダー
  • イントロ
  • スキル
  • 快適
  • マスタリング
  • ポートフォリオ
  • ジャーニー
  • 証言
  • フッター・コンタクト
    • そして、あなたがソースファイルを見ているならば、あなたはすべてのこれらの構成要素が書かれるのを見ることができます.
    ダイナミックである必要がある部分に関しては:
  • スキル
  • ポートフォリオ
  • ジャーニー
  • 証言
  • 社会
    • アストロの1つのクールな側面は、それがすぐにJSONファイルから読み取ることができるので、我々のケースでは、我々は“データベース”として使用している.
    それを構築する権利を右に飛び込みましょう!

    プロジェクトの作成


    アストロはスーパークイックセットアップガイドを持っています.
    mkdir portfolio && cd portfolio
npm init astro
    閉じるこの動画はお気に入りから削除されています.
    あなたの大好きなエディタでこのプロジェクトを開きなさい.
    データソースから始めましょう.追加しますsite.json ファイルの内部data ディレクトリsrc プロジェクトの.
    このJSONの基本的な構造はこのように見えます.
    {
  "title": "Chris Bongers | Senior Full Stack Developer",
  "description": "Chris Bongers - Portfolio, Full stack developer",
  "url": "https://chrisbongers.com/",
  "author": "Chris Bongers",
  "profile_pic": "/assets/chris.jpg",
  "resume": "/assets/resume.pdf",
  "nav": [
    {"link": "#skills", "name": "Skills"},
    {"link": "#work", "name": "Work"},
    {"link": "#footer", "name": "Contact"},
    {"link": "https://daily-dev-tips.com/", "name": "Blog", "target": "_blank"}
  ],
  "skills": {
    "comfortable": [{"name": "HTML5", "icon": "html5"}],
    "mastering": [{"name": "Flutter", "icon": "flutter"}]
  },
  "work": [
    {
      "title": "Yaatree",
      "description": "Our amazing puppy, who goes on all kinds of cool adventures",
      "image": "/assets/yaatree.jpg"
    }
  ],
  "journey": {
    "2030": [
      {
        "title": "Senior full stack remote developer ☁️",
        "description": "It's my dream to be a senior full-stack developer who can work remotely."
      }
    ]
  },
  "testimonials": [
    {
      "image": "/assets/nicole.jpg",
      "name": "Nicole Bongers",
      "title": "~ Wife",
      "quote": "Chris is an amazing husband and dog father!"
    }
  ],
  "socials": [
    {
      "link": "https://codepen.io/rebelchris",
      "title": "Codepen",
      "icon": "codepen"
    }
  ]
}
    ご覧のように、いくつかのデータを省略しましたが、これは自分で作ることができます.
    必要に応じて社会的な、証拠を追加し、仕事の要素を自由に感じる.

    Astroのインデックスページ


    さあ、頭を踏みましょうindex.astro ページ、これは実際のインデックスです、そして、私たちのために、我々が持っている唯一のページ.
    ---
// Component Imports
import MainHead from '../components/MainHead.astro';
import Header from '../components/Header.astro';
import Intro from '../components/Intro.astro';
import Skills from '../components/Skills.astro';
import Work from '../components/Work.astro';
import Journey from '../components/Journey.astro';
import Testimonials from '../components/Testimonials.astro';
import Footer from '../components/Footer.astro';
---
<html lang="en">
  <head>
    <MainHead />
  </head>
  <body>
    <Header />
    <main>
        <Intro />
        <Skills />
        <Work />
        <Journey />
        <Testimonials />
        <Footer />
    </main>
  </body>
</html>
<style lang="scss">
main {
  padding-top: 150px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
</style>
    心配するな.ここでたくさんの部品を輸入しています.私たちは少しそれらを作ります.
    私は、ちょうどここで若干のものをハイライトしたいです.どのように我々は簡単にコンポーネントに物事を分けることができると言ったか覚えていますか?
    さて、ここにあります.すべてのセクションは、独自のコンポーネントを持っているので、コードは私たちのために読みやすい.
    もう一つの涼しいことは、アストロが我々にインラインスタイリングを使用するのを許して、SCSSの形でさえ.
    また、コンポーネントと呼ばれるMainHead コンポーネントのコンポーネントのコンポーネントです.そのコンポーネントの様子を見てみましょう.
    --------
import site from "../data/site.json";
const {title, description} = site;
--------
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<meta name="Description" content={description}>
<link rel="stylesheet" type="text/css" href="/global.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<link rel="icon" href="/favicon.ico" />
    ご覧のように、JSONファイルからデータを読み込む方法です.
    また、コンポーネントで使用します.
    私はこのアプローチ超便利で使いやすい見つける.
    上記のファイルは、我々が我々の頭のセクションで持ちたいすべてのものを持っています.

    ループのデータを


    もう一つ重要なことは、サンプルの配列をループすることです.
    スキルを例に挙げましょう.
    我々のトップでSkills.astro 必要なデータを定義することができます.
    --------
import site from "../data/site.json";
import SkillItem from './SkillItem.astro';
const title = `These are skills I've mastered over the years`;
const comfortable = `Skills I'm super comfortable with`;
const mastering = `Skills I'm mastering`;
const {skills} = site;
--------
    HTMLの部分でこれらの技術を使用しましょう.
    <div class="skills">
    {skills.comfortable.map((item) => (
        <SkillItem item={item} />
    ))}
</div>
<div class="skills">
    {skills.mastering.map((item) => (
        <SkillItem item={item} />
    ))}
</div>
    ご覧のように、私たちのスキルデータセットの中の2つの配列をループしますcomfortable and mastering 配列.
    これらの項目ごとに、SkillItemと呼ばれる何かをレンダリングし、アイテム変数を渡します.
    すぐにこのアイテム変数がどのように使用されるかを見るためにskillitemを見てみましょう
    --------
const { item } = Astro.props;
--------
<div class="skills-item tooltip-container">
    <span class="tooltip">{item.name}</span>
    <i class={`devicon-${item.icon}-${(item.type?item.type:'plain')}`}></i>
</div>
<style lang="scss">
.skills-item {
    background: #fff;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
        color: var(--color-purple);
        font-size: 2rem;
    }
}
</style>
    ご覧のように、項目変数はAstro.props .
    そして、我々は今、そのコンポーネントのアプリケーションの超小型部分をレンダリングすることができます.
    それはまた、独自のスタイルを使用していますので、これらはどこに属しているかについては明らかです.

    コンポーネント内のJavaScriptのレンダリング


    アストロが行うことができる別のことは、もちろん、反応/svelte/vueコンポーネントをレンダリングし、それらのJavaScriptを使用することです.
    しかし、私のサイトは以前はプレーンHTMLで構築されていましたので、すでにJavaScriptがいくつかありました.
    クールな部分は、アストロは私たちにアストロファイル内でそれを使用するオプションを与えることです!
    それでは、ヘッダーコンポーネントを見て、JavaScriptの小さな部分を1つのコンポーネントに埋め込む方法を見てみましょう.
    --------
import site from "../data/site.json";
const {nav} = site;
--------
<header id="header">
    <ul>
        {nav.map((item) => (
            <li>
                <a href={item.link} target={item.target} rel="noopener noreferrer">{item.name}</a>
            </li>
        ))}
    </ul>
</header>
<script type="text/javascript">
const header = document.getElementById("header");
window.onscroll = function() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
};
</script>
    このJavaScriptは、コンポーネントがレンダリングされたときにのみ取得されますしかし、すべてがとにかく1ページにあるので、それは重要でありません.

    静的資産の使用


    多くの静的ジェネレーターもパブリックフォルダーと一緒に来るので、私は私のポートフォリオにいくつかのイメージを使用したことを発見したかもしれません.
    このフォルダは常にビルドで利用できます.
    ポートフォリオのために、私は中でイメージを置きましたassets フォルダ.
    以下の構文を使ってこれらをリンクできます:
    <img src="/assets/image.jpg" />
    あなたがそれからどのようにコンパイルされるかについて見たいと思うならばvisit my portfolio .
    それとも、代わりに完全なコードを参照してくださいGitHub public repository.

    読んでいただきありがとうございます、接続しましょう！


    私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or
    UNION or OR in SQL Server Queries
    月コードチャレンジ第1期[2つ引いて1つ追加]