My Online portfolio

A beautiful, fluent, web OS like online portfolio !

Make sure to star ⭐ this repo if you enjoy my work !

Test it right now

📍 Introduction

Welcome to my portfolio's repository!

Discover a unique and intuitive experience through my portfolio thanks to a familiar desktop interface !

Note

This project is still in Beta, some features may not work as intended and the code is still a bit messy in some places.
Feel free to report any bugs here 👍

📑 Table of content

• 📦Features

• 🎨Design
• ✍Customization
• ⏳Comming soon

• 💻For developpers

• 🏁Getting started
• 📲Create your own application
• 📩Popup
• 💭Toast notifications.

• 🧰Technologies
• 🧠Credits
• 🧐Support

📦 Features

🎨 Design

Glass translucency

This effect was archived by mixing blur effect and a noise texture in the background to create some depth. It's heavly inspired of Microsoft's Acrylic effect

✍ Customization

You can customize your experience from the settings application.
💾 All settings are saved in your local storage.

⏳ Comming soon

These features are work-in-progress and will come in future updates:

• Game development page content
• Responsive
• Translations (localization)
• More web development projects.

💻 For developpers

The code is partially commented and documented.

🏁 Getting started

Important

Do not forget that this project is still in development, functions could be modified in future updates.

📲 Create your own application

🚨 Your whole application needs to be usable in a html type file.

First, create a folder of your project's name in the _subpages folder.

Then, in the desktop.js file located at scripts\desktop\desktop.js, create a new DesktopIcon object instance.
Syntax:

new DesktopIcon((String)title, (String)icon, (function)funcPtr, (String)shandler);

title: The text shown at the bottom of the shortcut;
icon: The relative path of your icon's image file;
funcPtr: The function to call on any left click event (can have parameters);
shandler: Unique text to distinguish between different icons.;

You will need to call the createWindow(...) function on your icon's click event to create your window. Exemple:

new DesktopIcon("Title", "icons/myIcon.png", ()=>createWindow("icons/myIcon.png", "Title","_subpages\\my_app\\index.html","myApp"), "myApp_shortcut");

📩 How to use pop-ups.

To create a pop-up, you can simply use the UI_CreatePupup() function.
Syntax:

UI_CreatePupup((String)icon, (String)title, (String)message, (String)okText, (function)okFunction, (String)cancelText, (function)cancelFunction);

icon: The relative path of your icon's image file;
title: The title of the pop-up;
message: the message shown at the center of the pop-up;
okText: The text of the primary (left) button;
okFunction: The function to call when the primary button is clicked by the user;
cancelText: [not required] The text of the secondary (right) button;
cancelFunction: [not required] The function to call when the secondary button is clicked by the user;

Exemple:

UI_CreatePupup("icons/myIcon.png", "Pop-up Title", "Pop-up description", "Ok",()=>ok_function(), "Cancel", ()=>cancel_function());

💭 How to use Toast notifications.

To create toast notifications, you can simply use the UI_CreatePupup() function.
Syntax:

new ToastNotify(icon, title, description);

icon: The relative path of your icon's image file;
title: The title of the toast notification;
description: [not required] The description (secondary text) of the notification.

Exemple:

new ToastNotify("icons/myIcon.png", "Toast notification", "A simple notification");

🧰 Technologies

🧠 Credits

• Author @Gersigno

Online resources

• Switch elements style by Marcus Burnette
• Simple date format by Emil S. Jørgensen

Thanks to

• David R. for his help on the project.

• Zen design for his advice on ui/ux design.

• All icons used in this project come from icons8

🧐 Support

For support, email [email protected] or join the discord server.