As a part of my training exercises in my internship, I was given an exercise to create and deploy my portfolio using a Vite project of React Typescript and Tailwind CSS. This was my first Typescript and Tailwind CSS project.
One main issue encountered while creating a vite project was the node configuration and dependency issues. Using NVM, I could upgrade the node version and create a react typescript based vite project resolving the issue.
Vite provides a well-organized project structure which makes development much easier. The project is created with a set of inbuilt boiler-plate codes which can be edited as the developer's need.
The above picture depicts the project structure of my portfolio code base generated by vite. The components folder was additionally added by me to save the components that I will be creating and using throughout the project.
Tailwind had to be installed and configured into the project. When installing tailwind, the dependency generates a config file where the paths of the components where tailwind styling is used had to be mentioned.
After tailwind is successfully configured and documented, I moved on to the next step of creating components and adding styles. To make the task much easier the tailwind CSS extension was installed in Visual Studio code which suggests styling components when initialized.
The above pictures depict each section of the portfolio which is developed in separate components.
Then to insert animations, Framer Motion was used, this library consist of a vast area of animations which could be designed or select already designed code bases and applied to the project. Once the animations are added and configured the server must be restarted for them to be applied to the project.
Then came the navigation linking section, to link the components, another react library 'React-Scroll' was used. Since all the components are on the same page, by using react-scroll, the viewer can easily navigate to bottom components by clicking the navigation link. React scroll has a Link component which is similar to the Link component of the react-router-dom. Several properties should be passed to this component, and the main component should be linked using an id.
To deploy the project, surge.sh was used. I faced a challenge here because I had deployed the project without building it, therefore though the project got deployed, the web page generated a 404 error. To avoid getting this error, we need to build the project first using npm run build command.
If the project builds successfully without an error, a folder named dist is generated above the public folder in the project folders. Then the deployment could be done successfully by navigating into this folder and running the surge command. At the end of the day by working on my portfolio, I was able to learn many new concepts and improve and develop my skills.
Visit my portfolio: https://umairam.surge.sh/