Xiaoyue Lyu https://a1-rubylll.glitch.me

This project shows a simple one-page personal portfolio website. It includes some personal and professional information about me.

Technical Achievements

• Styled page with CSS:

• For the most of the project I use .class selectors since it makes the HTML structure stay organized and allows me to write CSS in a more explicit way.

• In addition to this, I add rules for body, a, hr, and pre tags; generally it is because these tags only appear once in the project thus I don't need to assign them a class or id.

• I also combine two selectors to apply styles only to those that have both classes and exclude those that only have one.

• I use grid when the screen is relatively large and flex otherwise.

• JavaScript animation: I write a JavaSctipt function that changes the format of the website depending on the screen size, so that makes my website a little bit responsive. It is kind of the same effect achieved by using css media queries.

• Experiment with other HTML tags：

• First of all, I use div tags to seperate different sections of the website and make them organize.

• I also use h1, h2, h3, and p tags to indicate different kinds of info.

• For courses list, I use table (as well as th and tr tag) since there is relatively large amount of info in this section and I want to make it as clear as possible.

• For experience section, I use ul and pre since I want to pre-format the spaces between items on the list. I also add two small icons using i tag, which come from fontawesome.

• In the footer, I use link tag, as well as href and mailto.

Design Achievements

• Color palette: Screenshot of the color palette I created can be found in the same directory as the source code of this website.
• Used the Raleway Font from Google Fonts: I used Raleway as the font for the primary copy text in my site.