Coding is fun and requires creativity. I use React because its features allow me to build individual components and combine them into pages, just like LEGO! To demonstrate my cheerful and positive personality, my website was inspired by Mario Brothers, designed to introduce myself like playing a game.
If you have any questions for me, feel free to contact me. I hope you have a great time exploring my website!
In 2023, I created this website as a personal project for fun. After a year, I decided to target potential employers and clients. I gathered insights from friends' experiences and researched other software engineers' portfolios. Now, I am excited to present version 2 of my portfolio. Let's explore the improvements!
- Placing My Resume on the Navigation Bar: Adding my resume to the navigation bar enhances accessibility, ensuring that potential employers and clients can easily and quickly view my qualifications. This strategic placement improves their experience and increases the likelihood of making a positive impression.
-
Adding an Explanation to the Button: The button plays an introduction to my website, but without any prompt, its purpose might not be clear. To enhance user-friendliness, I added an explanation that appears when the user hovers over the button. This helps visitors understand its function more easily.
-
Old version:
-
v2:
-
-
Deleting a Meaningless Feature: I initially designed an interactive feature where clicking on a treasure chest would generate coins on the screen, with an avatar following them. While this was a fun element, it didn't align with the interests of my target audience — HR professionals and potential clients. To improve consistency, I replaced this feature with an image of a computer desk, which is more relevant to the content of my About page.
-
Old version:
-
v2:
-
-
Redesigning to a User-Friendly Button: I initially used sun and moon images to represent the dark mode and light mode switch. However, most of my friends didn't realize these were buttons; they thought they were part of the background, indicating that the design was not intuitive. I have since modified the design to resemble a toggle switch, making it more easily recognizable as an interactive element.
-
Old version:
-
v2:
-
Redesigning the About Page: The original About page featured horizontal scrolling, which, although visually appealing, was not intuitive and could confuse first-time users. Additionally, the Jobs and Hobbies sections had unclear buttons, leading to potential missed content. Here are the previous features:
-
Horizontal scrolling:
-
Jobs:
-
Hobbies:
To improve user experience, I redesigned the entire page with a focus on computer-related elements, which align well with my profession as a software engineer. The first image on the About page now features an avatar surfing the website, using a different font family and unique cursor to suggest it’s a browser within a browser. This design naturally indicates the presence of three tabs for navigation.
I also added a sidebar to highlight different sections of the page. The first bio section occupies a full picture page, which might cause users to miss the experience and hobbies sections initially. However, I’ve determined that these sections are not as critical for the portfolio. Users who click on the sidebar or scroll down will find my experience and the hobbies marquee. From there, they can be directed to my Projects page.
Redesigning the Projects Section: In the original version, I styled my projects section as a ranch, using three dogs as links to my work. However, the overall page design did not have a "farm-like" look, making the dogs appear out of place. To create a more cohesive and meaningful design, I changed the project links to a chest box, symbolizing that all my works are my treasures.
-
Old version
-
v2:
Inside the project cards, I also moved the GitHub link button from the bottom to the top of the page, making it easier for visitors to quickly access and view my code.
Through a series of thoughtful updates and redesigns, my portfolio website has become more professional and user-friendly. I hope these enhancements collectively contribute to a more polished and engaging portfolio that better reflects my skills and makes a positive impression on visitors.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify