- Node.js
v16.13 - React
v18.2
-
Design System: Created a mini design system @starkit using Figma with neo-brutalist style.
-
Themes: Implemented both light and dark themes. The site respects the initial theme preference of the user's system.
-
3D Models: Utilized Spline to create unique and engaging 3D models.
-
Personal Touches: The site features a representation of my room and an airport scene from my visit to Toulouse, making the user experience more personal and unique.
-
Site idea from Bokoko
-
The loading spinner was inspired by this CodePen by Fazley Rabby.
-
The custom scrollbar was implemented based on this tutorial by Zkreations.
-
Good looking simple favs from Favicon generator
-
Simple clean patterns from HelloYes
-
This project was developed with assistance from ChatGPT, a language model by OpenAI.
- Clone the repository.
- Install the required dependencies with
npm install. - Start the local development server with
npm run dev.
- Execute
npm run storybookto run storybook for component development and testing.
I took a break to find the next opportunity in my career and decided to build a new website for myself as a frontend developer. Initially, I had grand ambitions and wanted to learn many new things and incorporate them into my site, including some storytelling techniques from Awwwards. However, I deviated quite a bit from my original plans.
During my exploration, I came across Spline, which felt like Figma for 3D design. Intrigued, I spent two weeks familiarizing myself with the tool and creating assets for my final project. Eventually, I started setting up the code and wanted to fully utilize Tailwind CSS. I got carried away while trying to understand the power of Tailwind, which added more time to my project.
To validate some design ideas, I decided to create a basic design in Figma. But rather than using an existing design system, I challenged myself to create a mini design system with a neo-brutalist style. I found this design language simple and elegant (but not accessible always 😅)
Once I started coding, I also had the idea to document my components. It was the perfect opportunity to explore Storybook. Although there were moments of frustration and the temptation to abandon the project and focus on interview preparation, I pushed through. ChatGPT provided valuable support, clarifying my doubts since I had no one to discuss my UI ideas with. (Included in this README) 🤖
Finally, I am grateful for the support from my brother and friend, who encouraged me to continue and not view it as time wasted. I thoroughly enjoyed the process and am proud of the skills I acquired along the way. This old portfolio website holds significance for me as it is the first site I created when I was starting to learn HTML and CSS after getting into the job 😎 (Actually, there is one more site, but I used Dreamweaver, so it doesn't count. Also, it's goofy!) 😜
This project is licensed under the Creative Commons Attribution 4.0 International License.
You are free to:
- Share: Copy and redistribute the material in any medium or format.
- Adapt: Remix, transform, and build upon the material for any purpose, even commercially.
Under the following terms:
- Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
For more details, see the Creative Commons Attribution 4.0 International License.