my portfolio thumb

Portfolio Rebuilt

HTML/CSS

This is my online portfolio, where I enhanced my HTML and CSS skills and showcased my front-end development abilities. My goal was to create a beautiful, user-friendly, responsive website that presents my personal information, education, work experience, and projects.

Sally Tsai's Portfolio

Team

Sally Tsai

My Role

UI UX design

Tool

HTML/CSS Github Sourcetree

Duration

3 weeks

Method

I used Bootstrap’s UI framework to quickly build the website’s layout and elements, and leveraged its built-in features to achieve responsive design and navigation bar effects. I also used Git with SourceTree to do version control, which allowed me to easily track and manage my code changes, and revert or merge when needed. Using these tools saved me a lot of time and effort, and also made my project more aligned with the enterprise workflow.

Result

I successfully completed my online portfolio and deployed it on GitHub Pages. You can access my website through this link, or take a look at the screenshots below to get a feel of my website style. I think my website has the following highlights:

  • ◆ The color and font choices match my personal brand and style.
  • ◆ The page design is clear, simple, and hierarchical
  • ◆ The website is compatible with different sizes and resolutions of screens
  • ◆ In the desktop screensize, I added a floating chapter menu on the project detail pages so users could know which chapter they are and jump to different chapter easily.

In the process of completing this project, I also encountered some problems or difficulties, such as:

  • ◆ How to properly adjust the spacing and alignment between elements
  • ◆ How to avoid the problem of long loading or distortion of images
  • ◆ How to use Git and SourceTree to manage multiple branches and conflicts

I solved these problems by online documentation, forum discussions, watching tutorial videos, referring to other people’s code and websites, etc., and learned a lot of new knowledge and skills from them.

Takeaways

I am satisfied with my project, but I also feel that there are many areas that can be improved. For example, I can use Javascript to add some functionality and animation to make my website more fun and interactive. I can also optimize my materials, such as compressing images, using SVG format, etc., to improve the performance and accessibility of my website. In addition, I also want to learn some other front-end frameworks, such as React or Vue, to enhance my development efficiency and level. I hope that by constantly learning and practicing, I can create more and better website works.

Other projects