静的 HTML Web サイトのコレクション ·
導入
これは私がデザインしたランディング ページとブログ テンプレートのコレクションです。これらのテーマは、HTML、CSS、JavaScript、jquery、およびブートストラップに基づいています。フリーランス、パートタイム、フルタイム、契約社員など、仕事の機会を得るためにフロントエンド Web 開発者としての仕事を紹介するポートフォリオとしてこのリポジトリを作成しています。これらのデザインは私の単純な一部にすぎません。仕事なので、クライアントの作品をここに公開することはできません。私のサービスが役に立つと思われ、私を雇用することに興味があれば、お気軽にメールを送ってください。
このリポジトリには次のデザインがあります。
テーマ名をクリックするとライブ プレビューが表示されます。これらのデザインは個人または商用目的ではなく、表示のみを目的としています (私のフロントエンド スキルを示すため)。
- Canox: シンプル、クリーン、個人的、モダン、プロフェッショナルなブログは、プロフェッショナルなブログ Web サイトの作成に最適です。
- Covid-19: Covid-19: コロナウイルスの統計を表示するためのシンプルなランディング ページ。API からのリアルタイム統計と国別の最新統計を表示するインタラクティブな地図を使用してコロナウイルスから身を守る方法を確認できます。このデザインは、デザイナー Shahriar Hossain によってデザインされており、見栄えを良くするためにデザインにいくつかの変更を加えて、デザインをフロントエンド コードに変換しただけです。
- コニッシュ: 技術会社の美しくシンプルなランディング ページ。そしてこの作品は、フロントエンド Web 開発者としての私の最初の作品の 1 つです。
- Projection & Collision: ダマスカス大学情報技術工学部での 3 年生のProjection & Collisionプロジェクトの Web 情報デモ。
- Sass: 技術系企業の別のランディング ページです。ここでプレゼンテーションの様子をご覧いただけます。
- Sellvas: エレガントでクリーンなデザインの雑誌とブログのテンプレート テーマ。美しいブログとフォト ギャラリーをセットアップするために必要なすべてが詰め込まれており、モダンでミニマルなデザイン、メンテナンスが簡単、細部に至るまで完璧な磨きが施されています。そして、このテーマには 10 以上のレイアウト バリエーションと、デザインのあらゆるスタイルにマッチする多くの投稿とエラー ページのスタイルが含まれています。
- ストーリー: アンティークや手仕事を表示するためのシンプルでクリーンなランディング ページ。このサイトは Majd Shamma によってデザインされましたが、私はそのデザインを静的な Web サイトに変換しました。
- Tieqode: クライアントに最高のソリューションとサービスを提供するために必要なビジネススキルと技術スキル、健全なリーダーシップ、経験、知識を備えた専門家のチームです。そして、 TIEQODEチームに参加したとき、私は彼らの Web サイトで働きました。Web サイトはここで見ることができます。
- 結婚式: 結婚式イベントのためのモダンで美しいランディング ページ。
これらのテーマについて
これらのデザインの主な特徴
- HTML5、CSS3、JavaScript、jQuery、およびブートストラップ。
- 素敵な視差効果。
- 有効なスクリプトと素晴らしく整理されたコード。
- ミニマルでモダン、そしてクリーンなデザイン。
- Roboto や Raleway などの無料の Google フォントを使用しました。
- すべてのファイルには編集しやすいように十分なコメントが付いています。
- カルーセル スライダーをサポートします。
- jquery と CSS3 の効果を含めます。
- ドロップダウン メニューと通常のメニューもモバイル デバイス向けに最適化されています。
- ナビゲーションを改善するためにブレッドクラムをサポートします。
- クロスブラウザ対応。
- 素晴らしいフォントとイオンアイコンの統合。
- 投稿形式のサポート。
- 投稿の下にある関連投稿。
- 著者ボックス付属。
- カスタム エラー 404 ページ。
使用したJavaScriptライブラリ
これらのテーマでは、いくつかの Javascript ファイルのインポートがあり、必要なすべてのファイルとプラグインがプロジェクト ファイルに含まれています。これらのファイルとプラグインは次のとおりです。
- jQuery: jQuery は、高速かつ小型で機能が豊富な JavaScript ライブラリです。多数のブラウザーで動作する使いやすい API により、HTML ドキュメントの走査と操作、イベント処理、アニメーション、Ajax などがはるかにシンプルになります。 jQuery は多用途性と拡張性を兼ね備えており、何百万人もの人々の JavaScript の書き方を変えてきました。
- Bootstrap: レスポンシブなモバイルファーストのフロントエンド Web 開発を対象とした、無料のオープンソース CSS フレームワーク。これには、タイポグラフィ、フォーム、ボタン、ナビゲーション、その他のインターフェイス コンポーネント用の CSS および JavaScript ベースのデザイン テンプレートが含まれています。
- Owl Carousel: 美しいトランジション効果とスタイルを備えた Web サイトでスライダーを作成するのに役立つライブラリです。
- 視差: は最新の機能です。私はこの機能を使用して、マウス スクロール時のレイアウトに適切な視差効果を追加します。
- Font Awesome & Ion Icons: Web サイトで使用するベクター アイコンとソーシャル ロゴ。 Font Awesome は Web で最も人気のあるアイコン セットおよびツールキットで、サードパーティのフォント スクリプトを使用するサイトの 38% で使用されています。Ion Icons は、Web、iOS、Android、およびデスクトップ アプリで使用するためのプレミアム デザインのアイコンです。また、SVG と Web フォントもサポートされています。
- Mixitup: アニメーション DOM 操作用の高性能で依存関係のないライブラリ。美しいアニメーションで DOM 要素をフィルター、並べ替え、追加、削除する機能を提供します。 MixItUp は既存の HTML や CSS とうまく連携するため、レスポンシブなレイアウトに最適で、インライン フロー、パーセンテージ、メディア クエリ、フレックスボックスなどと互換性があります。
- TypedJs: 型を付けるライブラリ。任意の文字列を入力すると、設定した速度で入力され、入力された内容をバックスペースで入力し、設定した文字列の数だけ新しい文が始まります。
- そして最後に
main.jsファイルに上記のすべてを収集します。テーマにエフェクトを作成するためにいくつかのプラグインを実装します。これらのプラグインはパックされているため、ファイル内の内容を手動で編集する必要はありません。知っておく必要がある唯一のことは、メソッドを呼び出す方法です。
使用した画像・イラスト
デザインに使用されている画像はすべて完全に無料ですが、デモ目的のみであり、次の Web サイトから画像、アイコン、イラストを使用しました。
