itchio-profile

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 38)

HTML & CSS source code and build pipelines for my itch.io profile page's content. Live @ https://nnda.itch.io

itchio-profile Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Source code for my itch.io profile page.

Main stylesheet: [`src/styles.css`](src/styles.css)
｜
Profile content: [`src/content.html`](src/content.html)

</div>

<br>

## Devlog

- May 28<sup>th</sup> 2026 — [Profile Page Updates: Time is Ticking...](https://itch.io/blog/1536605/profile-page-updates-time-is-ticking)
- March 15<sup>th</sup> 2026 — [Profile Page Updates: Little Updates](https://itch.io/blog/1459365/profile-page-update-little-updates)
- May 23<sup>rd</sup> 2025 — [Profile Page Updates: Documentation](https://itch.io/blog/950966/profile-page-updates-documentation)

<br>

## Page theme settings

Settings used in the itch.io profile page's theme editor.

<table>
<thead>
<tr>
<td colspan="2">
  <b> Theme setting </b>
</td>
<td>
  <b> Value </b>
</td>
</tr>
</thead>

<tbody>

<tr>
<td rowspan="3"><b> Color </b></td>
<td> BG </td>
<td>

`#15141B`

</td>
</tr>

`#E7E9E8` (match `--text` CSS variable)

</td>
</tr>

`#EAEAEA` (match `--link` CSS variable)

</td>
</tr>

`Zen Kaku Gothic New`

</td>
</tr>

`96`

</td>
</tr>

<tr>
<td rowspan="1"><b> Images </b></td>
<td> Size </td>
<td>

`Full width`

</td>
</tr>

<tr>
<td rowspan="2"> My Projects </td>
<td> Layout </td>
<td>

`Grid`

</td>
</tr>

<tr>
<td> B. Radius </td>
<td>

`0`

</td>
</tr>

<tr>
<td rowspan="1"><b> Collections </b></td>
<td> Layout </td>
<td>

`List`

</td>
</tr>
</tbody>
</table>

<br>

## Requirements

- [git](https://git-scm.com/)
- GitHub account
- [Bun](https://bun.com/)

## Installation

0. Star this repository?? 👉👈 (optional)

1. [Fork](https://github.com/nndda/itchio-profile/fork) this repository, and clone your fork locally.

1. Install the dependencies.
    ```
    bun install
    ```

1. Modify the [`src/styles.css`](src/styles.css) and/or the [`src/content.html`](src/content.html) to your liking.

See the [Development](#development) section.

1. Edit `package.json`, and bump the `version` field. e.g. from `1.2.0` to `1.3.0`.

1. Build the CSS.
    ```
    bun run build
    ```

1. Test the CSS and the HTML, by copy-pasting the content of `dist/test.css` and `dist/content.html` to your itch.io profile page.

1. If everything's fine and ready, publish your updates.
    ```
    bun run publish
    ```

And then copy-paste the CSS from `dist/styles.css` to your itch.io profile page's CSS field, and `dist/content.html` to your profile content, and save it.

> [!IMPORTANT]
> If you've only changed the HTML, there's no ***need to bump the version and publish the update*** via `bun run publish`, as that is only for the CSS updates.
>
> You should, however, run the `bun run build`, and then commit and push the changes to the HTML files yourself.

<br>

## Development

How I update and develop my profile page with its HTML and CSS.

I use Firefox, because it has a nice CSS editor feature on its dev tool.

1. Open your itch.io profile page. And clear out the custom CSS field (just clear it out, you don't need to save it).
2. Open the Firefox Web Developer Tools by pressing <kbd>f12</kbd> or <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>.
3. Go to the `Style Editor` tab, and import the CSS source file `src/styles.css`.

![](https://github.com/user-attachments/assets/495e2981-a40e-4d8d-be08-33ddb3567a34)

You can start working with the CSS from here. And save your changes by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd>.

> [!IMPORTANT]
> When importing CSS file that has unicode characters in it (like this CSS),
> Firefox might break those characters.
>
> To fix that:
> 1. Open the CSS in your favourite text editor.
> 2. Select and copy ALL of the content.
> 3. Go back to the Firefox `Style Editor`, and paste over the imported CSS, **overwriting** it.

As for editing the HTML, I just copy-paste the content of `src/content.html` to the `.user_profile.formatted` element on the `Inspector` tab. Edit it there, and copy it back to the `src/content.html` HTML file.

<br>

## Icons

Most of the icons are from [Font Awesome](https://fontawesome.com/), that is merged, and subsetted ([`src/icons.txt`](src/icons.txt)).

```sh
bun install
pip install fonttools brotli

pyftmerge \
  node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2 \
  node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 \
  --output-file=merged.woff2 \
  --verbose

pyftsubset merged.woff2 \
  --unicodes-file=src/icons.txt \
  --flavor=woff2 \
  --no-hinting \
  --desubroutinize \
  --ignore-missing-glyphs \
  --ignore-missing-unicodes \
  --output-file=dist/i.woff2 \
  --verbose

rm merged.woff2
```

<br>

## Why all these setup just for HTML and CSS??

CSS on itch.io's profile page is limited to only ***5120 characters***. And so, the whole build pipeline is made as a workaround for that limitation. The idea is:

1. If the CSS' characters count exceeded 5120, split it to two.
2. One 'main' CSS, that will be copy-pasted directly onto the profile page.
3. The other half of the CSS will be imported, using CSS' `@import`, via [jsDelivr](https://www.jsdelivr.com/). Hence the need of versioning, as jsDelivr caches aggressively.

> [!WARNING]
> Because of the nature of `@import` in CSS, it will cause [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content) on the profile page.

<br>

<br>

## License

[MIT licensed](LICENSE) :)

itchio-profile

itchio-profile Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

itchio-profile

itchio-profile Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README