tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-14 08:17:37 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
main
HugoBlox-kit/templates/dev-portfolio/README.md
T
George Cushen a034cf7dbe docs: edit
2026-04-29 10:29:48 +01:00

239 lines
10 KiB
Markdown
Raw Permalink Blame History

# [The Dev Portfolio That Gets You Hired](https://github.com/HugoBlox/hugo-theme-dev-portfolio)
[![Screenshot](.github/preview.png)](https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=preview)
<!-- TODO: Replace with a short demo video showing Hugo Chat generating a portfolio page -->
https://github.com/user-attachments/assets/a6b676c0-1c10-4734-a55f-68c6f72d1612
<h1 align="center">Ship Your Portfolio Before The Weekend</h1>
<p align="center">
<strong>Your projects deserve better than a GitHub pinned repo.</strong><br/>
Showcase real work, ship a clean blog, and stand out with a modern dark-first design — all from Markdown files you own. No fragile React app required.<br/>
Built on <a href="https://github.com/HugoBlox/kit">HugoBlox</a> — the open-source framework where AI generates your pages and you own everything as Markdown.
</p>
<p align="center">
<a href="https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=cta_top"><b>Deploy Free (60s)</b></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=cta_top_dev-portfolio"><b>Customize with AI</b></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=demo">Live Demo</a>
</p>
<div align="center">
<a href="https://github.com/HugoBlox/hugo-theme-dev-portfolio">
<img src="https://img.shields.io/github/stars/HugoBlox/hugo-theme-dev-portfolio?label=Star&logo=github&style=flat-square&color=181717" alt="GitHub Stars">
</a>
<a href="https://discord.gg/z8wNYzb">
<img src="https://img.shields.io/discord/722225264733716590?label=Discord&logo=discord&logoColor=white&style=flat-square&color=5865F2" alt="Discord">
</a>
<a href="https://github.com/HugoBlox/kit">
<img src="https://img.shields.io/github/stars/HugoBlox/kit?label=HugoBlox&logo=github&style=flat-square&color=181717" alt="HugoBlox Stars">
</a>
</div>
<p align="center">
<sub>Part of the <a href="https://github.com/HugoBlox/kit"><strong>HugoBlox</strong></a> ecosystem · <strong>150,000+</strong> sites · Rated <strong>4.9/5</strong> (official survey) · Since <strong>2016</strong></sub>
</p>
---
## Why This Template?
Most developer portfolios look the same — and most "quick" site builders produce slow, bloated React apps you can't maintain. This is a **fast, modern portfolio** that makes your work look as good as it is:
- **Students & grads** applying to internships, MSc programs, or junior roles — stand out with a living portfolio, not a flat resume
- **Software engineers** who want a modern dark-first design that feels premium without writing frontend code
- **STEM professionals** (data, ML, research, engineering) showcasing projects and technical writing
- **Anyone job-hunting** who needs projects, tech stack, experience timeline, and a blog in one credible site
> *"I deployed this on a Friday evening and had three recruiters comment on it by Monday. The dark mode and project grid made my work look 10x more polished than a GitHub profile."*
> — **Kai Nakamura**, Software Engineer
> *"My students use this as their default portfolio template. They fork it, edit Markdown, push to GitHub Pages — done. No React, no Vercel bills, no maintenance headaches."*
> — **Dr. Amira Hassan**, CS Lecturer, TU Munich
<p align="center">
<a href="https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=cta_mid">
<img src="https://img.shields.io/badge/⚡️%20Deploy%20Your%20Portfolio%20in%2060s-7c3aed?style=for-the-badge" alt="Deploy this template" width="400">
</a>
</p>
---
## Features
| Feature | Benefit |
| :--- | :--- |
| **Filterable project grid** | Showcase your work with tags, smooth transitions, and featured images. Visitors find what matters fast. |
| **Tech stack display** | Icon grid of your tools and languages — recruiters see your skills at a glance. |
| **Experience & education timeline** | Structured career history with dates, roles, and descriptions. |
| **Blog with featured images** | Write technical posts in Markdown. Code highlighting, math, and diagrams included. |
| **Dark-first design** | Looks premium in dark mode, works perfectly in light. No design skills needed. |
| **SEO & AI-ready** | Optimized for search engines and LLMs — your work gets found and recommended. |
| **AI page generation** | Describe what you need to [Hugo Chat](https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=features_dev-portfolio) — get structured pages with correct front matter instantly. |
| **Visual editor** | Drag-and-drop blocks in VS Code with [Ownable CMS](https://marketplace.visualstudio.com/items?itemName=ownable.ownable). No coding needed. |
| **Plain Markdown** | Every file is human-readable. No database, no lock-in, take your content anywhere. |
| **Free hosting** | Deploy to GitHub Pages, Netlify, Vercel, or Cloudflare — all free tier. |
---
## 🚀 Get Started
### Step 1: Deploy Your Site
**Option A: Launch in browser** (fastest — no install needed)
> [!TIP]
> Deploy a live site in 60 seconds — no software to install:
> [**Deploy Dev Portfolio free**](https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=get_started)
**Option B: Use the CLI**
```bash
# Requires Hugo Extended & Node.js
npx hugoblox create site --template dev-portfolio
```
### Step 2: Customize With AI + Visual Editing
<table>
<tr>
<td width="50%">
**✨ Hugo Chat** — AI customization
Tell Hugo Chat what you want in plain English. It generates structured pages with the right front matter, shortcodes, and blocks for this template.
> *"Add a project page for my CLI tool with tech stack, screenshots, and a GitHub link"*
[**Try Hugo Chat — free**](https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=step2_dev-portfolio)
</td>
<td width="50%">
**Ownable CMS** — visual editing in VS Code
1. Install [Ownable CMS](https://marketplace.visualstudio.com/items?itemName=ownable.ownable)
2. Open your project in VS Code
3. Click the Ownable icon to start editing visually
</td>
</tr>
</table>
![Ownable CMS in Action](https://raw.githubusercontent.com/HugoBlox/kit/main/.github/media/studio/slide-1.webp)
*Ownable CMS: Drag-and-drop page builder inside VS Code.*
> [!NOTE]
> **New to Hugo?** No problem. You don't need to know Hugo — edit visually or write Markdown. Hugo is the engine under the hood that makes your site fast, secure, and free to host. [Learn more →](https://docs.ownable.dev/?utm_source=github&utm_medium=readme&utm_content=docs_dev-portfolio)
---
## 💎 Go Premium
Love the free version? **Dev Portfolio Pro** takes it further:
- Premium designs that make an unforgettable first impression
- Advanced project layouts and gallery options
- Enhanced timeline and skill visualizations
- Remove attribution, priority support
| | **Dev Portfolio** (Free) | **Dev Portfolio Pro** |
| :--- | :---: | :---: |
| Design | Modern & clean | **Premium designs** |
| Project layouts | Standard grid | **Advanced gallery** |
| Skill display | Icon grid | **Enhanced visuals** |
| Support | Community | **Priority** |
<p align="center">
<a href="https://hugoblox.com/pricing?utm_source=github&utm_medium=readme&utm_content=premium_dev-portfolio"><b>Compare plans</b></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://hugoblox.com/templates/dev-portfolio-pro?utm_source=github&utm_medium=readme&utm_content=premium_deploy_dev-portfolio"><b>Deploy Pro version</b></a>
</p>
---
## 🏆 Why HugoBlox?
> *Why not just use WordPress, Webflow, or an AI builder like Lovable?*
| | **AI builders** (Lovable, v0) | **CMS platforms** (WordPress, Webflow) | **HugoBlox** |
| :--- | :---: | :---: | :---: |
| AI generates your pages | Yes | No | **Yes** |
| You own the output as readable files | No — React code | No — database | **Yes — Markdown** |
| Free to host forever | No | No | **Yes** |
| Human-editable without the tool | Barely | No | **Yes — it's Markdown** |
| Open source | No | No | **Yes — MIT licensed** |
> [!IMPORTANT]
> Your content is plain Markdown files. No lock-in, no database, no vendor dependency. If you ever want to leave, take your files and go.
---
## FAQ
<details>
<summary><b>Do I need to know Hugo?</b></summary>
No. Edit visually with Ownable CMS or write Markdown. Hugo is the build engine — you don't need to touch it.
</details>
<details>
<summary><b>Can I use this for non-dev portfolios?</b></summary>
Yes. The project grid, blog, and timeline work for any profession. But the dark-first design and tech stack section are built with developers in mind.
</details>
<details>
<summary><b>Can I host for free?</b></summary>
Yes. GitHub Pages, Netlify, Vercel, and Cloudflare Pages all have free tiers for static sites.
</details>
<details>
<summary><b>Can I migrate my content later?</b></summary>
Yes. Your site is just Markdown files in a folder. Copy them anywhere.
</details>
<details>
<summary><b>What's Hugo Chat?</b></summary>
An AI assistant trained on Hugo and HugoBlox docs. Describe what you want and it generates the right pages with correct front matter. <a href="https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=faq_dev-portfolio">Free to try.</a>
</details>
<details>
<summary><b>Can I cancel Pro anytime?</b></summary>
Yes. No questions asked.
</details>
---
<h2 align="center">🚀 Ready to launch?</h2>
<p align="center">
Deploy in 60 seconds. Customize with AI. Own it as Markdown forever.
</p>
<p align="center">
<a href="https://hugoblox.com/templates/dev-portfolio?utm_source=github&utm_medium=readme&utm_content=cta_final"><b>Deploy Dev Portfolio — free</b></a>
&nbsp;&nbsp;|&nbsp;&nbsp;
<a href="https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=cta_final_dev-portfolio"><b>Customize with AI</b></a>
</p>
---
## Community & Support
- 💬 [**Discord**](https://discord.gg/z8wNYzb) — ask questions, share your site
- 📚 [**Docs**](https://docs.ownable.dev/?utm_source=github&utm_medium=readme&utm_content=community_dev-portfolio)
- ⭐ [**Star HugoBlox**](https://github.com/HugoBlox/kit) — help others find it
- 🐦 [**Follow on X**](https://x.com/GoOwnable)
### Sponsors
[**❤️ Sponsor on GitHub**](https://github.com/sponsors/gcushen) | [**🏢 Become a Partner**](https://github.com/sponsors/gcushen)
---
MIT © 2016-present [**Lore Labs**](https://lore.tech/?utm_source=github&utm_medium=readme)
Reference in new issue View Git Blame Copy Permalink