私のポートフォリオのウェブサイトを作成する

私は2019年7月に出張で個人的なウェブサイトを作成しました.これは、プレーンHTMLとCSSとかなり大丈夫なビジュアルデザインを使用して数日間で一緒にスローされました.私は再び仕事の市場にいて、最終的に専門的に開発に飛び込むことを探しています.
これにはいくつかの条件がありました.

私は、MVPから始めて、それを構築します

それはコードで作られなければならなかった

それは可能な限り小さなコードと新しいプロジェクトを追加する機能を持つモジュラーである必要があります

ウェブサイトそのものは、私のプロジェクトの簡単なリストを含んでいるべきです

MVP

私の要件を設定して、私はMVPの製品を作成した.ウェブサイトが私のプロジェクトのリストであるので、MVPはオンラインで利用できる私のプロジェクトの単純なリストでもありました.私はエアテーブルを使用しました.Check out the MVP here .

Airtableについての素晴らしいことの一つは、それが自動的にベースのすべてのシートとビューのユニークなAPIドキュメントを生成する方法です.これは、新しいポートフォリオエントリを追加するための任意のコードを必要としないサイトのモジュラーコンセプトに最適なスプリングボードだった.

反応Webアプリ

私は反応でコーディングを楽しむ.私は、コンポーネントのモジュールの性質を直感的に見つける.私は以前はSmashesque.com そして、楽しい時間を過ごしたので、また一緒に行きました.bootstrapはかなりのサイトを一緒に投げるための選択の私のフレームワークです.

エアテーブルを用いたモジュラリスト

