https://github.com/xero/resume
Resume & Professional Portfolio Website
https://github.com/xero/resume
dark-mode hire-me light-mode portfolio postcss professional resume tailwindcss website
Last synced: 4 months ago
JSON representation
Resume & Professional Portfolio Website
- Host: GitHub
- URL: https://github.com/xero/resume
- Owner: xero
- License: cc0-1.0
- Created: 2025-07-24T05:51:45.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-08-01T05:40:17.000Z (4 months ago)
- Last Synced: 2025-08-01T06:29:19.491Z (4 months ago)
- Topics: dark-mode, hire-me, light-mode, portfolio, postcss, professional, resume, tailwindcss, website
- Language: HTML
- Homepage: https://Andrew.Harrison.nu
- Size: 1.36 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Resume Website ⟁ **[https://Andrew.Harrison.nu](https://Andrew.Harrison.nu)**
|  |
Functions
& Features
| ◈ Responsive Flexbox Layout w/a Modern Design
◈ Light/Dark Mode Toggle w/ Matching Themes
◈ Pure SVG Interactive Skills Spider Graph
◈ Image Lightboxes w/ Keyboard Support
◈ Dynamic Github Activity Graph
◈ Client Side Email Form with Validation |
|:---:|:---:|:---|
## Project Structure
The project root contains configuration files for the development and build environment, as well as, two folders:
- **Sources** `src/` contains the project source files, including images, fonts, [scripts](src/ui/app.js), and [style sheets](src/ui/site.css).
- **Distribution** `dist/` (generated at build time) the complete, compiled and minified, production files.
Here's an overview of the file hierarchy:
```
.
├── bun.lockb -> Dependency versioning
├── CICaDa.js -> Build scripts
├── dist/ -> Generated files location
│ ├── ui/ -> Production assets
│ │ ├── app.min.js -> Minified javascript
│ │ └── site.min.css -> Minified style sheets
│ └── [other files] -> Copied from `src`
├── package.json -> Packages and commands
├── package-lock.json -> Dependency lockfile
├── postcss.config.js -> PostCSS configuration
├── README.md -> Project documentation
├── src/ -> Project source files
│ ├── favicon.ico -> Domain level favicon
│ ├── humans.txt -> Human info
│ ├── index.html -> Single page application
│ ├── robots.txt -> Blocks bad bots/scrapers
│ ├── sitemap.xml -> Sitemap for SEO
│ └── ui/ -> Development assets
│ ├── app.js -> Application javascript
│ ├── hax.woff2 -> Customized web-font
│ ├── i/ -> Images folder
│ └── site.css -> Style sheets
└── tailwind.config.js -> TailwindCSS configuration
```
## Building
Clone the repo and install it's dependencies using `bun`:
```
bun i
```
Build the site structure with the `build` command:
```
bun run build
```
Rebuild just the CSS with the `style` command:
```
bun run style
```
Rebuild just the javascript with the `script` command:
```
bun run script
```
Increment the package version and sitemap date with the `release` command:
```
bun run release
```
the custom [CICaDa](CICaDa.js) build script contains all the CI/CD logic using shell agnostic methods.
plus it features some k-rad ascii art by my buddy [venam](https://venam.net/blog/asciiart.html)
```
❯ bun run build
$ bun CICaDa.js
......._ _.......
.' "-.._ _..-" `.
". .' ` .`'-~-._ _.-~-"`. ' `. ' ."
". . ` . "-. _)_.._(_ .-" . ' .. ."
". ... .. .`. `. (_) (_) .' .'. .. ... ;vnm
'_ '` .. `. \. | '____' | ./ .' .. '` _.'
"-.. ' ` .. \\'-~.__.~-'// .. ' ` ..-"
"`.. .' . ' ' . `. ..'"
.'" " . . ' `. '.--.' .' ` . . " "`.
" .' '\ \ / /` `. "
`... .. . ' ' (,-` '-,) ` ` . .. ...'
`. . " (--------) " . .'
" (--------) "
____________ `--------' ____________
| `.____.' |
| CICaDa CI/CD `.__.' Build System |
| |
| task: clean Complete! |
| task: copy Complete! |
| task: style Complete! |
| task: script Complete! |
| task: postBuild Complete! |
|______________________________________|
```
## Dependencies
This site is programmed with the the following tools and libraries:
- [Bun](https://bun.sh): Dependency and build management
- [PostCSS](https://postcss.org): CSS build tool-chain
- [TailwindCSS](https://tailwindcss.com): Modern CSS framework
- [CssNano](https://cssnano.github.io/cssnano): CSS minifier
- [Terser](https://terser.org): Javascript minifier
- [NeoVim](https://neovim.io): My editor of choice
## TailwindCSS
I don't really like how you're intended to litter your HTML with their utility class attributes. My approach is to compile their classes into my own using the `@apply` keyword. This allows me to keep my DOM minimal, use my normal CSS logic style, and get the added benefits of tailwind built-in responsiveness and short declarations.
## License
**CC0 1.0 Universal (Public Domain Dedication)**
Use this _code_ for anything, commercial or personal, with or without attribution. Just don't steal my identity ;P