In this project, I aimed to build a modern and responsive portfolio with React and focused on a "Component-based" architecture.
To showcase my past projects, I used a sleek and dynamic gallery component, provided by React Bits and powered with the GSAP animation library.
https://react-portfolio-2h31.onrender.com/
To run this project locally:
- Clone the repo:
git clone https://github.com/LynaSim/REACT_portfolio.git
- Install dependencies:
npm install
- Launch the development server:
npm run dev
-
Framework: React (Vite)
-
Routing: React Router (https://reactrouter.com/home)
-
UI and Styling: React-Bootstrap (https://react-bootstrap.netlify.app/)&
-
Styling: Vanilla Bootstrap (https://getbootstrap.com/)
-
Masonry Component and animations: GSAP (GreenSock) & React Bits (https://reactbits.dev/)
-
Icons: React Icons (https://react-icons.github.io/react-icons/)
-
Other UI Element: Hamburger React (https://hamburger-react.netlify.app/)
-
Font: Shrikhand (Google Fonts)
-
Dynamic Masonry Gallery: A fluid, animated grid that showcases projects using GSAP animation library.
-
Detailed Project Modals: Clicking a gallery item opens a full-screen modal. Each modal showcases for each project:
- a carousel with screenshots
- a description
- links to GitHub repo and live demos.
-
Single Page Application (SPA): Smooth page transition thanks to React Router.
The combination of bold colours for the background and Shrikhand Font was inspired by the design of vanilla-extract (https://vanilla-extract.style/).
Lyna Sim
MIT