の記事の助けを借りてUsing Context API in React (Hooks and Classes) , 私はAxiosとAirtable APIを使用して私のMVPエアテーブルからの選択とすべての行、フィールドとコンテンツの私のビューをつかむ.私の実装は少し厄介ですが、それは動作しないので、問題はない!
entryContexttsから始めました.API呼び出しを実行し、スプレッドシートオブジェクトを含むコンテキスト状態を作成するJS.

    import React, { Component } from 'react'
    import axios from 'axios'
    export const EntryContext = React.createContext()
    class EntryContextProvider extends Component {
        state = {
            entries: []
        }
        componentDidMount() {
            const fetchData = () => {
                axios
                    .get('https://api.airtable.com/v0/appeDXIgWSt9xRB6n/
                    Portfolio%20Entries?api_key=[MY_API_KEY]')
                    .then(({ data }) => {
                        this.setState({
                            entries: data.records
                        })
                    })
                    .catch(console.log)
            }
            fetchData();
        }
        render() {
            return (
                <EntryContext.Provider value={{ ...this.state }}>
                    {this.props.children}
                </EntryContext.Provider>
            )
        }
    }
    export default EntryContextProvider

次にentrylistというコンポーネントを作成しました.JSは、EntryContextProviderコンポーネントの状態データを簡単なHTML要素にマップします.

import React from 'react'

const ListEntry = props => {
    const EnEntry = props.entryData.map((entry, key) => {


        return (
            <div>
                <h3>{entry.fields.title}</h3>
                <p>{entry.fields.notes}</p>
                <p><a href={entry.fields.link}>Link</a></p>
            </div>
        )

    })
    return <div>{EnEntry}</div>
}

export default ListEntry

最後に、私はEntries.js は、EntryContextProvider and ListEntry コンポーネントを一緒に簡単に反応ファッションでページに表示されます.この場合、ホームページのホームページにポートフォリオエントリーの一覧として表示されます.

import React, { Component } from 'react'
import { EntryContext } from '../contexts/EntryContext'
import ListEntry from '../components/EntryList'

class Entries extends Component {

    render() {
        return (
            <EntryContext.Consumer>{(context) => {
                const { entries } = context
                return (
                            <ListEntry entryData={entries} />
                )

            }}
            </EntryContext.Consumer>
        )
    }
}

export default Entries

アプリで.JSは、私のサイトをEntryContextProviderコンポーネントにラップしました.これは、すべてのページがAirtableコンテキストにアクセスできるようにします.

          <EntryContextProvider>
            <Switch>
              <Route exact path="/" component={Entries} />
            </Switch>
          </EntryContextProvider>

最後に、私は結果を得た!私のAirtableスプレッドシートにあったすべてのポートフォリオエントリの単純なリスト:

美的挑戦

多くの開発者は、成果とプロジェクトのリストを最小限のWebサイトで驚異.ホワイトカラースキームと絵文字は、両方とも非常に人気があります.私は少しコントラリアンと合計90代の子供であることを楽しむので、新しいSEGA MegaDrive Mini website そして、その観察にマッチしようとしました.残念ながら、多くの歴史、イメージと一緒に90年代の宇宙船の外観をもたらすことができますレトロなコンソールのテーマです.これらのことなしで(そして、私の処分で芸術的才能の欠如)結果は刺激より少なかった.私のポートフォリオのための暗いテーマは私がそれがそうであって欲しいというより少し招待していて、より友好的でなかったので、私は軽いテーマで行くことに終わりました.私は性格のいくつかのsemblenceを維持したかったので、私はスクロール背景格子を保って、プライマリ容器に「紙のシート」外観を与えました.この時点で、各プロジェクトと絵文字のそれぞれのプロジェクトを識別するために画像を追加することを決めた、再びすべてのスプレッドシートに含まれており、エアレアAPIと呼ばれる.絵文字がポートフォリオを見ている誰にでも直観的であると、私は望みます、しかし、評決はまだその上にあります.一旦すべてがスタイルを整えたならば、私は結果に非常に満足でした:

ファイナルタッチ

私のウェブサイトがゼロから作られたので、私は私のポートフォリオへの追加と考えました.しかし、私はそれ自体にリンクを持つリストに追加されたくなかった.だから私は❔ 左上のアイコンは、サイト上の詳細情報を提供するpopoverをトリガしました.この記事も追加します.

最後に、壊滅的なサイトを破壊するバグがあった.スプレッドシート内の空のフィールドは、空のWebページを引き起こすすべてのエアテーブルコンテキストが失敗する原因となりました.私はこれを解決するためにいくつかの非常に基本的な検証を追加しました、しかし、私がそれを管理しているなら、飛行場が空のフィールドを持ってはならないので、私は過度にそれを考えすぎませんでした.フィールドに問題がある場合は、単純なインラインエラーを指定してください.

そして、それは私のV 1ポートフォリオのウェブサイトについてです!新しいプロジェクトを追加するには、すべてのコードを避けて、シートに行を追加します.プロジェクトの冒頭から見てみましょう.

私は、MVPから始めて、それを構築します✔

それはコードで作られなければならなかった✔

それは可能な限り小さなコードと新しいプロジェクトを追加する機能を持つモジュラーである必要があります✔

ウェブサイトそのものは、私のプロジェクトの簡単なリストを含んでいるべきです✔

ご覧の通り、私は4つの要件をすべて打ちました!それは素晴らしい旅と面白いプロジェクトだった.私はAirtable API、バリデーションの重要性とデザインの奇妙な多くを学んだ.私は、最終結果に非常に満足です!

次は何ですか。

私はそれをそのままサイトを楽しんでいます.私は、サイトに追加のリストベースのセクションを追加するには、スプレッドシートを使用することがあります-記事、証言、猫の写真.私が追加したいものは何でも、私はとても小さいコードでそうすることができますEntries , EntryContextProvider and ListEntry コンポーネントは、Airtable APIリンクを交換し、任意のスタイリング変更を行う.
エアテーブルは、全体のブログの記事には、理想的ではないが、私は実際にそれができるかどうかを知りたいです.空気のバックエンドでサイト全体を想像?それは可能かもしれないし、おそらく私は将来的にその考えをだますでしょう.今のところ、私はこのV 1プロジェクトを完了するために満足している!

ボーナス

私はちょうど“注文”と新しいコードブロックという名前のエアテーブルに新しいフィールドを追加しました.この新しいスニペットで、私はリストエントリがAirtableで注文値を加えることによって現れる命令を調節することができます!

const { entries } = context
                let sortedEntries = entries.sort(
                    function(a,b){return a.fields.order - b.fields.order})

Check out the live site here
Check out the Airtable backend (MVP) here
Check out my Github here
私は現在仕事を探しています!ドロップミーメール[email protected] あなたがチャットしたいならば