ポートフォリオ(Portafolio)

Web

概要

このリポジトリは「Portafolio」と名付けられた個人ポートフォリオのテンプレートです。現代的なデザインとユーザー体験を意識して作られており、モバイルファーストのレスポンシブレイアウト、ライト/ダークモードの切替機能(状態をlocalStorageに保存)、CSSのスムーズなトランジション、AOSライブラリによるスクロールアニメーション、Google Fontsの導入などが含まれます。構成はシンプルなHTML/CSS/JSで、学習用や自身のポートフォリオ作成のベースとして使いやすい作りです。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 3
  • ファイル数: 5
  • メインの言語: HTML

主な特徴

  • モバイルファーストで設計されたレスポンシブデザイン
  • ライト/ダークモードの切替(localStorageによる状態保持)
  • CSSトランジションとAOSを使ったスムーズなアニメーション
  • Google Fonts(Inter、JetBrains Mono)によるモダンなタイポグラフィ

技術的なポイント

本プロジェクトはシンプルな静的サイト構成ながら、実運用や学習で役立つ実装が凝縮されています。まずモバイルファーストの設計方針により、CSSは小さい画面向けを優先しつつメディアクエリで大画面に対応する作りと推察されます。テーマ切替はJavaScriptで実装され、ユーザーの選択をlocalStorageに保存することでリロード後も状態が維持されます。視覚的な演出はCSS3のトランジションやアニメーションで基本を押さえ、AOS(Animate On Scroll)を組み合わせることでスクロール連動の表示アニメーションを容易に追加可能です。フォントはGoogle FontsのInterとJetBrains Monoを採用し、本文とコード表示での視認性向上を図っている点も実践的です。構成がHTML/CSS/JSの静的ファイルに限定されているため、ビルドツールやフレームワークの学習コストをかけずにカスタマイズでき、GitHub Pagesなどでのホスティングやテンプレートとしての再利用が容易です。アクセシビリティやSEOのための最低限のメタ設定や構造化(セクション分け、適切なヘッダ階層など)も想定されるため、個人サイト作成の基礎を学ぶのに向いています。

プロジェクトの構成

主要なファイルとディレクトリ:

  • README.md: file
  • assets: dir
  • css: dir
  • index.html: file
  • js: dir

まとめ

学習にも公開用にも使いやすい、モダンで軽量な個人ポートフォリオのテンプレートです。

リポジトリ情報:

READMEの抜粋:

🚀 Portafolio Profesional de Desarrollador

Un portafolio moderno y completamente responsivo construido con las mejores prácticas de desarrollo web.

✨ Características

🎨 Diseño y UX

  • Diseño Responsivo: Optimizado para todos los dispositivos (mobile-first)
  • Modo Oscuro/Claro: Cambio de tema con persistencia en localStorage
  • Animaciones Suaves: Transiciones CSS3 y animaciones con AOS
  • Tipografía Moderna: Google Fonts (Inter + JetBrains Mono)
  • Gradientes Modernos