My Journey of Building a Windows 95 Portfolio: Lessons Learned and Tips
Tags: react, vite, javascript, webdev
Published: 2023-05-16 12:19:10

![Portfolio Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09jd5ilv59ty2fa1vt19.png)
## Introduction
Hello fellow developers! Today I want to share with you my incredible journey of building my portfolio and the valuable lessons I learned along the way. Whether you're just starting out or looking to revamp your existing portfolio, I hope my experiences and tips will inspire and guide you on your path to creating an impressive showcase of your skills.

You can find a live preview link [here](https://mojsx.vercel.app)
Or check the [github repo](https://github.com/mo-jsx/resume-95)


## Table of content
* [Pre Code](#pre-code)
    * [Define Your Purpose and Audience](#define-your-purpose)
    * [Showcase Your Best Work](#showcase-your-work)
    * [Clean Design](#clean-design)
        * [Typography](#typography)
        * [Color Schemes](#color-schemes)
* [The Code](#the-code)
    * [Framworks & Libraries Used](#frameworks)
    * [The Frontend Architecture](#frontend-architecture)
    * [Styling](#styling)
* [Conclusion](#conclusion)

## [Pre code](#pre-code)

## [Define Your Purpose and Audience](#define-your-purpose)
The first step I took before starting to build my portfolio was to understand its purpose and define my target audience. Am I presenting my skills to potential employers, clients, or fellow developers? 
Once I answered this question, I began to tailor the content, design, and tone of my portfolio accordingly. 
The motivation behind this step is to identify the key message I want to convey and ensure that my portfolio is aligned with my goals.

## [Showcase Your Best Work](#showcase-your-work)
When curating my portfolio, I always keep in mind that quality trumps quantity. I choose a selection of my best projects that highlight my skills, creativity, and problem-solving abilities. I provide brief descriptions, including the technologies used, my role, the challenges faced, and the solutions implemented. I have also tried to demonstrate my thought process.

## [Clean Design](#clean-design)
A visually appealing and easy-to-use portfolio is critical. Windows95 was my first encounter with a computer, Windows98 was my entire childhood, and it means a lot to me to turn my memories into a fun project full of nostalgia. 

### [Design system](#design-system)
I wanted to use a clean and professional design that would enhance my work without distracting from it, inspired by the Win95 design system. 

### [Typography](#typography)
Typography is the cornerstone of implementing a perfectly balanced design system and visual consistency. The choice of fonts, sizes, spacing, and hierarchy establishes a distinct personality, enhances readability, and promotes a cohesive and memorable user experience. Special attention must therefore be paid to the choice of typography and typographic system. 

As for me, I decided to use an open source fork of the Windows 95 system font called Levi Windows to get the exact same look and feel as Win95, below is a preview of the font in question: 

![Levi Font](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu4lkg8di4ydlsj63g3k.png)

### [Color Schemes](#color-schemes)
Color schemes are paramount in a design system because they evoke emotion, convey meaning, and create visual harmony. A well-defined color scheme enhances brand recognition, promotes consistency across touch points, and contributes to a cohesive and visually appealing design system.

In my case, and in order to convey the same native UX, I had to go with the same/similar color scheme as Win95. You can have a look at the color scheme I implemented:

![Color Schmes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acjub0orjebjyz9yh3rh.png)



### When building a portfolio we need to keep an eye on the overall aestheticsm Ensure easy navigation and quick access to important information. And remember, simplicity is key.


## [The Code](#the-code)
When deciding which JS framework to use for building my portfolio, it was trivial for me to go with [React](https://react.dev), first and foremost is the fact that I'm quite familiar with React, having built projects with it for several years now. I like the architecture it follows, its efficient rendering approach, and its rich ecosystem.

I also had the opportunity to experiment with some other libraries, that can be found below: 

## [Frameworks & Libraries used](#frameworks)
-   ⚛️ [React :](https://react.dev) A JavaScript library for building user interfaces.
-   🐻 [Zustand :](https://zustand-demo.pmnd.rs) A unopiniated state management solution, using simplified flux principles.
-   🖌️ [Sass :](https://sass-lang.com) CSS preprocessor that enhances the functionality of CSS by adding features like variables, nesting, mixins, and more.
-   👋 [Draggable :](https://github.com/react-grid-layout/react-draggable) A react library for making elements draggable. You can find this excellent beginner friendly article [Here](https://lo-victoria.com/making-draggable-components-in-react) by [Victoria Lo](https://twitter.com/lo_victoria2666)


## [The Frontend Architecture](#frontend-architecture)
The frontend architecture depends on various factors such as: the requirements, the nature of the project, the tech stack, and so on.

In the case of my portfolio, I have come to the conclusion that the most appropriate architecture for this project is quite simple and would be as follows:

![Project Architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gp6klzksmusxvppvg2fk.png)

> Where every window added to the DOM, creates a process object in the Process Manger aka the store.

For the state of the application, I used zustand as my new favourite teddy bear. For its simplicity and 0-hassle 0-boilerplate code to set up a flux architecture.

## [Styling](#styling)
The integrity of the application was created by me using only Sass. I did not use any external component libraries. I spent a lot of time learning the Windows 95 design system and started building from there.

## [Conclusion](#conclusion)
Building my portfolio has been an exciting and enlightening journey. Through careful curation, thoughtful design, engaging content, and a focus on personal branding, I was able to create a powerful showcase of my skills and expertise. 
In addition to refactoring and optimizing the application, I want to make this my pet project, where I can have fun trying new things and show off my latest work, because building a portfolio is an ongoing process.

What lessons have you learned in building your portfolio? Share your thoughts and experiences in the comments below. Let's inspire and learn from one another!