opentechne / discover-vincent-vangogh

Discover the passion, the pain, and the creativity behind Van Gogh's art with this website I've done with HTML, CSS & Javascript as part of my design course.

Discover Vincent Van Gogh 💙🎨

This is Van Gogh's World: A Journey Through Art and Emotion.

Embark on a journey through the colorful and emotional world of Van Gogh's art. Explore his life story, his techniques, and the inspiration behind his masterpieces. Discover the passion, the pain, and the creativity behind his art.

This project has been created as part of my web design course, using the tools I've learned: HTML, CSS, and Javascript. The main objective of this page is to pay tribute to an exceptional artist and his legacy, as well as to arouse people's curiosity to learn more about his life and work. I hope you enjoy this page and that it awakens your curiosity to learn more about the life and work of this great artist. On my website, visitors will be able to access information about Van Gogh's beginnings in the art world, as well as discover the reasons that led him to devote his life to painting. They will also gain insights into the challenges and loneliness that he experienced throughout his life, as well as the interesting facts that surrounded him. The most significant events in his life, from his early days to the end of his days, will be highlighted for viewers to explore.

🌟Thank you for visiting my final web design project!🌟

Design process: Figma🖥️

screen-capture.10.webm

Used Technologies 🟠 🔵 🟡

‼️ Additional Information: ‼️

It has been programmed for entertainment purposes.

It has been made specifically to practice and improve my skills.

📫 Connect with me:

🎨 Check out my work:

discover-vincent-vangogh's Issues

Create index.html

-Modify the whole structure by changing homepage.html to index.html for a better workflow

Update link & readme

Tiny details not working as planned

-Vincent's life should be able to scroll or have a fixed height
-Menu list items not appearing in Early life
-Delete menu in subcategories from Vincent's life
-Stop btn-svg animation for mobile
-Illness images should be wider
-Vincent's art div should be higher for mobile
-Same font size for all Vincent's art paintings explanation (desktop version)
-Discover (loving Vincent & immersive be higher for desktop
-Adjust height of discover page
-Adjust Discover page size of background for mobile

Fix animations for better workflow

-The menu animations are "cut off" when performing a mouseout action. This is caused by applying an animation that, when removed, doesn't produce the fadeOut effect.
-Text becomes black for a very short perior of time in Vincent's Life.
-Undo frames and text turning white.
-Optimize menu images.

Add comments for each section in my code

-According to my web design course it is mandatory to include comments explaining all the code. Therefore, I have to make a few modifications and comment everything before hand it in to pass the course.

readme image not found

Make a few modifications for the site improvement

-Avoid using the / at the closing of image tags.
-In terms of design coherence, the social media icons next to the form have a different design compared to the rest of the website.
-Modify all homepage.html to index.html for better workflow.
-Make the discover page responsive and reduce the amount of images for better optimization.

Resposive design for mobile

-Check all the pages work correctly on mobile
-Check all the animations are turned off for mobile

Clean code

-Clean code before handing in the project
-Comment the index.html index.css & index.js
-Try to use one forEach instead of several
-Try to use children instead of counters in the js

Change structure of web

-Create three folders for css, js & assets and put all the html aside
-Check all the images and links work