Downloaded theme
This commit is contained in:
0
themes/minimal-black/exampleSite/content/_index.md
Normal file
0
themes/minimal-black/exampleSite/content/_index.md
Normal file
@@ -0,0 +1,128 @@
|
||||
+++
|
||||
title = "About Me"
|
||||
subtitle = "Software Engineer | Full Stack Developer | Open Source Enthusiast"
|
||||
layout = "about-alternative"
|
||||
+++
|
||||
|
||||
I'm a software engineer passionate about building elegant solutions to complex problems. Currently working on modern web applications and exploring the intersection of design, performance, and developer experience.
|
||||
|
||||
## What I Do
|
||||
|
||||
I work across the full stack with expertise in:
|
||||
|
||||
- **Backend Development** — Scalable APIs, microservices, database design
|
||||
- **Frontend Engineering** — React, Vue, modern JavaScript frameworks
|
||||
- **Cloud & DevOps** — AWS, Docker, Kubernetes, CI/CD pipelines
|
||||
- **Open Source** — Contributing to projects and building developer tools
|
||||
|
||||
## Current Projects
|
||||
|
||||
Right now I'm focused on:
|
||||
|
||||
- Building minimal Hugo themes for personal sites
|
||||
- Exploring dark-mode design patterns and accessibility
|
||||
- Writing about web performance and developer experience
|
||||
- Contributing to open-source projects in the web ecosystem
|
||||
|
||||
## About This Layout
|
||||
|
||||
> This page demonstrates the **alternative about layout** with a sidebar profile card.
|
||||
|
||||
### Key Features
|
||||
|
||||
This layout includes:
|
||||
|
||||
1. **Left Sidebar Profile Card** with:
|
||||
- Avatar/profile image (or placeholder icon)
|
||||
- Name and role
|
||||
- Location indicator
|
||||
- Customizable stats (configured in `hugo.toml`)
|
||||
- Social media links
|
||||
|
||||
2. **Main Content Area** with:
|
||||
- Introduction section
|
||||
- Experience cards (from `---` separators)
|
||||
- Tech stack badges (configured in `hugo.toml`)
|
||||
|
||||
### How to Configure
|
||||
|
||||
**Stats and Skills** are parametrized in your `hugo.toml`:
|
||||
|
||||
```toml
|
||||
[params.about.alt]
|
||||
# Custom stats
|
||||
[[params.about.alt.stats]]
|
||||
value = "5+"
|
||||
label = "Years Coding"
|
||||
|
||||
# Tech stack with icons
|
||||
[[params.about.alt.skills]]
|
||||
label = "JavaScript"
|
||||
icon = "devicon-javascript-plain"
|
||||
```
|
||||
|
||||
This makes it easy to update your stats and skills without editing this page!
|
||||
|
||||
---
|
||||
|
||||
**Lead Developer** — [Modern Tech Co](https://example.com)
|
||||
*2022 – Present • Remote*
|
||||
|
||||
Leading development of cloud-native applications and mentoring engineering teams. Focus on scalable architecture, clean code practices, and continuous delivery.
|
||||
|
||||
---
|
||||
|
||||
**Senior Engineer** — Startup Ventures
|
||||
*2020 – 2022 • San Francisco*
|
||||
|
||||
Built full-stack applications from scratch. Worked with React, Node.js, PostgreSQL, and AWS to deliver features serving hundreds of thousands of users.
|
||||
|
||||
---
|
||||
|
||||
**Software Engineer** — Digital Solutions
|
||||
*2018 – 2020 • New York*
|
||||
|
||||
Developed enterprise applications using Java, Spring Boot, and modern frontend frameworks. Collaborated with cross-functional teams to ship quality software.
|
||||
|
||||
---
|
||||
|
||||
**Junior Developer** — Tech Academy
|
||||
*2016 – 2018 • Boston*
|
||||
|
||||
Started my career building web applications and learning industry best practices. Contributed to client projects and internal tooling.
|
||||
|
||||
---
|
||||
|
||||
## Layout Comparison
|
||||
|
||||
| Feature | Standard About | Alternative About |
|
||||
|---------|---------------|-------------------|
|
||||
| Layout | Centered, single column | Sidebar + content |
|
||||
| Profile Info | Top hero section | Left sidebar card |
|
||||
| Stats | Not included | Configurable stats grid |
|
||||
| Tech Stack | Not included | Icon badges |
|
||||
| Timeline | Vertical with markers | Card-based grid |
|
||||
| Best For | Traditional resumes | Modern portfolios |
|
||||
|
||||
Try both layouts to see which fits your style! Switch by changing `layout = "about"` or `layout = "about-alternative"` in the frontmatter.
|
||||
|
||||
### Responsive Design
|
||||
|
||||
Both layouts are fully responsive:
|
||||
- **Desktop:** Sidebar + content (alternative) or centered (standard)
|
||||
- **Tablet:** Stacked layout with adjusted spacing
|
||||
- **Mobile:** Single column, optimized for small screens
|
||||
|
||||
---
|
||||
|
||||
## Get Started
|
||||
|
||||
To use this layout on your site:
|
||||
|
||||
1. Copy this content file structure
|
||||
2. Set `layout = "about-alternative"` in frontmatter
|
||||
3. Configure stats and skills in `hugo.toml`
|
||||
4. Add your own content and experience
|
||||
5. Optionally add an avatar image to `static/images/`
|
||||
|
||||
That's it! The theme handles all the styling and responsive behavior automatically.
|
||||
111
themes/minimal-black/exampleSite/content/about/_index.md
Normal file
111
themes/minimal-black/exampleSite/content/about/_index.md
Normal file
@@ -0,0 +1,111 @@
|
||||
+++
|
||||
title = "About Me"
|
||||
subtitle = "Software Engineer | Full Stack Developer | Open Source Enthusiast"
|
||||
layout = "about"
|
||||
+++
|
||||
|
||||
I'm a passionate software engineer with expertise in building scalable web applications and developer tools. With a focus on clean code, performance optimization, and user experience, I help teams ship products that users love.
|
||||
|
||||
## What I Do
|
||||
|
||||
I specialize in full-stack development with a keen interest in:
|
||||
|
||||
- **Backend Engineering** — Building robust APIs and microservices with modern frameworks
|
||||
- **Frontend Development** — Creating responsive, accessible user interfaces
|
||||
- **DevOps & Infrastructure** — Container orchestration, CI/CD, and cloud platforms
|
||||
- **Open Source** — Contributing to and maintaining open-source projects
|
||||
|
||||
## Timeline Demonstration
|
||||
|
||||
> This page demonstrates the **standard about layout** with a timeline feature. Use horizontal rules (`---`) to separate timeline entries. Each section becomes a card in the timeline visualization.
|
||||
|
||||
### Current Focus
|
||||
|
||||
Right now, I'm exploring minimal design patterns, modern web frameworks, and building tools that make developers' lives easier. I believe in writing code that is simple, maintainable, and well-documented.
|
||||
|
||||
---
|
||||
|
||||
**Senior Software Engineer** — [Tech Company](https://example.com)
|
||||
*January 2022 – Present • Remote*
|
||||
|
||||
Leading the development of cloud-native applications using modern frameworks and best practices. Mentoring junior developers and driving technical decisions for large-scale projects.
|
||||
|
||||
Key achievements:
|
||||
- Architected microservices platform serving 1M+ users
|
||||
- Reduced deployment time by 60% through CI/CD improvements
|
||||
- Led migration from monolith to distributed architecture
|
||||
|
||||
**Technologies:** React, Node.js, PostgreSQL, Docker, Kubernetes, AWS
|
||||
|
||||
---
|
||||
|
||||
**Full Stack Developer** — Startup Inc.
|
||||
*March 2020 – December 2021 • San Francisco, CA*
|
||||
|
||||
Developed and maintained multiple web applications from concept to production. Collaborated with cross-functional teams to deliver features that increased user engagement by 40%.
|
||||
|
||||
- Built RESTful APIs serving 500K+ daily requests
|
||||
- Implemented real-time features using WebSockets
|
||||
- Optimized database queries reducing response time by 50%
|
||||
|
||||
**Technologies:** Python, Django, Vue.js, Redis, MySQL, GCP
|
||||
|
||||
---
|
||||
|
||||
**Software Engineer** — Digital Solutions Corp.
|
||||
*June 2018 – February 2020 • New York, NY*
|
||||
|
||||
Worked on enterprise solutions for Fortune 500 clients. Focused on backend development, database design, and system integration.
|
||||
|
||||
- Developed internal tools that saved 200+ hours monthly
|
||||
- Integrated third-party APIs for payment processing
|
||||
- Maintained legacy systems while modernizing architecture
|
||||
|
||||
**Technologies:** Java, Spring Boot, Oracle DB, Angular, Jenkins
|
||||
|
||||
---
|
||||
|
||||
**Junior Developer** — Code Academy
|
||||
*January 2017 – May 2018 • Boston, MA*
|
||||
|
||||
Started my professional journey building web applications and learning industry best practices. Contributed to various client projects and internal tooling.
|
||||
|
||||
- Developed responsive web interfaces
|
||||
- Wrote automated tests achieving 90%+ coverage
|
||||
- Participated in code reviews and agile ceremonies
|
||||
|
||||
**Technologies:** JavaScript, PHP, Laravel, MySQL, Git
|
||||
|
||||
---
|
||||
|
||||
## Education & Certifications
|
||||
|
||||
**Bachelor of Science in Computer Science**
|
||||
University of Technology • 2013-2017
|
||||
|
||||
**Certifications:**
|
||||
- AWS Certified Solutions Architect
|
||||
- Google Cloud Professional Developer
|
||||
- Certified Kubernetes Administrator (CKA)
|
||||
|
||||
---
|
||||
|
||||
## How This Layout Works
|
||||
|
||||
This about page uses the **timeline layout**. Here's how to customize it:
|
||||
|
||||
1. Set `layout = "about"` in the frontmatter
|
||||
2. Write your introduction before the first `---` separator
|
||||
3. Each section after `---` becomes a timeline card
|
||||
4. Use markdown formatting: **bold** for job titles, *italic* for dates
|
||||
5. Add links using `[text](url)` syntax
|
||||
6. Timeline items appear in chronological order (newest first)
|
||||
|
||||
### Features Demonstrated
|
||||
|
||||
- ✅ Hero section with avatar and subtitle
|
||||
- ✅ Timeline visualization with markers and cards
|
||||
- ✅ Markdown content with formatting
|
||||
- ✅ Links and emphasis
|
||||
- ✅ Responsive design
|
||||
- ✅ Social links in footer
|
||||
592
themes/minimal-black/exampleSite/content/blog/theme-guide.md
Normal file
592
themes/minimal-black/exampleSite/content/blog/theme-guide.md
Normal file
@@ -0,0 +1,592 @@
|
||||
+++
|
||||
title = "Complete Guide to Minimal Black Theme"
|
||||
date = "2025-01-15"
|
||||
author = "Jim Christopoulos"
|
||||
tags = ["hugo", "tutorial", "guide", "theme"]
|
||||
categories = ["documentation"]
|
||||
description = "A comprehensive guide to all features and capabilities of the Minimal Black Hugo theme"
|
||||
draft = false
|
||||
+++
|
||||
|
||||
Welcome to the complete guide for the Minimal Black Hugo theme!
|
||||
|
||||
This post demonstrates all the features, components, and customization options available in the theme.
|
||||
|
||||
## Introduction
|
||||
|
||||
Minimal Black is designed for developers, designers, and everybody who want a clean, fast, and beautiful personal website.
|
||||
|
||||
This guide will walk you through every feature with examples you can use in your own content.
|
||||
|
||||
## Typography & Text Formatting
|
||||
|
||||
### Headings
|
||||
|
||||
The theme supports all six heading levels with proper hierarchy and spacing:
|
||||
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
|
||||
Each heading automatically gets an anchor link (hover to see the # symbol) for easy linking.
|
||||
|
||||
### Text Emphasis
|
||||
|
||||
Use standard Markdown for text formatting:
|
||||
|
||||
- **Bold text** for emphasis
|
||||
- *Italic text* for subtle emphasis
|
||||
- ***Bold and italic*** for strong emphasis
|
||||
- ~~Strikethrough~~ for deleted content
|
||||
- `Inline code` for code references
|
||||
|
||||
You can also ==highlight text== using the mark syntax (if enabled in your config).
|
||||
|
||||
### Links
|
||||
|
||||
Links are styled with subtle hover effects:
|
||||
|
||||
- [External link](https://example.com)
|
||||
|
||||
## Lists
|
||||
|
||||
### Unordered Lists
|
||||
|
||||
Simple bullet lists:
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Nested item 1
|
||||
- Nested item 2
|
||||
- Deeply nested item
|
||||
- Third item
|
||||
|
||||
### Ordered Lists
|
||||
|
||||
Numbered lists:
|
||||
|
||||
1. First step
|
||||
2. Second step
|
||||
1. Sub-step A
|
||||
2. Sub-step B
|
||||
3. Third step
|
||||
|
||||
### Task Lists
|
||||
|
||||
Interactive checkboxes:
|
||||
|
||||
- [x] Completed task
|
||||
- [x] Another completed item
|
||||
- [ ] Pending task
|
||||
- [ ] Another pending item
|
||||
- [x] Nested completed
|
||||
- [ ] Nested pending
|
||||
|
||||
Task lists are great for project planning, feature tracking, or tutorial steps.
|
||||
|
||||
### Definition Lists
|
||||
|
||||
For glossary-style content:
|
||||
|
||||
Hugo
|
||||
: A fast static site generator written in Go
|
||||
|
||||
Markdown
|
||||
: A lightweight markup language for formatting text
|
||||
|
||||
Tailwind CSS
|
||||
: A utility-first CSS framework
|
||||
|
||||
## Blockquotes
|
||||
|
||||
### Standard Blockquotes
|
||||
|
||||
Simple quotes with gradient background:
|
||||
|
||||
> This is a standard blockquote. It has a subtle gradient background and a colored left border for visual distinction.
|
||||
|
||||
> Multi-paragraph blockquotes work too.
|
||||
>
|
||||
> They maintain proper spacing between paragraphs while keeping the unified look.
|
||||
|
||||
### Nested Blockquotes
|
||||
|
||||
You can nest quotes:
|
||||
|
||||
> This is the outer quote.
|
||||
>
|
||||
> > This is a nested quote inside.
|
||||
> >
|
||||
> > > You can nest multiple levels.
|
||||
|
||||
### GitHub-Style Alerts
|
||||
|
||||
The theme supports GitHub-flavored alert callouts:
|
||||
|
||||
> [!NOTE]
|
||||
> This is a note callout. Use it for informational content that readers should be aware of.
|
||||
|
||||
> [!TIP]
|
||||
> This is a tip callout. Perfect for helpful suggestions and best practices.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> This is an important callout. Use it for critical information that must not be missed.
|
||||
|
||||
> [!WARNING]
|
||||
> This is a warning callout. Great for cautionary information and potential pitfalls.
|
||||
|
||||
> [!CAUTION]
|
||||
> This is a caution callout. Use for dangerous actions or critical warnings.
|
||||
|
||||
## Code Blocks
|
||||
|
||||
### Inline Code
|
||||
|
||||
Reference code inline with `backticks`.
|
||||
|
||||
Great for mentioning `variables`, `functions()`, or `file-names.txt`.
|
||||
|
||||
### Basic Code Blocks
|
||||
|
||||
Simple code blocks without syntax highlighting:
|
||||
|
||||
```
|
||||
This is a plain code block.
|
||||
No syntax highlighting.
|
||||
Perfect for plain text or output.
|
||||
```
|
||||
|
||||
### Syntax Highlighted Code
|
||||
|
||||
The theme supports syntax highlighting for dozens of languages:
|
||||
|
||||
**JavaScript:**
|
||||
```javascript
|
||||
|
||||
const greet = (name) => {
|
||||
console.log(`Hello, ${name}!`);
|
||||
return `Welcome to the Minimal Black theme`;
|
||||
};
|
||||
|
||||
// Async/await example
|
||||
async function fetchData(url) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Python:**
|
||||
```python
|
||||
def fibonacci(n):
|
||||
"""Calculate fibonacci number recursively."""
|
||||
if n <= 1:
|
||||
return n
|
||||
return fibonacci(n-1) + fibonacci(n-2)
|
||||
|
||||
# List comprehension example
|
||||
squares = [x**2 for x in range(10)]
|
||||
print(squares)
|
||||
```
|
||||
|
||||
**Go:**
|
||||
```go
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
// Simple HTTP server
|
||||
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
|
||||
fmt.Fprintf(w, "Hello, World!")
|
||||
})
|
||||
|
||||
http.ListenAndServe(":8080", nil)
|
||||
}
|
||||
```
|
||||
|
||||
**Bash:**
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
# Deploy script
|
||||
hugo --minify
|
||||
rsync -avz public/ user@server:/var/www/
|
||||
echo "Deployment complete!"
|
||||
```
|
||||
|
||||
**CSS:**
|
||||
```css
|
||||
/* Dark theme variables */
|
||||
:root {
|
||||
--color-bg: #000000;
|
||||
--color-accent: #c084fc;
|
||||
--transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: var(--color-accent);
|
||||
transition: var(--transition);
|
||||
}
|
||||
```
|
||||
|
||||
**HTML:**
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Minimal Black</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code Block Features
|
||||
|
||||
All code blocks include:
|
||||
|
||||
- **Language Label** — Shows the language in top-right corner
|
||||
- **Copy Button** — Click to copy code to clipboard
|
||||
- **Line Numbers** — Optional (configure in hugo.toml)
|
||||
- **Syntax Highlighting** — Powered by Hugo's Chroma
|
||||
|
||||
## Tables
|
||||
|
||||
### Basic Tables
|
||||
|
||||
| Feature | Supported | Notes |
|
||||
|---------|-----------|-------|
|
||||
| Dark Mode | ✅ | True black backgrounds |
|
||||
| Search | ✅ | Client-side, fast |
|
||||
| TOC | ✅ | Auto-generated |
|
||||
| Analytics | ✅ | Multiple providers |
|
||||
|
||||
### Aligned Columns
|
||||
|
||||
| Left Aligned | Center Aligned | Right Aligned |
|
||||
|:-------------|:--------------:|--------------:|
|
||||
| Left | Center | Right |
|
||||
| Text | Text | 100 |
|
||||
| More | Data | 250 |
|
||||
|
||||
### Complex Tables
|
||||
|
||||
| Language | Supported | Syntax Highlighting | Code Blocks |
|
||||
|----------|:---------:|:-------------------:|-------------|
|
||||
| JavaScript | ✅ | ✅ | Yes |
|
||||
| Python | ✅ | ✅ | Yes |
|
||||
| Go | ✅ | ✅ | Yes |
|
||||
| Rust | ✅ | ✅ | Yes |
|
||||
| TypeScript | ✅ | ✅ | Yes |
|
||||
|
||||
Tables are responsive and scroll horizontally on small screens.
|
||||
|
||||
## Images
|
||||
|
||||
### Basic Image
|
||||
|
||||
|
||||
|
||||
### Image with Caption
|
||||
|
||||
Images automatically get a lightbox overlay on hover (magnifying glass icon appears).
|
||||
|
||||
### Multiple Images
|
||||
|
||||
|
||||
|
||||
|
||||
> [!NOTE]
|
||||
> *Stock Images obtained from pexels.com*
|
||||
|
||||
Images are responsive and scale to fit the content width.
|
||||
|
||||
## Gallery Shortcode
|
||||
|
||||
Use the gallery shortcode for image collections:
|
||||
|
||||
{{< gallery >}}
|
||||
|
||||
|
||||
|
||||
{{< /gallery >}}
|
||||
|
||||
The gallery includes:
|
||||
- Lightbox functionality
|
||||
- Click to view full size
|
||||
- Navigate between images
|
||||
- Responsive grid layout
|
||||
|
||||
## Mermaid Diagrams
|
||||
|
||||
### Flowchart
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Start] --> B{Is it dark mode?}
|
||||
B -->|Yes| C[Load dark theme]
|
||||
B -->|No| D[Load light theme]
|
||||
C --> E[Render page]
|
||||
D --> E
|
||||
E --> F[User sees beautiful site]
|
||||
```
|
||||
|
||||
### Sequence Diagram
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Browser
|
||||
participant Hugo
|
||||
participant Theme
|
||||
|
||||
User->>Browser: Visit site
|
||||
Browser->>Hugo: Request page
|
||||
Hugo->>Theme: Render template
|
||||
Theme->>Hugo: Return HTML
|
||||
Hugo->>Browser: Serve page
|
||||
Browser->>User: Display site
|
||||
```
|
||||
|
||||
### Class Diagram
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Theme {
|
||||
+String name
|
||||
+String version
|
||||
+render()
|
||||
+configure()
|
||||
}
|
||||
class Config {
|
||||
+Object params
|
||||
+validate()
|
||||
}
|
||||
class Content {
|
||||
+String title
|
||||
+Date date
|
||||
+render()
|
||||
}
|
||||
|
||||
Theme --> Config
|
||||
Theme --> Content
|
||||
```
|
||||
|
||||
## Horizontal Rules
|
||||
|
||||
Separate sections with horizontal rules:
|
||||
|
||||
---
|
||||
|
||||
Like this one above. They create clear visual breaks in content.
|
||||
|
||||
## Footnotes
|
||||
|
||||
You can add footnotes[^1] to your content. They appear at the bottom of the page[^2].
|
||||
|
||||
[^1]: This is a footnote. It provides additional context without interrupting the flow.
|
||||
[^2]: Footnotes are automatically numbered and linked.
|
||||
|
||||
## Shortcodes
|
||||
|
||||
### Alert Shortcode
|
||||
|
||||
Use the alert shortcode for callouts:
|
||||
|
||||
{{< alert type="note" >}}
|
||||
This is a custom alert using the shortcode syntax. It's an alternative to GitHub-style alerts.
|
||||
{{< /alert >}}
|
||||
|
||||
{{< alert type="warning" >}}
|
||||
Warning alerts grab attention for important notices.
|
||||
{{< /alert >}}
|
||||
|
||||
## Table of Contents
|
||||
|
||||
This page demonstrates the automatic table of contents:
|
||||
|
||||
- **Desktop:** TOC appears in left sidebar
|
||||
- **Tablet:** TOC is hidden for more reading space
|
||||
- **Mobile:** TOC is completely hidden
|
||||
|
||||
The TOC automatically:
|
||||
- Tracks your scroll position
|
||||
- Highlights the current section
|
||||
- Links to all headings (H2-H4)
|
||||
- Stays visible while scrolling (sticky)
|
||||
|
||||
## Dark & Light Mode
|
||||
|
||||
The theme supports both dark and light modes:
|
||||
|
||||
### Dark Mode (Default)
|
||||
- True black backgrounds (#000000)
|
||||
- OLED-friendly
|
||||
- Purple accents (#c084fc)
|
||||
- Reduced eye strain in low light
|
||||
|
||||
### Light Mode
|
||||
- Clean white backgrounds
|
||||
- High contrast for daylight reading
|
||||
- Purple accents (#a855f7)
|
||||
- Print-friendly
|
||||
|
||||
### System Mode
|
||||
- Automatically matches OS preference
|
||||
- Respects user's system settings
|
||||
- Seamless switching
|
||||
|
||||
Users can toggle between modes using the theme switcher in the navigation.
|
||||
|
||||
## Search Functionality
|
||||
|
||||
Press **Ctrl/Cmd + K** to try the search:
|
||||
|
||||
1. Type your query
|
||||
2. Results appear instantly
|
||||
3. Use arrow keys to navigate
|
||||
4. Press Enter to visit page
|
||||
5. ESC to close
|
||||
|
||||
The search:
|
||||
- Is client-side (no server needed)
|
||||
- Searches titles and summaries
|
||||
- Highlights matching text
|
||||
- Works offline
|
||||
|
||||
## Navigation
|
||||
|
||||
The theme includes:
|
||||
|
||||
### Header Navigation
|
||||
- Logo/brand name
|
||||
- Main menu links
|
||||
- Theme toggle
|
||||
|
||||
### Footer
|
||||
- Copyright notice
|
||||
- Social links
|
||||
- Attribution
|
||||
|
||||
### Floating Dock (Bottom Right)
|
||||
- Quick actions
|
||||
- Scroll to top
|
||||
|
||||
## Responsive Design
|
||||
|
||||
The theme is fully responsive:
|
||||
|
||||
### Mobile (< 640px)
|
||||
- Single column layout
|
||||
- Collapsible menu
|
||||
- Touch-friendly buttons
|
||||
- Optimized images
|
||||
|
||||
### Tablet (641px - 1023px)
|
||||
- Two column where appropriate
|
||||
- Adjusted spacing
|
||||
- Tablet-optimized navigation
|
||||
|
||||
### Desktop (1024px+)
|
||||
- Full layout with TOC sidebar
|
||||
- Wider content area
|
||||
- Hover effects
|
||||
- Keyboard shortcuts
|
||||
|
||||
## Performance
|
||||
|
||||
The theme is optimized for performance:
|
||||
|
||||
- **Minimal JavaScript**
|
||||
- **Optimized CSS**
|
||||
- **Fast Loading**
|
||||
- **SEO Optimized** — Meta tags, structured data
|
||||
|
||||
## Customization Examples
|
||||
|
||||
### Changing Accent Color
|
||||
|
||||
Edit `assets/css/base.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-accent: #10b981; /* Green instead of purple */
|
||||
}
|
||||
```
|
||||
|
||||
### Adding Custom Fonts
|
||||
|
||||
In your `hugo.toml`:
|
||||
|
||||
```toml
|
||||
[params]
|
||||
customFonts = ["https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"]
|
||||
```
|
||||
|
||||
### Custom CSS
|
||||
|
||||
Create `assets/css/custom.css`:
|
||||
|
||||
```css
|
||||
.my-custom-element {
|
||||
/* Your styles */
|
||||
}
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Content Organization
|
||||
|
||||
1. Use clear, descriptive titles
|
||||
2. Break content into sections with headings
|
||||
3. Add tags and categories
|
||||
4. Include descriptions in frontmatter
|
||||
5. Use featured images for posts
|
||||
|
||||
### Performance
|
||||
|
||||
1. Optimize images before uploading
|
||||
2. Use SVG for logos and icons
|
||||
3. Minimize custom JavaScript
|
||||
4. Leverage Hugo's asset pipeline
|
||||
|
||||
### SEO
|
||||
|
||||
1. Write descriptive meta descriptions
|
||||
2. Use semantic HTML headings
|
||||
3. Add alt text to images
|
||||
4. Create an XML sitemap
|
||||
5. Submit to search engines
|
||||
|
||||
## Conclusion
|
||||
|
||||
This guide covered all major features of the Minimal Black theme. You now know how to:
|
||||
|
||||
- ✅ Format text and create rich content
|
||||
- ✅ Use code blocks with syntax highlighting
|
||||
- ✅ Add images and galleries
|
||||
- ✅ Create diagrams with Mermaid
|
||||
- ✅ Organize content with TOC
|
||||
- ✅ Customize colors and styles
|
||||
- ✅ Optimize for performance
|
||||
- ✅ Make content SEO-friendly
|
||||
|
||||
Start creating amazing content with Minimal Black!
|
||||
|
||||
---
|
||||
|
||||
**Documentation:** [Full Docs](https://gitlab.com/jimchr12/hugo-minimal-black)
|
||||
|
||||
**Repository:** [GitLab](https://gitlab.com/jimchr12/hugo-minimal-black)
|
||||
|
||||
**Issues:** [Report a Bug](https://gitlab.com/jimchr12/hugo-minimal-black/issues)
|
||||
@@ -0,0 +1,321 @@
|
||||
+++
|
||||
title = "Minimal Black Hugo Theme"
|
||||
date = "2025-01-15"
|
||||
description = "A minimal, dark-mode first Hugo theme"
|
||||
github = "https://gitlab.com/jimchr12/hugo-minimal-black"
|
||||
demo = "https://minimal-black-demo.netlify.app"
|
||||
tags = ["hugo", "theme", "web-development", "open-source"]
|
||||
categories = ["web"]
|
||||
featured = true
|
||||
+++
|
||||
|
||||
A comprehensive Hugo theme designed for developers, designers, and everyone in general who value simplicity, performance, and beautiful dare I say dark mode design (maybe?).
|
||||
|
||||
## Overview
|
||||
|
||||
Minimal Black is a modern Hugo theme that combines aesthetic appeal with practical functionality.
|
||||
|
||||
Built with Tailwind CSS and a modular architecture, it provides everything you need for a professional personal website, portfolio or blog.
|
||||
|
||||
### Key Features
|
||||
|
||||
- **True Black Dark Mode** — With purple accents
|
||||
- **Responsive Design** — Perfect on mobile, tablet, and desktop
|
||||
- **Search Functionality** — Fast client-side search with Ctrl/Cmd+K
|
||||
- **Table of Contents** — Auto-generated
|
||||
- **Syntax Highlighting** — Beautiful code blocks with copy functionality
|
||||
- **Multiple Layouts** — Flexible page templates for different content types (more to come hopefully).
|
||||
|
||||
## Technical Architecture
|
||||
|
||||
### Frontend Stack
|
||||
|
||||
- **Hugo Extended** (v0.120.0+) — Static site generator
|
||||
- **Tailwind CSS** — Utility-first CSS framework
|
||||
- **Vanilla JS** — Minimal JS used - no framework
|
||||
- **PostCSS** — CSS processing and optimization
|
||||
|
||||
### CSS Modular Structure
|
||||
|
||||
The CSS is organized into logical modules:
|
||||
|
||||
```
|
||||
assets/css/
|
||||
├── base.css # Theme variables & Tailwind
|
||||
├── utilities.css # Helper classes
|
||||
├── components/ # Reusable UI components
|
||||
│ ├── dock.css
|
||||
│ ├── cards.css
|
||||
│ ├── navigation.css
|
||||
│ ├── search.css
|
||||
│ └── tech-marquee.css
|
||||
├── content/ # Content-specific styles
|
||||
│ ├── markdown.css
|
||||
│ └── toc.css
|
||||
└── pages/ # Page-specific styles
|
||||
├── about.css
|
||||
└── about-alternative.css
|
||||
```
|
||||
|
||||
This modular approach makes the theme:
|
||||
- Easy to maintain and extend
|
||||
- Simple to customize specific components
|
||||
- Clear separation of concerns
|
||||
- Better developer experience
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
### Minimalism First
|
||||
|
||||
The theme embraces minimalism without sacrificing functionality:
|
||||
|
||||
1. **Clean Typography** — Careful font choices and spacing
|
||||
2. **Focused Content** — Remove distractions, highlight what matters
|
||||
3. **Subtle Animations** — Smooth transitions that enhance UX
|
||||
4. **Dark Mode Priority** — True black backgrounds
|
||||
|
||||
## Feature Showcase
|
||||
|
||||
### Search Functionality
|
||||
|
||||
Built-in search with keyboard shortcuts:
|
||||
|
||||
- Press **Ctrl/Cmd + K** to open search
|
||||
- Type to filter results in real-time
|
||||
- Use **Arrow keys** to navigate
|
||||
- Press **Enter** to visit page
|
||||
- **ESC** to close
|
||||
|
||||
The search is client-side, fast, and requires no external services.
|
||||
|
||||
### Code Blocks
|
||||
|
||||
Beautiful syntax highlighting with practical features:
|
||||
|
||||
```javascript
|
||||
// Copy button on hover
|
||||
function greet(name) {
|
||||
console.log(`Hello, ${name}!`);
|
||||
return `Welcome to Minimal Black Theme`;
|
||||
}
|
||||
|
||||
greet("Developer");
|
||||
```
|
||||
|
||||
Features include:
|
||||
|
||||
- Language labels
|
||||
- Copy to clipboard button
|
||||
- Line highlighting
|
||||
- Collapsible / Expandable block
|
||||
|
||||
### GitHub-Style Alerts
|
||||
|
||||
Support for callout boxes:
|
||||
|
||||
> [!NOTE]
|
||||
> This is a note alert for informational content.
|
||||
|
||||
> [!TIP]
|
||||
> This is a tip alert with helpful suggestions.
|
||||
|
||||
> [!WARNING]
|
||||
> This is a warning alert for important notices.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> This is an important alert for critical information.
|
||||
|
||||
### Table of Contents
|
||||
|
||||
MD content automatically gets a TOC:
|
||||
|
||||
- **Sticky Positioning** — Stays visible while scrolling
|
||||
- **Active Tracking** — Highlights current section
|
||||
- **Smooth Scrolling** — Click to jump to section
|
||||
- **Responsive** — Hides on mobile, shows on desktop
|
||||
|
||||
You're seeing it in action on this **page**!
|
||||
|
||||
### Mermaid Diagrams
|
||||
|
||||
Native support for flowcharts and diagrams:
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[User visits site] --> B{Dark mode?}
|
||||
B -->|Yes| C[Load dark theme]
|
||||
B -->|No| D[Load light theme]
|
||||
C --> E[Render content]
|
||||
D --> E
|
||||
E --> F[Fast, beautiful site]
|
||||
```
|
||||
|
||||
Perfect for technical documentation.
|
||||
|
||||
## Configuration
|
||||
|
||||
The theme is highly configurable via `hugo.toml`:
|
||||
|
||||
### Basic Setup
|
||||
|
||||
```toml
|
||||
[params]
|
||||
brand = "Your Name"
|
||||
description = "Your site description"
|
||||
|
||||
[params.theme]
|
||||
defaultTheme = "dark" # or "light" or "system"
|
||||
```
|
||||
|
||||
### Hero Section
|
||||
|
||||
```toml
|
||||
[params.hero]
|
||||
badge = "Software Engineer"
|
||||
title = "Hi, I'm Your Name."
|
||||
role = "Building things."
|
||||
summary = "Description of what you do."
|
||||
location = "City, Country"
|
||||
```
|
||||
|
||||
### Tech Stack Display
|
||||
|
||||
```toml
|
||||
[[params.home.tech]]
|
||||
label = "Python"
|
||||
icon = "devicon-python-plain"
|
||||
|
||||
[[params.home.tech]]
|
||||
label = "Docker"
|
||||
icon = "devicon-docker-plain"
|
||||
```
|
||||
|
||||
### Analytics
|
||||
|
||||
Support for multiple providers:
|
||||
|
||||
```toml
|
||||
[params.analytics]
|
||||
googleAnalytics = "G-XXXXXXXXXX"
|
||||
|
||||
# Or use Plausible, Umami, Fathom
|
||||
```
|
||||
|
||||
## Customization Guide
|
||||
|
||||
### Colors
|
||||
|
||||
Theme colors are CSS custom properties in `assets/css/base.css`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #f9fafb; /* Light background */
|
||||
--color-accent: #a855f7; /* Purple accent */
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--color-bg: #000000; /* True black */
|
||||
--color-accent: #c084fc; /* Lighter purple */
|
||||
}
|
||||
```
|
||||
|
||||
### Adding Custom Styles
|
||||
|
||||
Create `assets/css/custom.css` in your site:
|
||||
|
||||
```css
|
||||
/* Your custom styles */
|
||||
.my-custom-class {
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
Then reference it in your config:
|
||||
|
||||
```toml
|
||||
[params]
|
||||
customCSS = ["css/custom.css"]
|
||||
```
|
||||
|
||||
## Content Organization
|
||||
|
||||
### Recommended Structure
|
||||
|
||||
```
|
||||
content/
|
||||
├── _index.md # Homepage
|
||||
├── about.md # About page
|
||||
├── blog/
|
||||
│ ├── _index.md
|
||||
│ └── posts/
|
||||
├── projects/
|
||||
│ ├── _index.md
|
||||
│ └── individual-projects/
|
||||
└── pages/
|
||||
└── custom-pages/
|
||||
```
|
||||
|
||||
### Frontmatter Examples
|
||||
|
||||
**Blog Post:**
|
||||
```yaml
|
||||
+++
|
||||
title = "Post Title"
|
||||
date = "2025-01-15"
|
||||
tags = ["hugo", "web-dev"]
|
||||
categories = ["tutorials"]
|
||||
draft = false
|
||||
+++
|
||||
```
|
||||
|
||||
**Project:**
|
||||
```yaml
|
||||
+++
|
||||
title = "Project Name"
|
||||
description = "Brief description"
|
||||
github = "https://github.com/..." # Optional
|
||||
demo = "https://demo.com" # Optional
|
||||
featured = true
|
||||
+++
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Netlify
|
||||
|
||||
1. Connect your Git repository
|
||||
2. Build command: `hugo --minify`
|
||||
3. Publish directory: `public`
|
||||
4. Environment: `HUGO_VERSION=0.120.0`
|
||||
|
||||
### Vercel
|
||||
|
||||
1. Import repository
|
||||
2. Framework: Hugo
|
||||
3. Build command: `cd themes/minimal-black && npm install && cd ../.. && hugo --minify`
|
||||
4. Output: `public`
|
||||
|
||||
## Contributing
|
||||
|
||||
Contributions are welcome! See [CONTRIBUTING.md](https://gitlab.com/jimchr12/hugo-minimal-black/blob/main/CONTRIBUTING.md) for guidelines.
|
||||
|
||||
## License
|
||||
|
||||
Released under the MIT License. See [LICENSE](https://gitlab.com/jimchr12/hugo-minimal-black/blob/main/LICENSE) for details.
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
Built with:
|
||||
|
||||
- [Hugo](https://gohugo.io/) — Static site generator
|
||||
- [Tailwind CSS](https://tailwindcss.com/) — CSS framework
|
||||
- [Font Awesome](https://fontawesome.com/) — Icons
|
||||
- [Devicon](https://devicon.dev/) — Technology icons
|
||||
|
||||
---
|
||||
|
||||
**Repository:** [GitLab](https://gitlab.com/jimchr12/hugo-minimal-black)
|
||||
|
||||
**Demo:** [Live Preview](https://minimal-black-demo.netlify.app)
|
||||
|
||||
**Documentation:** [Full Docs](https://gitlab.com/jimchr12/hugo-minimal-black#readme)
|
||||
Reference in New Issue
Block a user