This is my Portfolio. My goal was to have a lot of fun doing it... I did.
For the home page, I've made a copy of Windows 11. On the main screen there's 3 elements, the link to the "About Me" page, the link to the "My Projects" page and a button to the file explorer.
To access everything that's on the main screen, you need to double-click.
If you open the File Explorer, you can navigate from tab to tab. hint: try going to the audio tab.
If you look at the bottom of your screen, you'll find a taskbar. On it, you can find the start menu that you can toggle.
In the start menu, I let you discover what makes what. Some buttons will take you to some of my account.
I won't tell you everything there is, you'll need to experiment by yourself to know what is doing what.
Because my main page is Windows, for my other pages, I've choose to make game or program.
My Projects (Muse Dash) To the page
To show my projects. I've made something mostly inspired by the selection menu of the rhythm game "Muse Dash".
You can navigate from project to project using the 2 arrows buttons. You can also let the slider slide automatically. For each project, at the bottom of the screen, there's some links and even an information button if you ever wanna more about a project.
About Me (Visual Novel) To the page
For a page like this one that I knew from the beginning that there would be a lot of text I was thinking on how to put a lot of text in a program or a game. Then I thought of "Higurashi" a Sound Novel I really like. So I've made a Visual Novel.
The backgrounds images are from me, except the one use on the title screen that is from Chat GPT.
- DevOS
- Table of content
- Concept
- Goals
- Programs and websites used
- Inspirations
- Maquettes
- Graphics Choices
- Optimisations
- Features
- Contents
- Difficulties encountered
- Future improvements
- Conclusion
The work to be carried out is a portfolio using JavaScript to enable interaction with users, without forgetting the languages seen before, i.e. HTML and CSS.
As far as the concept of my project is concerned, I started with the idea of creating a copy of Windows 11, because one of the things I enjoy is being behind a computer, both for work and for various activities.
As my home page was Windows 11, I had to come up with an idea for easily integrating my other pages. After some thought, I decided that the best option would be for my other pages to be like programs or games that could be opened from the home page.
For the whole project, I set myself one main objective: to enjoy making my portfolio.
I also set myself other goals for the site. Since most of the pages were going to contain a lot of elements, I had to optimize my pages.
An important goal for me, in addition to having fun, was to do things I'd never done before, to learn. I wanted to take this opportunity to see and try out new things.
Adobe Photoshop was mainly used for resizing images.
Adobe's artificial intelligence image generation tool was used to create the missing content on certain images.
Adobe Illustrator was used to recreate the Windows logo, visible in the taskbar and serving as the activation button for the start menu.
Using Bing, Chat GPT4 is free. So I took the opportunity to create a few illustrations.
Webstorm was used to code the site in HTML/CSS/JS
1001 Fonts was used to retrieve fonts for the "About me" page.
The 1001 Fonts site can be found here.
This website was used to process the font format change from TTF to WOFF and WOFF2.
The Font Squirrel site can be found here.
Images Tool is a website that lets you make all kinds of modifications to images. For this project, only one of its options was used, the format change from JPG/PNG to WebP.
The Images Tool website can be found here.
The inspiration for the home page came simply from Windows 11. So I looked at how Windows was displayed on my computers. I also searched the Microsoft website to find out more.
As for my project presentation page, I came up with the idea while playing a game called Muse Dash. It's a rhythm game that I particularly enjoy. So I took inspiration from the Muse Dash selection menu to present my projects.
For the last page, the one that introduces me, I needed a program or game with a lot of text. So I was inspired not by a game, but by a style of game, the visual novel.
I didn't really do any prototyping, so much as my pages are inspired by existing products. For Windows, for example, I mostly looked at my computer to see how the different elements displayed.
Another reason is that, from the outset, I had a very clear idea of what I wanted to create. And throughout the whole project, I didn't stray far from what I had in mind.
Below you'll find the selection menu for the Muse Dash game, which served as the inspiration and template for my project page.
I've tried to stick as closely as possible to the colors used by Windows for the various elements, although I've made a few adjustments.
- Segoe UI
I've used this font for its simple, effective look, which suits Windows.
The colors on this page are mostly shades of blue, more or less dark, to respect the original look.
- Quicksand
I used this font because, with its rounded corners, it went very well with the rest of the page.
The colors are shades of violet with orange, in keeping with the color scheme used by Muse Dash.
- Open Sans
This font has the advantage of being very legible, which is why I chose it. For a visual novel, dialogue has to be legible.
- Ringbearer
I chose to use this font for the title of the visual novel, as its look matched perfectly with the idea of an adventure.
For the colors used, I mainly used white and black.
What drastically increases page load times on a website are images and videos. They're heavy elements, but they add a lot to a site.
Although I didn't use video, images are omnipresent on my site. So I had to optimize them.
Most of my images are used as icons, so they didn't need to be in Full HD, but I made them larger to make sure they didn't look pixelated.
There are many image formats, with JPEG and PNG probably being the best known. But there's also an image format designed specifically for the web, called WebP. This format supports transparency like PNG and has the advantage of being very light. As the lighter an image, the faster it loads, this format is very interesting.
Although this format has been supported by the majority of popular web browsers since 2020, it is possible that a browser such as Internet Explorer may not understand this format. To enable these browsers to display an image, simply follow the example below:
<picture>
<source srcset="./IMG/myPicture.webp" type="image/webp">
<img src="./IMG/myPicture.jpg" alt="This is a picture">
</picture>By default, the <img> image tag will take as its source the link in its src attribute, but if the browser knows WebP, it will instruct the image tag to use the link in the <source> tag.
Fonts make our texts different from one another.
While on a poster, a font can change the legibility and style of the poster, on a website, if the font isn't installed on the system, you'll have to download it. An extra download means a longer page load, which is why it's also a good idea to optimize your fonts.
The problem with fonts is their weight. The aim is to make our font as light as possible, so that it can be downloaded as quickly as possible. To achieve this, we can use another font format.
The two best-known and most widely used formats are TTF and OTF. But as with images, there's also a format specially adapted for the web, WOFF and its enhancement, WOFF2.
As with images, we'll tell the browser to use the WOFF2 format first, and if this is not supported, to try WOFF and lastly TTF or OTF, since the latter two formats are supported everywhere.
To do this, we will use the following CSS:
@font-face {
font-family: "Segoe";
src:
local("SegoeUI"),
url("../FONTS/SegoeUI-VF.woff2") format("woff2"),
url("../FONTS/SegoeUI-VF.woff") format("woff"),
url("../FONTS/SegoeUI-VF.ttf") format("ttf");
}If the font has a possibility of already being on other computers, we can add the local function so that the browser will search for the font on the user's system before downloading the font.
On a website, when we right-click, we open the contextual menu, allowing us to perform several actions, such as opening the console. But for my site, I've made sure that when we right-click, a customized contextual menu is displayed.
There are three shortcuts on the desktop. While two of them are just links to other pages, the last shortcut opens the File Explorer. In the latter, we can navigate from tab to tab, and if there are items in a tab, we can of course activate them. For the moment, if you go to the audio tab, you'll find an audio file that you can activate by double-clicking on it.
In the taskbar is the Windows icon, and as soon as we click on it, the Start menu opens, giving users several options. Most of the options are links to different networks. That said, three of the options open programs.
To open a program, if it's on the desktop or in the file explorer, double-click on it. On the other hand, if the program you wish to open is in the taskbar or the start menu, a single click will open it.
This program is just a simple calculator... or almost. Depending on the result, the calculator won't give a number, but words. For example, if the result is 666, the calculator will display THE DEVIL, a reference to the devil's number.
This program is a form. To send it, each field must be filled in correctly. The program name implies that this program is useless, as sending the form does not send any data. However, when the form is sent, something happens: in the start menu, the user's icon and name change according to the first and last names filled in on the form.
If we open this program to see what I'm unable to do, we're faced with a program with a 404 error, implying that what I can't do just doesn't exist, so I can do anything.
Once a program is open, to close it simply click on the cross at the top right of the program.
Some programs are available in full-screen mode. These have an unfinished square icon next to the close cross. If you click on this button, the program will go to full screen.
Once programs are open, they can be moved using the mouse. To do this, simply click on the upper part of the program, on the length where the cross is located to close the program, and hold down while moving. If you're familiar with the Windows operating system, this shouldn't be too complicated.
At the bottom right of the Start menu is the Windows Start button. As soon as we click on this button, the screen goes dark and a text prompts us to wave our mouse to reactivate the screen, a bit like putting the screen to sleep.
On the right-hand side of the taskbar, you'll find the time, date and notifications. Both time and date are up to date. What's more, the time is updated every 5 seconds, so the clock may be delayed by up to 5 seconds.
As for notifications, clicking on the bell opens the notifications panel. If the bell is blue, then there are one or more unread notifications; otherwise, the notifications have either been read or deleted. Furthermore, the status of notifications is saved for the session, i.e. if the page is reloaded, deleted notifications will remain deleted.
As with Windows, DevOS is not activated by default. This has no effect on functionality, but the text in the bottom right-hand corner of the desktop will always be present. To activate DevOS, simply click on the text. A small animation is then launched. Once DevOS is activated, the status is saved for the session. When DevOS is activated, in addition to the text no longer being visible, a small graphic element is added to the start menu.
This page follows the style of the selection menu in the Muse Dash rhythm game. Several of my projects are shown, but only one is selected, and information about this project is at the bottom of the screen.
In the top right-hand corner of the screen is an incomplete square. When you click on it, the program launches in full screen mode. Simply click this button again to return to the previous state.
Every 5 seconds, the selected project changes. This is an infinite loop: as soon as we reach the last project, the loop starts again from the beginning. The selected project is the one at the center of the screen, larger and with a color image. All other elements are grayscale and smaller.
The idea is similar to the previous point, except that instead of making the change after a certain interval, the user uses buttons with arrows to make the change in the direction of the arrow clicked.
As soon as one of the arrows is clicked by the user, the automatic change interval is paused for 15 seconds.
A pause button is visible at the top left of the screen, allowing you to pause the automatic change interval. This can be useful if you want to stay on a particular project, or if you simply want to take control of the changes.
The interval also pauses when the user moves to another browser tab.
In the top right-hand corner of the screen is an incomplete square. When you click on it, the program launches in full screen mode. Simply click this button again to return to the previous state.
For this page, I created a visual novel, but instead of just creating a visual novel, I created a mini-library. That is, a code that anyone can get their hands on, and all they have to do is change the title, the credits, the title image and write their script. All the code is already done.
Find out more about how it works.
In order to spend as much time as possible on my portfolio, the creation of icons for certain programs, as well as for the background image of the visual novel's title, were generated using artificial intelligence.
The background images and the photos of me in my visual novel were made by me. As for the background image on the home page, it comes from Microsoft.
Due to the nature of my project, a copy of Windows 11, the adaptability of my site on small screens did not render well. I therefore indicated with a message that their screen was too small to take full advantage of my site. Of course, there's an option for them to access the site anyway.
Apart from this minor problem, I didn't encounter any real problems. Everything went pretty smoothly, with the occasional hiccup, but nothing insurmountable.
- Add programs: small games, a functional notepad
- Context menu: add links to fill the context menu
- Notifications: add notifications
- Adding projects: I'll have to add my new projects as time goes by.
- Click on the active project: access a project's online site by clicking on its image.
- Click on a project to make it the active element: clicking on the next/previous project changes the active project.
- Create version 1.0 of the JavaScript library
- Adding content to the current story
In conclusion, it's a project that gave me a lot of pleasure and allowed me to experiment with a lot of things. I set myself goals and I managed to achieve them, and even to do better than I had planned. It's a complete and complex project that I built page by page before putting it all together at the end. This way I was able to concentrate on one problem at a time.
The most complex part for me was the visual novel, as there are so many little details to take into account. But the further along I got, the more I wanted to do more, and I think that's what helped me achieve this result.
I'm looking forward to learning new techniques and technologies so that I can continue to improve my portfolio.