Personal Interactive Roadmap Website

---

🌎 W98 Personal Interactive Roadmap Website

The main objective of this website is to create a interactive way to know more about me. Gathering information in a simple but eficient way using a nice and clean (and nostalgic 🥹) interface.

roadmap_w98.mov

Summary

1. General Information
   1. Introduction
   2. Personal Information Section
   3. Course Information
   4. Projects
   5. Technologies
2. Technical Information About this Project
   1. Structure
   2. Problems & Solution
   3. Project Workflow

Introduction

The native structure of this website would suggest the use of a lot of repetitive HTML code, either it be for the course list or for the popup that shows additional information for the courses. I didn't want that.

1. I have only ONE structure for all courses on the list.
2. I have only ONE structure for every popup that shows on user click.
3. I make no use of any javascript library. Pure JS!

Personal Information Section

In the Personal Information Section you will find all the information needed to contact me, also my work experience and some additional information.

Courses Information

I can say that the Course Information section is the core of this project. Here you can follow my journey through the career transition into tech by clicking in the courses on the list.

A popup will show the following information:

1. Course Information
2. Course Page
3. My personal notes from the course (Link to my Notion)
4. Start Date or End Date
5. Progress Bar
6. Course Certificate

If you are a Developer

This course list also works as a roadmap for the stacks i choose to specialize. If you are a developer looking for direction you may find it very useful.

If you are a Tech Recruiter

Here you can find everything you need to know about me. In the personal information section

Projects

Reference Projects to know more about my developer skills

Technologies

Section to show in a simple way all the technologies i have certain knowledge and technologies thare are currently in the roadmap, but i haven't study yet. The technologies i have worked with are shown as active buttons. In the other hand the other techs are shown as desactivated buttons.

Structure

• This site was created using only HTML, CSS and JavaScript Vanilla.
• Using a Grid layout the site is basically divided in three main sections.
• The responsivity is set for Desktop, Tablet (landscape and portrait) and smartphone.
• It has interactive elements in the background.
• The course list section uses an algorithm to generate HTML structure for each course without the need to hardcode it.
• All courses are clickable and opens a popup with further information.
• The popup is also generated by an algorithm that creates the HTML structure.

Problems & Solution

The First Idea: Create a list of courses separated by subject (What would need a repetitive HTML structure, multiples summaries, details, ul and li.

The Problem: How could i render a nrested HTML List that is organized by subjects using only JavaScript Vanilla and then avoid to write so many repetitive code?!

• The Solution:
  • An array with all objects (courses) is created, it allows me to iterate through it and retrieve needed information. Here the work begins. In this first step i use an switch case to filter the data on each iteration and generate two arrays. The first array starts as a Set, it allows me to automatically removes duplicate subjects. At the end i convert it to an array.
    The second array is an array for a specific subject. If the object of the current iteration is an JavaScript course, it will be send to the JavaScript array, if C# course, then C# array and so on and so forth.
    Long story short, at the end of the process i will have two arrays:
    1 - Array of subjects names;
    2 - Nested array, with inner arrays ordered by subject.
    The filtering process is done
  • Now i have to transform the object data into HTML structure. Once i have two arrays, i can let them drive the process in a logical way using a nested for loop. For each subject i iterate the array of the current subject, generating HTML structure using the data of each object inside the current array.
    This process and in a mutation from an array of objects ordered by subject to an array of HTML structure ordered by subject. Using the abstraction approach, i now call a function that render the generated HTML structure.
• The Result: The algorithm i created allows me, always when a new course is added, i only have the work to add the course and all the information and HTML structure will be automatically generated.

The Second Idea: Each course is a clickable element that when clicked opens a popup with further information about the respective course, as Start/End Date, Progress, Certificate, Course Page, My notes from the course and more.
One detail that worths to mention is that i wanted the popup to open at the exact spot where the click has happened.

The Problem: At the beginning i though of using the obvious, an eventListener, sou i would catch the event and work with it. Everything i'd need would be there. Then i figured out that it wouldn't work and the reason is why i'm not able to select an HTML element using querySelector, for example, that is generated through JavaScript.

What to do now? Some questions i made:

1. How to make the program knows the exact course i am clicking and retrieve the correct information?
2. How to open the popup at the click spot once i can't catch the click event in an eventListener attached to the course?

• The Solution
  • I decided to create an object to reference all the courses. Working with a key value pair structure would allow me to retrieve data really fast and the only thing i would need is the current object key.
    Since i iterate over the object to create the HTML structure for it, i have added the following line to the HTML structure:
    𝘰𝘯𝘤𝘭𝘪𝘤𝘬="𝘱𝘰𝘱𝘜𝘱𝘐𝘯𝘧𝘰('${𝘤𝘰𝘶𝘳𝘴𝘦𝘴𝘖𝘳𝘥𝘦𝘳𝘦𝘥𝘉𝘺𝘚𝘶𝘣𝘫𝘦𝘤𝘵[𝘪][𝘫].𝘬𝘦𝘺}')".
    It worked exactly as expected, the popup feature was born. But we still have a second question to answer.
  • To solve the position problem was simple if i may say. I decided to create an eventListener in the document 𝘰𝘯𝘮𝘰𝘶𝘴𝘦𝘥𝘰𝘸𝘯. It have allowed me to catch the clientX and clientY position which i stored in variables in the global scope to reuse it when necessary.
    Note that in the click event above i call the 𝘱𝘰𝘱𝘜𝘱𝘐𝘯𝘧𝘰() function. This function is responsible to generate the Popup HTML structure and it then uses the variables that store the position allowing the program to generate the popup at the exact spot of the click.

Project Workflow