網站範本

congo

A powerful, lightweight theme for Hugo built with Tailwind CSS.

這個範本的介紹目前還沒有繁體中文版本,先以英文顯示。

Portfolio · Blog · 免費

congo

頁面

線上示範的逐頁截圖,在頁面框內捲動即可查看完整頁面。

/congo/Congo
congo 網站範本,/congo/ 頁面,第 1 部分
/congo/docs/Documentation · Congo
congo 網站範本,/congo/docs/ 頁面,第 1 部分congo 網站範本,/congo/docs/ 頁面,第 2 部分
/congo/samples/Content Samples · Congo
congo 網站範本,/congo/samples/ 頁面,第 1 部分
/congo/users/Users · Congo
congo 網站範本,/congo/users/ 頁面,第 1 部分congo 網站範本,/congo/users/ 頁面,第 2 部分

設計解讀

AI 對這套範本設計的解讀:配色、字體、間距、區塊與標誌性細節。使用範本時,Ottermind 會以它為起點。

這份解讀目前還沒有繁體中文版本,先以英文顯示。

Overall

blog, clean, minimal, light

Palette

background #ffffff; surfaces [#ede9fe, #ddd6fe, #7c3aed]; text #27272a; muted text #3f3f46; primary #7c3aed; accents []

Type

headings ui-sans-serif, 800, sentence-case; body ui-sans-serif, 16px; scale h1 36px / h2 24px / h3 20px

Shape & spacing

button/card radius 6px, no borders, soft shadows on cards, section spacing 4rem, content width 1024px

Sections (top to bottom)
  • Header — horizontal nav with logo, links, search, language toggle; white background
  • Hero — centered headline with emoji, subheading, paragraph, and purple alert bar with CTA button; full-width illustration below
  • Content block — two-column layout with sample pages list; left-aligned thumbnails, right-aligned text with metadata
  • Recent/Content Samples — vertical list of articles with thumbnails, titles, dates, read times, and summaries; each item has a small upward arrow icon at the far right
  • Footer — centered copyright and attribution text in small font
Signature details
  • Purple abstract tree illustration with fireworks above
  • Consistent use of purple accent color (#7c3aed) for links, buttons, and highlights
  • Minimalist card design with subtle drop shadows
  • Small upward arrow icons next to article lists
  • Clean typography with consistent spacing and alignment
  • Use of emojis in headlines and content
Other pages
  • /congo/docs/: documentation page with large hero image of devices, followed by a list of sections with illustrative icons and brief descriptions
  • /congo/samples/: identical layout to home but with extended list of content types including charts, diagrams, and external articles

範本資訊

分類
Portfolio, Blog, Starter Kit
技術
Hugo
授權
MIT
作者
James Panther
價格
免費
  • blog
  • dark
  • dark-mode
  • light
  • minimal
  • personal
  • tailwind

原始設計來自 James Panther,刊登於 Hugo Themes。Ottermind 不會複製範本程式碼,而是依據需求打造全新的網站。

Ottermind 起步用的需求

它會以草稿形式在 Studio 中開啟,送出前先補充你的品牌、受眾與頁面。

Build a portfolio website inspired by the "congo" template. Reference brief: A powerful, lightweight theme for Hugo built with Tailwind CSS. Style and features to reflect: blog, dark, dark-mode, light, minimal, personal. Use original copy and imagery for my brand rather than the reference's placeholder content.

如何使用這個範本

  1. 1

    點擊「使用這個範本」,在 Ottermind Studio 中開啟並自動填入需求。

  2. 2

    在需求中補充你的品牌、受眾、頁面與內容。

  3. 3

    Ottermind 以這套設計為靈感打造全新網站,你可以在對話中繼續修改。