kevin-kwan / kevin-kwan.github.io

My mobile-responsive, customizable personal portfolio website made using React, Next.js and Tailwind CSS to showcase your resume, education, programming skills, experience, and projects. Includes modular pages, easy-to-use components, and working contact form.

Kevin Kwan's Portfolio

Description

This is the source code for Kevin Kwan's personal portfolio website. The website is a testament to my front-end development skills, showcasing proficiency in React, Next.js, TypeScript, JavaScript, TailwindCSS and other modern web technologies.

The portfolio includes various projects that I have worked on, demonstrating his ability to create responsive designs, interactive user interfaces, and accessible web components. Each project in the portfolio highlights different aspects of front and back-end development, providing a comprehensive view of my capabilities.

Live Demo

You can view the live demo of the website at Kevin Kwan's Portfolio.

Installation and Running the Project

Make sure you have node.js and git installed. Follow these steps to install and run the project:

1. Clone the repository:

   git clone https://github.com/Kevin-Kwan/portfolio.git
   

2. Navigate into the project directory and install the dependencies:

   npm install
   

3. Run the project:

   npm run dev
   

The website should now be running on localhost:3000.

Deployment

I am currently using Cloudflare Pages to host and deploy my site, Vercel should also work fine.

Contributing

Contributions, issues, and feature requests are welcome. Feel free to check the issues page if you want to contribute.

kevin-kwan.github.io's Issues

GitHub Pages Resume .pdf isn't loading correctly

Probably a path issue

Update projects list

• Add LMC3403 Project Website (probably not going to open-source this)
• Add CS4400 Final Phase IV Project (not open sourcing most likely)
• PreMID Contribution

Prevent Name from Growing when Hovering on Mobile

This messes with the screen and scrolling and makes the overall viewing experience jarring on mobile/smaller screen devices. I may have to keep an eye on a similar issue regarding other icons doing the same thing.

Planning to fix over this weekend.

Modify EducationCard to display Test Scores, Awards, Extracurriculars/Associations/Clubs

They will be optional parameters.

• Test Scores (like ACT, SAT)
• Awards (like Scholarships)
• Extracurriculars/Associations/Clubs (just pass in a list)
• Make the images clickable to redirect to school's website

Replace hamburger icon and cross with react icons

StarsBackground not rendering the entire length of pages of Experience and Projects

Issue occurs on mobile. most likely a CSS issue.

Todo: Allow searching and filtering of projects on Projects page

For example, allow projects to be filtered based on language/technology

• Search Bar to allow for searching (top center for mobile, left side on desktop)
• Filtering based on most recently completed/added (might have to refactor how the cards work to store date or number to represent order)
• Filtering based on completed/in-progress
• Alphabetical based on title (why?)
• Asc/desc based on number of stars on a project (would most likely require a refactor and api call to GET stars and store their values)

Tags/Categories (will figure this out later)

• (not sure yet) add tags, which would involve allowing to filter by tag

Add University GPA

Since I graduated

Skills Page Animation

When the page loads, have an animation go from left to right per row making each image bigger and then back to normal like seen on https://idx.dev/

Add Education Page

• todo: add an education page listing all previous/current education
• cards can be similar to work experience cards

Add skeleton loading to pages with cards

Skeleton loading is a user interface (UI) design technique used in web development to enhance the perceived performance of loading content. It involves displaying a placeholder preview of the final content before it finishes loading. The placeholder is usually a blank version of the page layout and is gradually populated with the actual content once it becomes available.

color code or add logo/color of the main language used to the cards on the projects page

The cards are slightly bland at the moment.

Replace Buttons of Leetcode/Hackerrank

To prevent button overflow, just replace the globe icon with Leetcode/Hackerrank Icons and have the text be "Profile"

Add secrets for Adobe DC and Contact Form GitHub Pages

Figure out how to add secrets for deployment on the resume and contact form pages.
Right now they are not working correctly

On skills page, add "YOE" when hovering or info about about use?

Page is kind of bland in terms of interactiveness right now.

Todo: Add image/gif thumbnail previews to the project cards

I'll have to figure out all the resizing stuff and make them optional, but I think it's good to add to increase the visual appeal and make people want to learn more about your projects.

Broken Image URL

NCR Voyix Image URL seems to be broken, needs replacement

Replace custom notification popups/windows with React Toastify