Welcome to the documentation for my portfolio website. This application showcases my projects and skills as a software engineer. Built using modern technologies, this portfolio demonstrates my proficiency in React, Vite, and TypeScript. The purpose of this documentation is to provide an overview of the project structure, features, and guidelines for running and contributing to the application.
To run this portfolio website locally, you will need:
To install the application, follow these steps:
-
Clone the Repository:
git clone https://github.com/kweeuree/portfolio-react.git
-
Navigate to the Project Directory:
cd portfolio-react -
Install Dependencies:
npm install
To start the development server, execute the following command:
npm run devOnce the server is running, open your browser and navigate to http://localhost:3000 to view the application.
The project follows a structured approach to ensure maintainability and scalability. Below is an overview of the key directories and files:
src/
├── components/ # Reusable React components used throughout the app
├── data/ # Static data files used across the application
├── pages/ # Page components, such as MainPage, wrapped in MUI Grid
├── sections/ # Components that represent sections of the page
├── types/ # TypeScript type declarations
├── utils/ # Utility functions, such as helpers for Cloudinary uploads, emailjs integrations, or other reusable logic
tests/ # Directory containing Vitest unit tests, located outside of src to keep test code separate from production code
-
Type Safety with TypeScript: Ensures code reliability and prevents runtime errors by implementing strict type checking throughout the application.
-
Responsive Design with MUI and Custom Styling: Utilizes Material-UI (MUI) Grid components and custom styling through the Layout component to create a consistent, responsive user interface across all devices.
-
Three.js Animations with React-Three-Fiber: Integrates dynamic particle effects through Three.js, rendered on a canvas within the
Layoutcomponent for an engaging visual experience. Future enhancements will include additional Three.js animations optimized for performance. -
Optimized Media with Cloudinary: Images and videos are hosted on Cloudinary to reduce load times and ensure efficient media delivery, providing an improved user experience.
-
Single-Page Navigation with React Router: Implements React Router to manage seamless navigation, with a blog tab planned for future enhancement to expand website content.
-
Unit Testing with Vitest: Utilizes Vitest for testing components, ensuring code quality and reliability through a suite of unit tests.
-
Progressive Web App (PWA) Setup: Configured with
vite-plugin-pwafor offline support and installable capabilities, offering users a better mobile experience.
-
Blog Tab: A planned feature that will allow users to navigate to a dedicated blog section.
-
Advanced Three.js Animations: uture optimization techniques will be researched and implemented to enhance Three.js animations further.
The application employs the Layout component to maintain a consistent styling framework across all pages. This component integrates Three.js for particle animations, enriching the visual experience. Each section of the MainPage is organized using MUI Grid to facilitate responsive layouts.
The application uses Vitest for testing. To run the test suite, run:
npm run testThe portfolio website is deployed using a reliable and efficient setup to ensure optimal performance:
-
Netlify for Hosting: The application is hosted on Netlify, which provides fast and secure hosting, automatic deployments, and continuous integration. Netlify is integrated with GitHub to automatically deploy any updates pushed to the repository, streamlining the deployment process and ensuring that changes are quickly reflected online.
-
Media Hosting on Cloudinary: Images and videos are hosted on Cloudinary, a media management platform optimized for fast delivery. This helps reduce the app's load time and enhances user experience by offloading media assets from the main hosting platform.
This deployment strategy combines Netlify's simplicity with Cloudinary’s efficient media delivery, creating a performant and user-friendly application.
To ensure the app is as lightweight and responsive as possible, several optimizations have been implemented:
-
SVG Icons for Optimization: Originally, the app used icons from the React Icons and MUI Icons libraries, which increased the bundle size. To improve performance, I replaced these with custom SVG elements, which are significantly lighter and contribute to faster load times.
-
Native HTML Elements: Where possible, I opted for native HTML elements instead of Material UI components. This decision helped reduce dependency on MUI to only essential cases, minimizing bundle size and enhancing overall loading performance.
This combination of optimized hosting, media delivery, and careful component selection ensures a smooth user experience and responsive application performance.
Future updates will include additional features such as a blog section and optimizations for Three.js animations. These enhancements aim to provide users with a richer experience while showcasing my ongoing learning and development.
- @emailjs/browser: For email sending functionalities.
- @emotion/react and @emotion/styled: For styling components.
- @mui/material: For Material UI components.
- @react-three/drei, @react-three/fiber, and @react-three/postprocessing: For Three.js integration.
- react-router-dom: For client-side routing.
- vite-plugin-pwa: For Progressive Web App features.
Thank you for reviewing the documentation for my portfolio website. This documentation will be updated regularly as new features are added and improvements are made. If you have any questions or need further assistance, feel free to reach out.