Webサイトテンプレート
Arfazrll Portfolio
Immersive AI engineer portfolio with WebGL scenes, technical case studies, bilingual content, live GitHub and WakaTime stats, and a dual-provider AI chatbot.
このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。
Portfolio · AI · 無料
ページ
ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。
デザイン解説
このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。
この解説はまだ日本語に対応していないため、英語で表示しています。
- Overall
personal portfolio, tech-forward, high-density, dark
- Palette
background #000000; surfaces [#18181b, #e5e7eb, #ef4444, #22c55e]; text #fafafa; muted text #a6a6a6; primary #20beff; accents [#ef4444, #22c55e, #eab308]
- Type
headings Inter, 900, uppercase/sentence-case; body Inter, 12px; scale h1 158px / h2 88px / h3 36px
- Shape & spacing
button radius 9999px, card radius 16px, borders none, shadows rgba(255, 255, 255, 0.1) 0px 0px 0px 1px, section spacing 120px, content width 1138px
- Sections (top to bottom)
- Hero — full-width, centered stacked headline with icon integration (lightning bolt, robot head), vertical sidebar label "AVAILABLE FOR OPPORTUNITY", top navigation bar with time display and icons, location tagline at bottom right, scroll indicator
- Core Focus — centered quote block with red border, three-column layout below with labels in red, descriptive text in white/muted gray, signature script at end
- Professional Statistics — centered text block above horizontal stat bar with four data points, rounded container, green status dot above
- Contact — full-width form with large heading, input fields labeled in uppercase, "SEND MESSAGE" button with arrow icon, social grid of platform cards with connect buttons and icons
- Footer — implied continuation with contact links and branding
- Signature details
- Dynamic iconography embedded in text (lightning, robot, camera)
- Vertical sidebar label with rotated text
- Red accent borders around key sections
- Floating scroll indicator with animated transition
- Monochrome palette with strategic color highlights
- Script signature for personal touch
- Other pages
- /contact: form-based layout with social connection grid and messaging interface
テンプレート情報
- カテゴリ
- Portfolio, AI
- 作者
- larsen66
- 掲載元
- 21st.dev
- 価格
- 無料
- Portfolio
- AI
- Personal Website
オリジナルデザイン：larsen66（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。
Ottermind が起点にするブリーフ
Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。
Build a portfolio website inspired by the "Arfazrll Portfolio" template. Reference brief: Immersive AI engineer portfolio with WebGL scenes, technical case studies, bilingual content, live GitHub and WakaTime stats, and a dual-provider AI chatbot. Style and features to reflect: Personal Website. Use original copy and imagery for my brand rather than the reference's placeholder content.
このテンプレートの使い方
- 1
「このテンプレートを使う」をクリックすると、ブリーフ入りで Ottermind Studio が開きます。
- 2
ブリーフにブランド、対象者、ページ、内容を書き足します。
- 3
Ottermind がこのデザインに着想を得た新しいサイトを作ります。チャットで続けて調整できます。
