portfolio 1
react js
Timeline:
4 weeks Duration
Role:
Front-End Developer
Tools:
ReactJS Tailwind Typed JS Vite JS
Overview:
I recorded the development journey of the first version of my portfolio site, utilizing an agile methodology for continuous refinement in design and development.
Teaching myself ReactJS empowered me to construct a website that not only fulfills current requirements but also ensures adaptability for future expansion and component-based reusability.
01/09
The Process:
In the initial iteration of the site, I utilized HTML5, CSS, jQuery, and Javascript. However, as I progressed with a few pages, I recognized the inefficiency and complexity introduced by repetitive code (e.g., navigation, header, and footer). Maintaining changes became challenging as the site expanded.
To address these issues, I explored various frameworks and libraries to enhance the efficiency of website development. Among the contenders like Angular, Vue, and React, I opted for React , due to its popularity and robust support for reusable components. Choosing React presented an opportunity for self-learning , allowing me to delve into this widely used library and its associated frameworks in front-end and web development applications.
To view the first version of my portfolio, please follow this link: Portfolio Version 1.
I did further research into supporting frameworks that would work well for this project. My top choice was Vite.js, since the goal was to create a dynamic fast website, allowing me to see instant updates during development without a full page reload.
02/09
Components:
I have used the following components in my ReactJS + Vite portfolio:
LightGallery - handles the display of images in a gallery format, incorporating images such as thumbnails and zoom functionality. In About Page, I have used Reveal component, to animate the content it wraps, providing a reveal effect. In Categories page, the main component is Categories, and it utilizes other custom components (BreadCrumb, CategoryModal, and ConfirmationModal) to structure and organize the page's content and functionality.
In this structure:
0.1
MyProfile is the main functional component.
0.2
The JSX returned by MyProfile defines the structure of the profile page, including a card layout, breadcrumb, header, and a form for editing the user's profile details.
0.3
The form includes various form controls for name, beforeName, afterName, email, profile picture, description, social media li nks, and resume upload.
0.4
The logic for handling form submissions, making server requests, and displaying notifications is also within the MyProfile component.
const handleMyprofile = (data) => {
const formData = new FormData();
for (let key in data) {
if (key !== 'thumbnail') {
formData.append(key, data[key]);
}
}
formData.append("thumbnail", data.thumbnail[0]);
fetch(${baseUrl}/myProfile, {
method: "PUT",
headers: {
authorization: bearer ${localStorage.getItem('access-token')}
},
body: formData
})
.then(res => res.json())
.then(data => {
if (data.acknowledged) {
toast.success('Profile Updated Successfully!');
}
})
}In this structure:
0.1
MyProject is the main functional component.
0.2
The JSX returned by MyProject defines the structure of the project management page, including a card layout, breadcrumb, header, and a table for displaying project categories.
0.3
The logic for handling state, data fetc hing, and modals (MyProjectModal and ConfirmationModal) is within the MyProject component.
0.4
Modals are conditionally rendered based on the state (close and cat).
const [close, setClose] = useState(null);
const [cat, setCat] = useState('');
const { data: categories = [], isLoading, refetch } = useQuery({
queryKey: ['categories'],
queryFn: async () => {
const res = await fetch(${baseUrl}/myCategory);
const data = res.json();
return data;
}
});
const handleDelete = (id) => {
fetch(${baseUrl}/myCategory/delete/${id}, {
method: "DELETE",
headers: {
authorization: bearer ${localStorage.getItem('access-token')}
}
})
.then(res => res.json())
.then(result => {
if (result.acknowledged) {
setClose(null);
refetch();
toast.success("Item Deleted Successfully!")
}
})
}03/09
Final Takeaways:
Building and improving the site with React and Vite.js has been smooth, despite a slight learning curve. React.js has been a great choice because of its wide adoption. As my portfolio grows and I test it with users while adding new projects, the ability to update a single component and see the changes site-wide is extremely helpful. It saves time by simplifying updates across the site.
04/09
Final Design:
