Behind the scenes: Creating my personal Portfolio Project
I challenged myself to complete a portfolio project within 24 hours, as I usually take more than 4 days to finish a front-end project. This was a difficult decision for me because I often end up spending time watching series on Amazon Prime or endlessly scrolling through Instagram reels.
This challenge made me realize that with enough determination and willingness, it is possible to achieve your goals.
Let's get started without further delay.
What was my plan?
My initial plan was to explore portfolio templates created by others to understand different design approaches. I specifically focused on projects built with the Next.js framework, as it is currently in high demand in the industry. During my research, I also noticed that some non-portfolio websites, such as data analysis platforms, were using Framer Motion for animations.
I was particularly impressed by the animations on the Framer website, which inspired me to include Framer Motion in my own project. As expected, I also decided to use Tailwind CSS for styling.
Tech Stack
Language: TypeScript
Framework: Next.js (latest version)
Styling: Tailwind CSS and Framer Motion
Features & Development Process
Implements responsive design using Tailwind CSS
Provides smooth animations with Framer Motion
Supports dark mode for enhanced user experience
Features modular and reusable components
Offers easy customization and scalability
Challenges & Solutions
Since I was not very experienced with Next.js, the initial setup was a bit challenging for me.
I used Framer Motion for the first time in this project, so I had to go through the documentation to understand how it works.
Applying Tailwind CSS involved some trial and error, as I spent time experimenting with different styles to decide what looked best. This process increased the overall time required to complete the project.
I also found that Next.js is more strict compared to React.js. For example, it doesn’t allow the use of apostrophes directly in some contexts—you need to use entities like
'. Additionally, it does not allow unused imports, which will cause build errors.
Lessons Learned
Gained a better understanding of effective styling practices using Tailwind CSS.
Learned how to test a Next.js project using the
npm run buildcommand.Learned how to use Framer Motion for adding animations.
Conclusion & CTA
In conclusion, taking on this 24-hour portfolio project was a valuable experience that pushed me beyond my usual limits and helped me grow as a developer. By working with technologies like Next.js, Tailwind CSS, and Framer Motion, I improved my technical skills and gained more confidence in handling new challenges. This project taught me the importance of determination and focus, showing that with the right mindset, ambitious goals can be achieved.
Lighthouse extension conclusion
You can view the live project here: https://soumavadas.dev/
I would appreciate any feedback you may have.
If my journey has inspired you to start your own project, I encourage you to take the first step and embrace the learning process. Feel free to reach out if you have any questions or need support. Let’s connect and grow together as developers.
