This project apart from being part of ©Codecademy full-stack course, is something I wanted to do since the first time I joined the course and the idea I had in mind was to display three categories that I consider are part of my life: The experience I have in Customer Service & Administration, the journey I'm taking with the Full-Stack course, and the interest I have in art.
The Project is made with HTML5, CSS3 and JavaScript Vanilla. The development process has taken over 15+ days.
After some thinking I came across the idea of simulating a computer desktop and organize the three categories in folders and with that in mind, I made a Design Template with ©Microsoft Publisher.
I began with the Structure of HTML, the Styling with CSS, and also the creation of the images I needed like the folders and file icons, which were made with Inkscape®.
I chose Inkscape® and more specifically the SVG format because I wanted my images to be scalable without compromising their quality.
With CSS Media Queries I targeted the responsiveness needed. However, this time I learnt I could target the devices width directly with a mix of: max-device-width and the orientation:portrait property.
In addition, the relative measures: rem, vw and vh were the key to successfuly resize content in certain situations. Nonetheless, according to good practices (Google PageSpeed Insights), images are elements that are recommended to be set with both specific measure properties (width & height).
The scripting of the website is made with JavaScript Vanilla.
The first feature I focused on was the Selection feature which highlights the folder/file that is clicked on. However, the challenge I faced with this feature was the fact that when using the Click event, if the folder was clicked, it activated in both the folder and the parent containing the folder ( which later on I read it is part of the capturing/bubbling event phase ).
My approach:
Having in mind I didn't know about capturing/bubbling at the time, I observed that logging the clicks in an array, the first ID in the array was the folder/file and the second item in the array was the parent containing it ( the "Desk", bubbling phase ), so I wrote a function that compares the first item with the parent ID, if both are the same, the function makes all the highlight images hidden, otherwise, it hides all the highlight images and then makes the selected image visible. After that, the function empties/resets the array.
The second feature was Open Window. The Window is a grid containing two parts: The top window bar and The content space. The top bar containing a Close Tab and a Back Tab. This function is part of the Desk Class and it has various conditions:
The third feature to focus on was to Create a File, this being part of the File Class, and which is called every time you open a folder.
The function creates a Grid element, displaying the file: The first row containing the icon and the second row containing the title of the file. The images depending on the type of file:
The content of the files is stored in an external module organized in arrays. The arrays contain different items representing information such as the titles, language, content, target, etc. and the functions use this data to display and create.
Furthermore, the project separates the JavaScript usage in three modules:
The HTML loaded for the client only loads the main.js which size is only 4KB and sets the first Event Listeners.
The other two modules are only used when they are required by the main JS.
This version is pending to be developed.
PENDING FEATURES/ISSUES:
I ("me", "JOSE MARIA SOLA ESTRADA", "JOSÉ MARÍA SOLÁ ESTRADA", "Jossy Solá", "jossysola") solemnly state and affirm with honesty that The Project (the conjunction of Code, Script, Text, Comments, Images, Icons and Styles that makes up the 'Front-End' side of the website: https://jossysola.github.io/home/) has been written, designed, debugged, commented, modified and developed by me from the start to the end, making me the AUTHOR of The Project and its components with exceptions declared in the COPYRIGHT section below.
The following are components of The Project that I do not own any type of property and/or right. All rights are reserved to their corresponding authors, owners and/or intellectual property holders.
In terms of the Text Fonts used in The Project:
All Text Fonts accessed from Google Fonts.
In terms of the Logos used in The Project:
The Portfolio Website related to this Document, contains personal information about me, The Author ("I", "me", "my", "JOSÉ MARÍA SOLÁ ESTRADA", "JOSE MARIA SOLA ESTRADA", "Jossy Solá", "jossysola"). This information is truthful in nature and can be verified and used ONLY with my expressed consent.
The only aim of The Portfolio Website (final product of The Project) is to share my job experience and the projects I have worked on for possible job recruitment. Please do NOT use my contact media for advertisement or any other uses unrelated to the main objective.
MIT License
Copyright (c) 2022 JOSE MARIA SOLA ESTRADA
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software", excluding any personal information contained), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.