https://github.com/ultraflame4/ultraflame4.github.io
https://github.com/ultraflame4/ultraflame4.github.io
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ultraflame4/ultraflame4.github.io
- Owner: ultraflame4
- Created: 2021-04-04T07:20:54.000Z (about 5 years ago)
- Default Branch: v7
- Last Pushed: 2026-01-25T12:06:59.000Z (5 months ago)
- Last Synced: 2026-01-25T15:55:32.784Z (5 months ago)
- Language: CSS
- Size: 65.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ultraflame4.github.io
Version 7 of the website built ontop of Astro.js
[ultraflame4.github.io/v7](ultraflame4.github.io/v7)
# Documentation
This is all the documentation you are going to get.
## Project Structure
The project structure mostly follow astro's project structure.
So I wont be listing every single folder here except notable ones.
**Notable Folders & Files**
1. `src/`
1. `components/` - Components
1. `core/` - Simple core components like anchors, carousells etc. Styling usually isnt used, rather components here wraps around existing html element to introduce additional functionality or behaviour
2. `effects/` - Components used for various effects like text with typing animation.
3. `ui/` - Ui Building blocks. i.e Panels, Cards etc.
4. `.` - Components, that "complete" and act more as widgets / ui blocks are not put into folders. i.e NavDock (aka Navbar header). These components can straight away be used in pages with extremely little adjustments.
1. Can also be thought of Page building blocks
2. `meta/` - Usually contains code used for the build system itself. i.e Custom plugins
1. `remark-plugin.ts` - Contains plugins for remark
3. `pages/` - Astro pages
4. `styles/` - CSS files
1. `global.css` - Main css file. Also is the main tailwindcss file.
2. `data/` - Folders containing pure data / content. It should not contain any logic.
1. `about/` - Markdown files for about section.
2. `projects` - Project showcase list data. Each markdown file corresponds to a project item.
## Custom Plugins / Behaviour
### Markdown / Remark: remarkIconDirective
location: `meta/remark-plugins`
Replaces `:icon[]` directives with icons from [iconify](https://iconify.design/). \
> [!Note]
> Everything within the directive (The `` part of `:icon[]`) will be used. \
> `:icon[logos:vue]` will use `logos:vue` for the icon name
The icons are rendered as `span`, containing an `img`, with the `icon` and `remark-icon-directive` class
```html
```
# References / Acknowledgements
**Inspiration**
Windows 11 Like Website - https://www.vovacodes.ca/
Windows 98 Inspired Website - https://janoskocs.com/
Code Editor like - https://www.fmgono.dev/projects
Minimal - https://www.thomas-sanlis.com/