![[The AI Show Episode 142]: ChatGPT’s New Image Generator, Studio Ghibli Craze and Backlash, Gemini 2.5, OpenAI Academy, 4o Updates, Vibe Marketing & xAI Acquires X](https://www.marketingaiinstitute.com/hubfs/ep%20142%20cover.png)
![[FREE EBOOKS] The Kubernetes Bible, The Ultimate Linux Shell Scripting Guide & Four More Best Selling Titles](https://www.javacodegeeks.com/wp-content/uploads/2012/12/jcg-logo.jpg){kind=logo}
![From drop-out to software architect with Jason Lengstorf [Podcast #167]](https://cdn.hashnode.com/res/hashnode/image/upload/v1743796461357/f3d19cd7-e6f5-4d7c-8bfc-eb974bc8da68.png?#)
.png?#)
.jpg?#)
_Christophe_Coat_Alamy.jpg?#)
![Rapidus in Talks With Apple as It Accelerates Toward 2nm Chip Production [Report]](https://www.iclarified.com/images/news/96937/96937/96937-640.jpg)
Professional Portfolio: Next.js and KendoReact Duo
This is a submission for the KendoReact Free Components Challenge. What I Built I've finally built my resume, and thanks to the competition, I was highly motivated to complete it on time. My website is live here: Portfolio Repository here: A lot of css Demo See how it all works here: A few images: KendoReact Experience Oh, that was something! The library is complex and multifaceted, and now the site is genuinely fun to interact with. At first, I struggled to override the default styles, but eventually, Kendo and I found common ground. I used the required number of free components for the competition, along with some paid ones, as I plan to keep using this portfolio for personal purposes. The result feels light and airy, despite packing in a lot of information. All in all, I never expected I'd be able to pull this off! Delightfully Designed Kendo UI Components and Icons Used in the Project Kendo UI Components _ListView _ I used ListView in the Projects component to display project items in a structured format. _ScrollView _ I implemented ScrollView in the Projects component to create a scrollable container for project cards. Card I utilized Cards in multiple components (Projects and Skills) to present information in visually distinct containers. Tooltip I added Tooltips in the Projects component to provide additional information on hover. Badge I used Badges in both Projects and Experience components to highlight key information or status indicators. _Popup _ I implemented Popup in the Certifications component to display detailed certification information. _Button _ I used Buttons in multiple components (Contact, Header, Sidebar) for interactive elements. _Fade _ I implemented Fade animation in the Experience component to create smooth transitions. AppBar and AppBarSection I used AppBar for the main navigation in the Header component. SvgIcon I implemented SvgIcon in multiple components (Header, Sidebar) to display vector icons. _CardHeader, CardTitle, CardBody _ I used these Card subcomponents in the Skills component to structure content within cards. Kendo UI Icons homeIcon I used this icon in the Header and Sidebar components for navigation to the home page. userIcon I implemented this icon in the Header and Sidebar components for the user profile section. folderIcon I used this icon in the Header and Sidebar components for the projects section. envelopeIcon I implemented this icon in the Header and Sidebar components for the contact section. fileIcon I used this icon in the Header and Sidebar components for document-related sections. arrowLeftIcon I implemented this icon in the Sidebar component for navigation controls. arrowRightIcon I used this icon in the Sidebar component for navigation controls. Implementation Notes In my portfolio project, I've made extensive use of the Kendo UI component library to create a professional and interactive user interface. The components are organised into distinct sections (Projects, Certifications, Contact, Experience, Header, Sidebar, and Skills), each with its own functionality and styling. Each component has its own dedicated CSS module (.module.css files) for component-specific styling.
This is a submission for the KendoReact Free Components Challenge.
What I Built
I've finally built my resume, and thanks to the competition, I was highly motivated to complete it on time.
My website is live here:
Repository here:
A lot of css
Demo
See how it all works here:
A few images:
KendoReact Experience
Oh, that was something! The library is complex and multifaceted, and now the site is genuinely fun to interact with. At first, I struggled to override the default styles, but eventually, Kendo and I found common ground.
I used the required number of free components for the competition, along with some paid ones, as I plan to keep using this portfolio for personal purposes. The result feels light and airy, despite packing in a lot of information.
All in all, I never expected I'd be able to pull this off!
Delightfully Designed
Kendo UI Components and Icons Used in the Project
Kendo UI Components
_ListView _
I used ListView in the Projects component to display project items in a structured format.
_ScrollView _
I implemented ScrollView in the Projects component to create a scrollable container for project cards.
Card
I utilized Cards in multiple components (Projects and Skills) to present information in visually distinct containers.
Tooltip
I added Tooltips in the Projects component to provide additional information on hover.
Badge
I used Badges in both Projects and Experience components to highlight key information or status indicators.
_Popup _
I implemented Popup in the Certifications component to display detailed certification information.
_Button _
I used Buttons in multiple components (Contact, Header, Sidebar) for interactive elements.
_Fade _
I implemented Fade animation in the Experience component to create smooth transitions.
AppBar and AppBarSection
I used AppBar for the main navigation in the Header component.
SvgIcon
I implemented SvgIcon in multiple components (Header, Sidebar) to display vector icons.
_CardHeader, CardTitle, CardBody _
I used these Card subcomponents in the Skills component to structure content within cards.
Kendo UI Icons
homeIcon
I used this icon in the Header and Sidebar components for navigation to the home page.
userIcon
I implemented this icon in the Header and Sidebar components for the user profile section.
folderIcon
I used this icon in the Header and Sidebar components for the projects section.
envelopeIcon
I implemented this icon in the Header and Sidebar components for the contact section.
fileIcon
I used this icon in the Header and Sidebar components for document-related sections.
arrowLeftIcon
I implemented this icon in the Sidebar component for navigation controls.
arrowRightIcon
I used this icon in the Sidebar component for navigation controls.
Implementation Notes
In my portfolio project, I've made extensive use of the Kendo UI component library to create a professional and interactive user interface. The components are organised into distinct sections (Projects, Certifications, Contact, Experience, Header, Sidebar, and Skills), each with its own functionality and styling.
Each component has its own dedicated CSS module (.module.css files) for component-specific styling.
