This repository contains a personal CV website built using Vite, React, and Ant Design, deployed on GitHub Pages.
MyCV is a clean and responsive personal CV built with modern web technologies. The goal of this project is to provide a straightforward, well-designed CV that highlights my technical abilities while ensuring smooth and interactive user experience.
This project uses:
- React for component-based UI development.
- Vite as a fast build tool optimized for modern JavaScript development.
- Ant Design for pre-built UI components, ensuring a polished and consistent look.
- Sass for styling, allowing better control over CSS.
- React-Icons for easily accessible icons to enhance the visual appeal.
- Parallax.js for adding simple parallax effects, creating engaging user interactions.
You can view the live demo of the project here:
🔗 Live Demo
Deployed on GitHub Pages on 15th September 2024. The deployment process uses Vite’s vite build command to generate optimized static assets, which are then hosted on GitHub Pages.
To get this project up and running:
- Download the zip file -
MyCV-master. - Click 'Extract Here' to unzip the folder.
- Open the folder in Visual Studio Code.
- Open a new terminal in VSCode.
- Run
'npm i'to downloadnode_modules. Wait for the installation to complete. - Run either
'npm run preview'(for production) or'npm start'(for development), and check the terminal for the local port, for examplehttp://127.0.0.1:4173/portfolio/orhttp://127.0.0.1:5174/portfolio/.
Once you see the local port running, open it in your browser to view the project.
To run this project locally, ensure that Node.js is installed. My current project uses:
- Node.js version:
18.16.1 - Vite version:
4.2.0
You can check and install Node.js from here.
- @ramonak/react-progress-bar: For progress bar components.
- Ant Design: Component library for fast and efficient UI development.
- Devicon: For technology stack icons.
- Parallax.js: Adds a smooth parallax effect to enhance user experience.
- React & ReactDOM: Core libraries for building the front-end.
- React Icons: Used to display a range of icons.
- Sass: Used to write cleaner and more modular CSS.
- TypeScript: For static typing.
- Vite: Development environment and build tool.
- @types: TypeScript type definitions.
- Fully Responsive: Works across all screen sizes.
- Interactive Design: Smooth animations and parallax effects for better user engagement.
- Customizable: Easily adaptable to include new sections or components.
- Fast Load Times: Thanks to Vite’s optimized build process.
Here are the desktop views of the project:
Here are the mobile views of the project:
