My Journey of Building a Windows 95 Portfolio: Lessons Learned and Tips

mojsx — Tue, 16 May 2023 12:19:10 +0000

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
Or check the github repo

Table of content

Pre Code
- Define Your Purpose and Audience
- Showcase Your Best Work
- Clean Design
  - Typography
  - Color Schemes
The Code
- Framworks & Libraries Used
- The Frontend Architecture
- Styling
Conclusion

Pre code

Define Your Purpose and Audience

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

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

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

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 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:

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:

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

When deciding which JS framework to use for building my portfolio, it was trivial for me to go with React, 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

⚛️ React : A JavaScript library for building user interfaces.
🐻 Zustand : A unopiniated state management solution, using simplified flux principles.
🖌️ Sass : CSS preprocessor that enhances the functionality of CSS by adding features like variables, nesting, mixins, and more.
👋 Draggable : A react library for making elements draggable. You can find this excellent beginner friendly article Here by Victoria Lo

The 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:

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

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

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!

DEV Community: mojsx