Cam's
Weekly Blog

Building a Project Portfolio From Scratch

Creating a project portfolio can be an exciting yet daunting task. From deciding what technologies to use to crafting the perfect design, there are many considerations to keep in mind. In today's world, having a professional and impressive online presence is crucial, especially for those in creative fields. A project portfolio is an excellent way to showcase your work and skills, and with the right tools and technologies, it's easier than ever to create an impressive portfolio website.

In terms of content, my portfolio showcases a few of my previous projects, a home page, an ‘about me’ section with a downloadable CV plus a functional contact form created via react-hook-form. The whole website is fully responsive, and will adjust to the size of the screen it is being viewed on. The process will be explained in greater detail later on in the post, so grab a coffee and lets get started!

Technologies Used This Week

• React.js
• TailwindCSS
• Typescript
• npm (react-router, framer-motion, react-hook-form)

In this blog post, we will go through the process of creating a project portfolio using TypeScript, TailwindCSS, React.js, and three essential npm packages: react-hook-form, react-router-dom, and framer-motion. Before we dive into my experience of using these technologies and packages, let's briefly discuss each of them.

TypeScript is a superset of JavaScript that adds static typing to the language; it can catch errors at compile-time, making it easier to write maintainable and scalable code. I also used TailwindCSS - a utility-first CSS framework - which allows you to quickly style your application using pre-defined classes. It has gained popularity for its ease of use and flexibility. React.js is an extremely popular JavaScript library for building user interfaces. It uses a component-based architecture, making it easy to reuse code and build complex UIs.

In terms of npm packages used, react-hook-form is a library that simplifies form validation in React.js applications, allowing you to easily validate and submit forms. The npm package react-router-dom is a library that allows you to handle routing in your React.js application. It provides a simple API for creating dynamic routes and managing navigation. Last but not least, framer-motion is a library that uses declarative syntax for creating animations in React.js applications.

My Experience

I thoroughly enjoyed using these technologies together! First off, using TailwindCSS for styling was a game-changer. With Tailwind's utility-first approach, I was able to quickly and easily create responsive layouts and customize designs without writing a lot of custom CSS. This saved me a ton of time and made it easy to iterate on designs. I can definitely see myself using this CSS framework again in the future. In terms of Typescript, it is easy to visualise why it would be useful. Even though it was relatively easy to transition to Typescript, I do admit that I need to spend more time with it to fully grasp its capabilities. However, I do see the value in investing more time into learning it.

In particular, I can see how TypeScript would be incredibly helpful for larger scale projects. As projects grow in size and complexity, maintaining code quality and catching errors becomes increasingly important. In addition, it can also provide better documentation for the codebase, making it easier for developers to understand the codebase and collaborate effectively. Overall, I look forward to continuing to learn and explore the potential of TypeScript in my future projects.

Lastly, using React.js alongside Tailwind and TypeScript was a powerful combination. React's component-based architecture allowed me to break down complex UI elements into smaller, more manageable parts. On the whole, I found that TailwindCSS, TypeScript, and React.js worked together seamlessly and provided a great developer experience. The combination of these technologies allowed me to build a high-quality web application quickly and efficiently. If you're a web developer looking for a modern and effective development stack, I highly recommend giving these technologies a try.

I also want to give an honourable mention to the npm packages used within this portfolio. With react-router-dom, I was able to create a seamless user experience that felt like a native app via its routing system. Next, framer-motion provided me with a great toolset for creating smooth and visually appealing animations within our React components. With framer-motion, we were able to add motion and interactivity to our UI elements with just a few lines of code. Even though the animations I used were very simple, it made the whole website feel more alive and interesting. The library is also well-documented and easy to use, making it a great choice for animations.

Finally, react-hook-form made it easy to create forms within our React application. The library provides a simple and intuitive API for working with forms in React and saved me a lot of time and effort. Overall, I found that these npm packages were invaluable in making my React application more functional, interactive, and visually appealing. I highly recommend checking them out if you're working on a React project and looking to add some extra functionality or polish.

Roadmap

Even though I see this website as complete, that is not to say that I will not add further improvements to it in the future. If I find tech that would synergise well with the rest of the app, I plan to use it. On top of this, I will make sure that my previous projects section is up-to-date with my latest builds. If you have any suggestions on how I could improve the overall design and functionality of my portfolio, feel free to contact me :).

Plans For Future Projects

I've been hearing a lot about TypeScript and Redux lately and I've decided to dive in and learn more about them. In addition to those technologies, I'm also interested in learning more about APIs and three.js in the context of a React project. Being able to fetch and manipulate data from external sources and create stunning 3D graphics and animations sounds like a lot of fun and would definitely make my projects stand out. Overall, I think these tools and technologies will help me become a better developer and create more engaging and interactive web projects. I'm excited to get started and see where this journey takes me!