Resume Website ⟁ https://Andrew.Harrison.nu
| ◈ 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 |
|---|
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, and style sheets. - 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
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 build script contains all the CI/CD logic using shell agnostic methods.
plus it features some k-rad ascii art by my buddy venam
❯ 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! |
|______________________________________|
This site is programmed with the the following tools and libraries:
- Bun: Dependency and build management
- PostCSS: CSS build tool-chain
- TailwindCSS: Modern CSS framework
- CssNano: CSS minifier
- Terser: Javascript minifier
- NeoVim: My editor of choice
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.
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