Demo personal website for Founders & Coders.
The folder contains the HTML, CSS and JAVASCRIPT files, as well as media folders that link to images in the website as well as vector icons.
One can open the page by visiting https://elenamarinaki.github.io/.
No external libraries have been used.
The website is implemented in one single page and the user can access different tabs (Music, Web-Projects, Work, Education, Founders & Coders, Gallery) by clicking on the respective links. This functionality is implemented with javascript, by manipulating DOM elements, hiding and revealing them depending on the element clicked.
The items are presented more clearly on the page, in different boxes and in flex display with flex-direction: column;, so they appear vertically.
I changed how each job title is presented visually. Every item is enclosed in a box and the items are entering the page gradually, as the user is scrolling down. I have added media queries for smaller screen sizes, so that the width is adapted, as well as the text size.
The CSS of the tab has been quite changed. The main text has been enclosed in a box, as have the yellow links that lead to my different pages. I find it easier to focus on each item this way, as the elements are more visually structured. I have added media queries for smaller screen sizes, so that the links appear below the text in mobile, instead of side by side as in desktop.
I have changed the gallery type from simple scrolling through the images to actual carousel. Now the images are changing automatically, but the user can also interact with the prev - next buttons. All images are from https://unsplash.com/.
-
If I had more time, I would have worked more on making the website more mobile friendly. In the last updates I have added media queries for the sections that I felt were not well presented in smaller screens, but more sections (e.g. the Education tab) could benefit from more work to make the information easily accesible.
-
I would also change the home page for mobile screens, so that the section links appear on the side rather than below the avatar image and header text.
-
Lastly, I tried to implement a modal where all recent updates would appear. The user would click on it and the modal would appear in the center of the page, when the rest of the page would appeared blurred in the background. One could close the modal by clicking on the blurred background and bring the focus back on the site. I worked on this feature for quite some time, but did not manage to make it work properly, so it is not included here.