When I graduated from college and made my last portfolio website, using React seemed like the right choice. It's a popular JavaScript framework that enables reactive state management. Buying into the hype and apparent wealth of opportunity, my journey began. Maybe I'd make something cool.
bzzzt
I'd made something that looked cool, but it was bloated. And it wasn't very easy to put on a cheap virtual private server (VPS).
The stack involved Remix, a framework that extends React into a server. The library enables server-side rendering, smarter page loading, and a shared codebase between client and server. These features are extremely powerful when used in an appropriate capacity. In my case, the only thing going for it was server-side rendering. I don't need any of that other stuff right now.
Starting Anew
If you think like I do, the first step in making something new is deciding the architecture it runs on. Putting forethought into your architecture permits future modifications. For a while now, there's been a flexible stack coming together via habit:
- Everything in TypeScript: Picking one language is convenient for smaller projects with rapid prototyping. The type information is extremely helpful.
- Fastify with Autoload: Fastify is a powerful web server framework. Used with autoload, routes and plugins can be dropped in with plenty of configuration.
- ETA with fastify/view: Similar to EJS, ETA enables JavaScript to be used as a templating language. Partial templates can function as reusable components. Routes can pass any data in an object format to these templates.
- Webpack with common modules: Almost any npm package and shared interface can be compiled into a browser-friendly format.
- SCSS with Bootstrap: To make styling as easy as it gets.
With this all in mind, I made a template for later use. Here's the link: https://github.com/joeod1/wst
The template was used to make this portfolio site.
Design
From the get-go, I knew I wanted to do something simple with plenty of extensibility. A reasonable first revision was to reduce my previous website into its bare content. What sections did I want? Who would this be for?
First of all, people should know what I do. Easy. I'll put a big "Software Developer" on the landing page.
On my old portfolio website, I had a timeline of my employment history to the right of that header. While it looked alright, I wasn't a fan. Three blog post links now go in its place.
The "Who I Am" and "Project Showcase" are practically the same as what my previous portfolio had.
Blog
Writing about personal projects has always had an appeal to me. Putting what you're doing into words can often help lift roadblocks and give you a sense of progress. To this end, I've decided to compose writeups on my projects at milestones.
What you're reading this on was simple to set up. The /blog/:id endpoint queries the selected article's markdown content from the database, formats it with marked, and passes the output to a template file. Editing is done with Monaco Editor and a preview pane (also using Marked).
At this point, a few features need to be secured behind authentication. I've chosen Google OAuth2.0 for this.
Conclusion
I'll try to write more posts in the future. Each project has its own problems worth writing about.