Yaohan_Ashley_Personal_Website

[YaohanXu]

We tried to combine the need of this final project to engage the general pubic with our own needs to display the selected projects. That’s how we came up with this idea of a personal website which can also work as a community for people to share their comments on different projects.

The website has three main pages: projects page, comments page and about me page. Additionally, each project also has its own project page which can be generated automatically.

The link of the recorded video for final presentation is here: https://upenn.box.com/s/nzvk3yu68xgbzujcheyy298a7hp5j5vw (If you meet with any problem to have access to this, you can just email me or slack me about this).

Finally, we have a functional problem related to the transition of loading page.

I think the problem is about this piece of JS code:
window.addEventListener('load', () => {
document.body.classList.add('loaded'); // Add the loaded class to the body
});

And this piece of CSS code:
body {
height: auto;
width: 100%;
max-width: 1000px;

margin: 0 auto;
padding: 0;

opacity: 0;
transition: opacity 0.75s ease-in-out; /* for fade-in effect */
}

body.loaded {
opacity: 1; /* for fade-in effect */
}

You may meet with a problem when switching back and forth between different pages frequently (sometimes it works well!). However, if I delete the transition function (or just change the initial opacity of the body element to 1), the website will work correctly.

Thank you so much if you could help with this page-loading transition problem!