🚧 This site is a work in progress. Things will continue to be added and changed. 🚧
Portfolio Projects
Legacy Projects
Docs Site v1.0

Docs Site v1.0

screenshot of my first documentation site

After my time looking through documentation and seeing how crucial it is to the success of a project, I decided to implement my own version. This documentation site will be utilized as a way to provide in-depth analysis of my projects. In addition to this, it will show the motivation behind the project, where I was at in my development journey, and what I learned from the project.

I. Getting started


In addition to an internet browser and IDE, he following must be installed on your machine:


How to install and run the application.

  1. Clone the repository from GitHub.
git clone https://github.com/LadyBluenotes/wiki-doc
  1. Install Node packages
npm install
  1. Start the application
npm run dev

II. About

Built with

This site was built using TypeScript with Next.js, and MUI's Joy library. This project was intended to be fairly bare-bones to avoid any distractions from the content and to allow for a clean and simple design. Using Joy UI components allowed me to do that.

This project has a built-in dark mode. Dark mode is a feature I enjoy and wanted to include because it it would let users toggle to their preference or based on their needs.

III. Motivation

With the amount of documentation I had been reading and the contributions I was making towards improving the MUI's documentation for Joy UI, I felt that it was a good time to create my own version.

Having a space to showcase my projects and provide individuals the chance to learn more about them was something I had intended to do for a while. In addition to this, my newfound familiarity with MUI created a comfortable place to start.

While I could've used a template, I had been wanting to learn more about implementing MUI with Next.js in a project. Furthermore, I was motivated to see how TypeScript would work alongside these technologies. With having used TypeScript in the past, it was more intuitive to integrate into this project rather than introducing a new language.

To delve deeper into my motivation for creating documentation, you can visit this page. Additionally, for a more comprehensive understanding, you can explore the documentation of my previous site, where I elaborate further here.

IV. Key takeaways

Discoveries and reflections

Upon first glance, I always assumed that writing documentation was fairly straightforward but upon closer examination, it becomes evident that it encompases various crucial components. One fundamental aspect to consider when embarking on the documentation journey was figuring out what to write. Things I had to consider when writing this included:

  1. Organizing and structuring information: I needed to consider how to organize and structure the information effectively. This involved creating clear sections and headings for different topics, projects, and contributions. I also had to ensure logical flow within each section, arranging the content in a way that is easy for readers to follow and understand.
  2. Visual elements: To enhance the readability and comprehension of my documentation, I incorporated visual elements. This included using screenshots, images, or code snippets to illustrate the style of the site, or steps in each project.

Technical growth

Leveraging MUI and Joy UI

MUI and its subset, Joy UI, proved to be useful libraries for this project. Their readily available components simplified the process of design implementation and customization. I was able to create the design I had originally thought of with easy and, most importantly, it allowed me to focus on the content versus site creation.

Documentation best practices

By creating comprehensive documentation for my projects, I delved into the world of documentation best practices. I aimed to hone my skills in presenting technical information in a clear and concise manner, focusing on providing valuable insights. This experience deepened my understanding of effective documentation techniques, allowing me to communicate complex concepts effectively.

Implementing Dark Mode Feature

The built-in dark mode feature in MUI allowed for a customization option for users, catering to different user preferences and enhancing the overall user experience. I found it easy to implement, however, I did have to select the appropriate colors to make this site accessible.

V. Acknowledgements

Outside of the MUI documentation, I used my experience as a open source contributor to help with this project.

VI. Additional Information

As this site is no longer my primary documentation source, I have discontinued monitoring issues and features related to it. Furthermore, since it is no longer deployed to a domain, there is no accessible location to view it.