Build in Public: Versatilist Portfolio with Ghost

So I'm rebuilding my portfolio to be more of a versatilist, personal brand hub. I'll be building this portfolio in public. It's different from the typical portfolio/agency sites as I'll be up to the challenge of fulfilling these goals:

• Showcase all my specializations on one site, keeping it simple, and without it scaring away certain audiences
• Build a massive database of all my work, that can use tagging to show everything, just one discipline, free stuff or paid stuff behind a pay wall
• Get it up quickly and then build in public, adding features and pages along the way

What's a Versatilist?

Before I continue, you're probably like, "What the hell is a versatilist?". Well let me explain:

A versatilist is a person who specializes in multiple disciplines. This is different from a Generalist, who just has experience in multiple disciplines, but usually has no proven work to show for it.
Generalists tend to just learn just enough to hire someone else to build it. They may go as far as use a novice or no-code solution just to get by. For example, a generalist might code in JS, but all their work is in Codepen as a prototype. So they'll hire a specialist to code their product or use a no-code solution.

Macro Versatlist

There's two types of versatilists and you can be both if you have the work to show for it. A macro–versatilist would be how I work. I'm a Business Founder, Product/Web Designer, Web Developer, Music Producer & Photographer. I've spent more than 10 years in each discipline, learning the software, the theories & the fundamentals.

Micro Versatilist

A micro versatilist example would be a full–stack developer that specializes in multiple languages like JS, Python, Ruby, C#, HTML & CSS; or a full–stack designer specializing in Graphic Design, Web Design, Product Design & 3D Design. Of course having public proof such as work being used by many people helps certify those specialties.

So now you know what a versatilist is. Let's talk about the portfolio.

The Portfolio

My work is currently at madebyporter.com. I built the portfolio using Ruby Middleman, which is one of the OG static website generators. I started using Middleman back in 2014. It's been great, but now I have other features that Middleman would have a hard time with.

The Vision

My vision is to build multiple streams of residual income using my portfolio site. So some of the features I need includes subscription memberships for content I want to sell such as access to my music database, special blog posts, etc. So far I'm looking at Ghost for the answer.

My main hope is that I can implement custom fields for Ghost. This would allow me to create a music database in Ghost and display all the music on a custom page as a database. Same with the photos. Then also have a portfolio database for past design work, public blog for free reading, etc.

The Structure

Im thinking the structure would look like this (work in progress):

• Home or /
  • A better linktree page displaying most recent posts and links to important projects, services, etc.
  • The only way you can get to the discipline landing pages
  • Once on a discipline landing page, you have to click back (and maybe the logo) to go back home to get to other discipline landing pages. If you're on the design page, you can't get to the photo page unless you click home > photos.
• /design
  • Static landing page I will send to potential design clients
  • Portfolio DB (/design/{project_slug}
  • Blog posts tagged "design, free"
• /music
  • Static landing page I will send to potential music clients
  • Showcase my past music projects {/music/project_slug}
  • Showcase free beats to use
  • Sales page to signup for music db membership
  • Database will hide behind membership (/music/database/{track_slug}
  • Database will have music player to allow for streaming right from page
  • You can also download music for usage in film/commercials/music
  • Blog posts tagged "music, free"
• /photo
  • Static landing page I will send to potential photography clients
  • Will showcase photo work (/photo/{project_slug})
  • May have a membership db if there's enough demand for stock photography (ala a decentralized unsplash)
  • Display blog posts tagged "photography, free"
• /library
  • Dynamic page, to be used as an archive, but cool looking
  • Posts of links from my Raindrop.io bookmarks, curated for my portfolio. I currently have something like this at Think Versa but I want to move everything to one place to build brand awareness and make it easy to update. This will also be the easiest way for me to generate content between bigger posts.
  • A collection of all my design, music, and photo projects
  • Blog articles for design, music and photography to share tips and tricks
  • Free stuff for design, music and photography like design assets, free beats, free photos of patterns
  • Hopefully I can feed these posts to their perspective landing pages so I can provide some free value to potential clients and not just "sell, sell, sell".

I will build the templates from scratch using HTML and SCSS. Maybe I can see about using SLIM or something similar for pre-processing the HTML. I'm designing everything in Figma, and you can view that here. I'm thinking, just build the finish wireframes as is and launch. Then improve from there by adding UI & animation until it looks like a site that can be on Awwwards.com.

Build in Public Conclusion

This will serve as a "build in public" page with updates. Of course if you have any suggestions or links to other ways I can build this, please feel free to hit the comments. If you think I can build this solution better in Gatsby, VuePress, etc, let me know. I tend to start as an extreme maximalist, then start the deduction process until I have a minimalist MVP to work with. Some pages will probably launch later, so higher priority on landing pages that has higher demand, such as the design and library pages.

Also, I wrote this from my head and published immediately because I'm so busy that this would stay as a draft if I went through a traditional writing process, so this article is a "write in public" post, lol. Any suggestions would be great, just be nice.

That's all for now. Will update with a more structured game plan once I'm ready to code.

Best,
Porter