shangguanwang / personal-portfolio

Personal Portfolio Website built using React, Tailwind CSS and Material UI

Hi there 👋

🌱 Weclome to my Github page, I'm Shangguan

👀 I'm a self-taught Frontend Developer with a passion for building meaningful products, proficient in React and JavaScript.

Projects:

• BerryCart Shopping List 🍓
• NFT Marketplace 🖼️
• Little Joy 🌸
• TypeScript todo list 📝

💪 I'm currently working as a frontend engineer at a startup, continuing #100DaysofCode challenges, and contributing to open-source projects.

Tech Stack:

Connect With Me:

📫 Reach me at my [email protected]

📊 GitHub Stats:

personal-portfolio's Issues

Add Project Details page

Acceptance Criteria

• Pass a Link to project1 that jumps to a project details page
• Include social link icons and tech stack at the top. Add a tooltip for each link so when users hover they can see what the icon link is about.
• Include 4 sections: project summary, background, challenges, and learnings
• Add a go back button to go back to home page
• Ensure when the page first renders, the scroll starts at the top using useEffect

Improvement: Separate the Skills into different groups

Description

Right now the skills is one long line that users can easily scroll through. It's better to separate them into different groups so it's more clear for the users.

Bug: Navigate back to About from Projects

Description

When I'm on the BerryCart subpage, or Experience Page, and I hit "About" in the Navbar, it doesn't go back to the home page

Improve Accessibility by adding label to links

Lighthouse Accessibility Report scored 98

Add Project Content

Summary

• Update the Project section to include the Collab Lab shopping list app.
• Replace Tasky with the "NFT Marketplace" project.
• Remove WIP project.

Add Experience Page

Separate experience from the landing page in its own separate page.

Acceptance Criteria

• install react-router-dom to convert the project from single-page to multi-page, still display Navbar at the top of every page.
• remove resume link from Navbar and style it as a button on the Experience page.
• create SingleExperience component and ExperienceData.
• remove experience and education tab from the About section.

Bug: The Navlink underline doesn't stick

Acceptance Criteria

Want to keep the Navlink underline to indicate current page

Favicon

Summary

• Add a favicon

Process:

Find an icon with orange theme color on Freepik and use Favicon.io to convert it to the right format. Add the code to index.html.

Add Resume Link

1. Upload the resume pdf to Github: tutorial https://kekayan.medium.com/display-your-resume-cv-pdf-in-website-using-github-73a088ac961d
2. Add a link to the navbar that links to the Github pdf url

Add tracking

Summary

Add Google Analytics to site to track user behaviors

Update About Me Text

What I'm doing now, add the Collab Lab Link
Frontend is one word, I "record" podcast
Update Skills
Add "Achievements" section

Keep Resume Link Up to Date

Summary

Keep resume link up to date on the Experience page

Keep Experience Page Up to Date

Summary

Update experience page with the latest information