https://github.com/odhyp/odhyp.com
Reflections & frustrations in coding
https://github.com/odhyp/odhyp.com
cloudflare-pages digital-garden docs hugo odhyp personal-site portfolio python tailwindcss tailwindcss-v4
Last synced: 5 days ago
JSON representation
Reflections & frustrations in coding
- Host: GitHub
- URL: https://github.com/odhyp/odhyp.com
- Owner: odhyp
- License: mit
- Created: 2024-05-15T12:19:33.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-06-27T16:40:59.000Z (6 days ago)
- Last Synced: 2025-06-27T17:38:21.324Z (6 days ago)
- Topics: cloudflare-pages, digital-garden, docs, hugo, odhyp, personal-site, portfolio, python, tailwindcss, tailwindcss-v4
- Language: HTML
- Homepage: https://odhyp.com
- Size: 35.9 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
**[odhyp.com](https://odhyp.com)**
my personal website and digital garden
code is licensed under MIT,
words and images are licensed under CC BY-NC-SA 4.0.
self-note
## Future additions?
- [ ] Shortcodes
- [ ] Image side-by-side comparison
- [ ] Image gallery/slider
- [x] Callouts (success, warning, danger, important, info)
- [ ] Design a good logo
- [ ] Enlarge images when clicked (image modal)
- [ ] Search function using Pagefind (put in on top-right corner)
- [ ] Dark mode?
- [ ] Include pagefind in package.json (`npm install pagefind`)
## Adding new content
### Writings page
```bash
hugo new --kind writing writings/2025-06-22-sample-writing.md
```
### Projects page
```bash
hugo new --kind project projects/2025-06-22-sample-project.md
```
## Using custom shortcodes
### 1. Wrapper
Wrap content with a custom TailwindCSS class.
```md
{{< wrapper class="your-tailwind-classes" >}}
**Your content here**
{{< /wrapper >}}
```
**Parameters:**
- class – (required) TailwindCSS classes to style the wrapper container
### 2. Image/Figure
Insert responsive images with optional captions and custom styles.
```md
{{< img src="path/to/image.jpg" alt="Descriptive alt text" caption="Optional caption" class="your-tailwind-classes" >}}
```
**Parameters:**
- `src`: (required) URL or path to the image file
- `alt`: (required) Alternative text for accessibility and SEO
- `caption`: (optional) Text shown below the image
- `class`: (optional) TailwindCSS classes for styling
### 3. Icon Link
Insert styled links with optional icons, ideal for external resources or references.
```md
{{< icon href="https://example.com" title="Link text" icon="external-link" >}}
```
**Parameters:**
- `href`: (required) URL to link to
- `title`: (required) Text displayed as the link label
- `icon`: (optional) Lucide icon name to display beside the text
### 4. Callouts
Insert callouts with icon based on type. Currently, there are 6 types:
1. Tip
2. Info
3. Warning
4. Important
5. Todo
6. Note (default)
```md
{{< callout type="tip" title="Quick Trick" >}}
Callout content here.
{{< /callout >}}
```
**Parameters:**
- `type`: (optional) Controls icon and color
- `title`: (optional) Heading title (default title based on type)
### 5. Threads (Instagram)
```md
{{< threads username="odhypradhana" id="tuNapAN1n1" >}}
```
**Parameters:**
- `username`: (required) Username
- `id`: (required) Post ID