Hello everyone, this is a personal website completed on 17 September 2023, A website to show case the project that you have work on so far, so that other can see your update. Design of this project has been inspired from multiple others portfolios.
Techology descisions:
- Vite: Vite is way too fast as compared to traditional CRA. And I needed separate part for frontend. so for this reason I found Vite to be perfect match for my framework.
- NPM: For package dependency manager, I have used NodePackageManager. It is popular and have vast comunity. And I had been using it for over years and till now have not encounter any issue. So, I have decided to stick with it.
- ESLINT: When multiple developer works on same project, then there should be some rules on coding standards, so to maintain that ESLINT is used. It is popular and have large community support.
- REACT JS: For Frontend part I have decided to use React JS, because of its two main feature, decalartive, which takes away lots of dom manipulation and resuablity, which reduces code length to great extent and makes development really fast and clean and organized.
- Tailwind CSS: Tailwind CSS is new CSS library. It is gaining a lot of popularity. And it is really flexible. And its documentation is really easy to follow up.
- React-Feather: For icons, I have used react-feather library, because it has lots of icons and documentation is really easy to follow.
Folder structure:
- assets - incudes all the resources
- components - Different components of the pages
- layouts - navigation bar
- tailwind.config.js - all the extra color code, global sore
- index.css - resualble css classes
Information on each folder
- tailwind.config.js - In tailwind.config.js: I have added my own color code, and some spacing that I needed, a custom space and color, tailwind does give this flexibility to your own color code, basically they allow to extend.
- .eslintrc.js - eslint rules to make your code organize and structure in particular format, so that code standards would be same across all the devs involved in the project
- assets/ - Included all the resources that is used in the project, images.
- Header.jsx - File contains the landing page, gives a short description of me, in not more than 50 words.
- Nav.jsx - a horizontal navigation, to navigate to different section of the pages.
- About.jsx - A brief discription of me and the front-end and backend skills that I have gained over the years are listed here.
- Experience.jsx - A vertical timeline of my work, over the past 2 years. This designs are made from scratch without any libraries.
- Project.jsx - List of projects that I built during my online courses, some are made during course some, by myself. used grid in this section because it is 2D.
- Contact.jsx - It contains list of social links that we can connect.
- Footer.jsx - all the copyright stuffs are here.
Design patterns simple followed - if one dimension then use flex dispaly. If two dimension then use grid dispaly.