Try   HackMD

Portfolio website concept for a creative open source freelancer programmer

If you're authoring and publishing in the 21st century, you've probably experienced the spread of your content across multiple platforms to the point where it's impossible for even you to track, let alone your readers, viewers, and followers. I will tell you my situation and what solution I came up with.

I am a freelance programmer with a creative personality and I have many diverse projects:

  • open source, which can be shared in full
  • educational, where I explain the creation of a small project step by step
  • workers about which you can tell interesting details

Once it seemed to me that the spread of interests is a disease from which it is necessary to be treated. But in the end, I accepted this part of myself as a beneficial feature. And I learned to combine freelance work with creative impulses of immersion in my projects.

Platforms/Channels

There are different platforms where I publish materials.

  • Github.com project code and installation and usage instructions
  • Youtube.com video demonstrations, lessons, chatter on interesting topics
  • Medium.com articles with a detailed description of some idea
  • Hackmd.io software documentation (when multi-page)

Also I use, but more for personal purposes and not for publication:

  • Google Docs - text documents
  • Google Slides - Presentations
  • Xmind - mindmaps

Slides and mindmaps usually serve as a draft project, being the basis for all further materials, but do not appear clearly anywhere. Over time, I came to the conclusion that it is also better to publish them, suddenly someone will come in handy.

But here the question is not even in the publication, but in the very ordering of the materials. In such an abundance of platforms, it is quite easy to get confused even by yourself. And after a few months, it's hard to find the right link.

Links/References

All these disparate materials refer to each other. The github repository invites you to watch the YouTube video, the YouTube video invites you to check out the medium article.

If you have published a new article related to a project on Medium, you may want to add a link to it under the description on YouTube, GitHub and at the bottom of other Medium articles in the "read more on the topic" section.

That is, the addition of new material causes a chain wave of correction of old ones. This is difficult to automate, if only because they are different platforms. And you have to do this routine with your hands and head. Large companies have a special person for this, like a content manager or an SMM manager. And loners like me have to either leave this venture (despite its logic and usefulness), or come up with a tricky move.

Get out of the networks or swing on them?

Why not make your site with automatic linking of materials to each other (through a system of tags, categories, etc.), your own video hosting without ads, etc. Someone does that.

But this is a hyper-expensive way, because:

  1. You will face a number of inconveniences already at the stage of content creation. Even writing text is not convenient everywhere. Not to mention adding videos, subtitles and slides. It is convenient to work with them on sites familiar to everyone because engineers have been working on them for years. Writing all these tools from scratch, and even assembling from ready-made blocks, is very expensive.

  2. You will have to constantly maintain the infrastructure of the site. If one day you forget to pay for hosting, all your work will be deleted by the provider.

  3. Each of your new publication will initially be cut off from people. To bring it to the public, you will have to make extra efforts (posting links on social networks, etc.)

Therefore, it is logical to use existing platforms. Have you written an article? Let it be where people usually write and read articles. Have you recorded a video? Let it be where people usually post and watch videos, etc. So your materials will find an audience without your efforts.

Projects/content types

To avoid getting lost in the maze of different platforms and formats, you will need a system/culture to keep links to your content.

Focus on the project and content types:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Let everything that you publish be attached to these beacons and revolve around them.

Personally, I am a big fan of markdown (writing format). For each of my projects, I start a markdown file like this:

# Project name

## Articles
[Article on Medium] (link/to/article)
[Article on Dev.to](link/to/article)

## Images

## Video
[Video on YouTube] (link/to/video)
[Video on Twitter] (link/to/video)

## Audio
[Apple Podcast](link/to/podcast)

## Mindmaps

## Slides

## The code
[Code on Github] (link/to/repository)
[Documentation](link/to/site)

As new material is published, I add new links under the appropriate headings.

This project template has not only a cumulative task, but also a motivational one. Seeing the gaps in it, I'm thinking about adding new content types.

What's wrong with Readme.md on Github?

When working on an open source project, all information about it is placed on the readme.md page, which is correct. It is wrong to limit it.

Only programmers live on github. If a non-specialist wanders there by accident, he is very confused by the terminology, such as: commits, forks, pool requests.

On github, all your forks, one-time trial projects and serious products are mixed in one incomprehensible tape.

Therefore, by placing information about your product worthy of the public's attention on a regular human-readable site, you increase the likelihood of conveying it to end users.

For example, I am developing an open mobile application template for foreign language textbooks. It is very unlikely that the author of such a textbook or publisher will go to github and read about a useful project there. The probability is higher if he sees it as a regular post on a regular site (with articles, pictures, etc.).

OpenSource.guide recommends creating a website for the project. But if you have many projects, maintaining them all can be a nightmare.

Therefore, I came up with the idea of ​​storing all information about the project in the project-name.md file, placing them all in the projects folder and they are automatically generated in the site. And each project has a separate page.

Multilingual (internationalization)

For most people in the world, English is not their first language. Therefore, it is logical that they first write everything in their native language, and then translate it into English if they want to be represented in the international space.

I started a separate folder for each language: en, ru. When a project is ready in one language, I translate it and place it in a folder with another language. Project pages in different languages ​​automatically appear on the site.

Technical implementation

To turn these files into a portfolio site without too much effort, I used the Next.js framework with static content generation and internationalization.

As a creative unit, I get representation on the Internet. If suddenly someone is interested in me personally, they can come in and look: "let's see what he does in general, what projects he is moving forward." And scroll through all my projects with a brief description.

Each project gets a separate address, and now I can put it in all publications associated with it with a note: "if you are interested in the project, you can find all the materials related to it on this page" and they do not have to be constantly updated as new materials appear.

Although physically all publications are on different platforms, my site stores and provides links to them all. They are grouped by projects and content types. And all this is generated, as it were, from my drafts, personal notes, ordinary text files, turning into a full-fledged site in a couple of clicks, with different pages and languages.

In the future, I plan to add a subscription / mailing system so that people can track all the news on a separate project, or headings (educational, etc.)

Project code published on github under MIT license. In the future, I plan to record a series of video tutorials on creating such a site from scratch.

Disclaimer

This is not a success story, this is a description of a concept that I came up with and started practicing. Changes are possible, but I hope you will benefit for yourself in this form.