Skip to content

remzh/Wofol

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wofol logo

Wofol

Wofol (woe-foe) (a portmanteau of "web portfolio") is a highly customizable, interactive portfolio template / creation tool. It aims to turn simple markdown into beautiful webpages, so you can create portfolio entries fast and without having to worry about things like responsiveness and user accessibility.

It was initially created in 20 days (11.11.21 - 11.30.21) for the month-long Mines Sporediggers hackathon.

Background

[Skip Background]

Given that I've already had quite a bit of experience with NodeJS through past projects such as OpenVUE and OpenTrivia, I wanted to use this hackathon to try several new things. This hackathon is my first time using:

  • A CSS Processor (SCSS)
  • The Jamstack architecture (Zola, Rust based)
  • Server-side templates in general (Tera, part of Zola)

I'm quite happy with the result, and plan on using Wofol for my own, personal CS portfolio at some point in the future.

Why Static?

Wofol's build pages require no server-side logic and all dynamic functionally is run client side.

This was done to make serving/hosting these pages as simple as possible. You can find free static page hosting in all sorts of places now, and Wofol's output can be easily incorporated into a full-stack server if you want to add additional functionality.

For example, you could

  • Use Cloudflare Pages + Workers to add routing middleware only to specific pages (i.e., password protection, access control)
  • Serve the build directory as a static folder using ExpressJS, giving you the full power of NodeJS for additional backend logic
  • And more! It's all up to your imagination.

Features

This list is taken from the Wofol Demo Website. Visit the demo site for more information!

  • Hosting multiple (unlimited, actually) portfolios on one site
    • i.e., separate your work portfolio from a personal art portfolio
  • Writing portfolio entires in Markdown with minimal code
  • The flexibility to still add HTML/CSS/JS directly for complete customizability
  • Lightbox images, inline music players, and more plugins!
  • Being fully responsive – works great on mobile, tablet, and desktop!

Again, visit the Wofol Demo Website for more details on what's in Wofol, documentation examples, and to see live examples - built using Wofol itself!

Technical Features

This section goes into the more technical aspects of what Wofol uses and what parts are unique to Wofol (and not from an external library).

Wofol features

  • Minimal dependencies:
    • The Lightbox plugin requires jQuery, but nothing else does.
    • Other than the Lightbox plugin, everything else is my own code and use no external/third party CSS or JavaScript libraries.
  • Iconography: Google's Material Icons are used as they're free and open source, lightweight, and extremely flexible.
  • Powered by Zola:
    • Zola is the static site generator (SSG) used to build pages. It's available as a dependency free, standalone binary and is powered by Rust.
    • All interactive features are powered by native JavaScript (not Rust), as Rust is only used for SCSS compilation and templating.
  • Plugins (written by me and dependency free except for Lightbox):
    • 3dCards: Makes portfolio cards fancy by giving them a "raised card" effect when you hover your mouse over them.
    • MusicPlayer: Adds a feature-packed music player to play audio files, falling back to the default browser-based implementation if disabled. Features an audio visualizer!
    • Folders: Separate images (or anything else!) by class, and allow users to switch between "folders".
    • Lightbox: Modified from Dhakar's Lightbox2 to fit the design style of Wofol, this is the only plugin that relies on an external library.
      • Dependency: jQuery v1.x.x

How Simple?

Portfolio pages can be as simple or as fancy as you want them to be.

Check out the following example pages and the markdown that was used to create them below:

Example Source Result
Basic blog post (almost all plaintext) blog-post.md .../blog-post/
Quizzical (slightly fancier markdown page) quizzical/index.md .../quizzical/

Note that Quizzical was placed in its own folder. This is useful when you have lots of assets you want to keep separate from the other pages!

For reference, Quizzical is a previous project of mine.

License

Wofol is available under the MIT License.

Attribution

Wolf icon by icongeek26 from Flaticon