This is a submission for the KendoReact Free Components Challenge.
What I Built
SSS (stands for Super-Simple-Sample) Portfolio is my personal developer portfolio, built using 10 components from Kendo React to create a sleek and interactive experience.
It includes the following sections:
- Intro: A dynamic opening with animations featuring my name and position.
- About: A brief introduction to who I am.
- Skills: A showcase of my technical expertise.
- Projects: Highlights of my key development work.
- Contact: A simple way to reach out to me.
This portfolio reflects my skills and design approach while leveraging Kendo React to deliver a smooth UI.
Demo
- Live page: https://new-contest-portfolio.vercel.app
- Github repository: https://github.com/longphanquangminh/new-contest-portfolio
🎉 Intro:
When hovering over the image, it animates with a pixel effect and displays my position:
🎉 Popup message:
When scrolling down, a pop-up message appears, allowing users to interact with me on LinkedIn without needing to scroll all the way to the Contact section. Users can close the pop-up by clicking the icon on the right.
🎉 About and Skills:
There will be a slight animation for the progress bars when scrolling to them.
🎉 Projects:
Header for Projects section:
The project cards will have a sticky effect and stack on top of each other. Recruiters can view project details and access either the live site or the documentation (similar to a whitepaper).
🎉 Contact and Footer:
This section only includes the contact area with a remix-style effect, a slider for interactive playground purposes, and a footer to display additional information about the project and the technologies used.
KendoReact Experience
I built a sleek portfolio by experiencing and leveraging the following 10 free high-quality components from Kendo React:
🧩 AppBar: Used for navigation at the top of the page.
🧩 Avatar: Displays my profile picture in the pop-up message section.
🧩 Badge + BadgeContainer: Used to attach a badge to the avatar—I added a blue checkmark to indicate that I’m a verified applicant.
🧩 Button: Navigation buttons placed in the AppBar.
🧩 FloatingActionButton: Used for other buttons on the page. I know that a Floating Action Button is typically a fixed-position CTA button to keep it accessible throughout the user experience, but since it has a clean UI and a large, clear design, I used it as a button with a position: relative value in different sections of my portfolio.
🧩 Typography: Displays text on the page.
🧩 SvgIcon + Kendo React icon set: Enhances the visual appeal of interactive elements on the page.
🧩 ProgressBar: Shows my proficiency levels for different skills—this is a creative way to use a ProgressBar beyond just indicating loading states.
🧩 Fade animation: Adds a dynamic effect to my name in the contact section near the footer—this idea was inspired by remix music videos from my country (or maybe from other places too, I guess).
🧩 Slider: Adjusts the scrolling speed of the text mentioned above—I treated it as a mini playground for users to experiment with.
I originally planned to use the Pie Chart component to display my LeetCode stats from API response, but since it’s a premium component and to save time, I decided to skip it for now.
AIm to Impress
My idea is to use AI to learn about my data/information and integrate a live chat section with this AI so that recruiters can chat as if they were talking directly to me. They could ask what I’m capable of, what roles I’m suitable for, my weaknesses, and how I solve specific problems—helping them gain accurate and quick insights about me.
However, due to time constraints (since I found out about the challenge quite late), I didn’t integrate AI into this project and am not applying for this award.
Delightfully Designed
I’m not applying for this category since I only leveraged the UI and logic of the components to build this portfolio without using the theme. My main goal is to win the "Prompt Winner" award 🏆
Thank you for reading my post! If you have any thoughts or feedback about the project, feel free to leave a comment below. I’m always open to suggestions and eager to learn from talented developers/engineers to enhance my value.
P/s: We don’t need to know who created the design system or how long it has existed. As long as the UI is well-designed (and logically structured), we, as FE Engineers, will create the most outstanding products.
I don’t chase perfection, it follows me – Long Phan
🚀 This blog was highlighted on X by Dev Community: https://x.com/The_React_Dev/status/1904931099626647768
