Showcasing creativity and skills

Projects Showcase

Orangevideos

Developed a static website for the Futuready client project using React.js, with additional technologies including SCSS, Bootstrap and Framer Motion for smooth animations. Node.js was utilized for backend functionalities, and the project is hosted on a VPS for optimal performance and control.

Technologies used

React.js JavaScript Framer Motion SCSS VPS Node JSNginx
Visit site

FileStream: A Feature-Rich File Management Application

This React.js application showcases my skills in front-end development, user interface design, and database integration. FileStream leverages Supabase for a robust backend and Firebase for secure hosting, providing a seamless user experience.

Technologies used

React.js JavaScript Framer Motion SCSS Firebase Supabase

Key Features

  • Streamlined Authentication: Effortlessly sign in using Google or Github credentials, simplifying the user journey
  • Organized File Management: Categorize your files with ease using dedicated folders for Images, Videos, Audio, and Documents
  • Intuitive File Operations: Manage your files with confidence. Rename, add, remove, label, download, and even preview files directly within the application
  • Personalized Account Management: Update your profile picture and manage account details
  • Customizable Themes: Tailor the FileStream interface to your preferences by selecting a theme that suits your style

GameList Application

The GameList application allows users to browse game information and add games to a list for later play if they find them enjoyable.

Technologies used

React.js JavaScript Framer Motion Material UI Firebase RAWG API

Key Features

  • The application utilizes Context API to manage Google authentication and application state.
  • Users can browse game details, but to add games to their list, they must sign in using Google.
  • Game information is sourced from the RAWG API.
  • The user interface is built using React Material UI.
  • Responsiveness is achieved using the Material UI grid component.
  • The search box can be displayed by pressing the keyboard shortcut Ctrl + /.
  • Clicking the image icon opens a pop-up view of the game screenshot.
  • Animation is implemented using the Framer Motion library.
  • The "Add To List" button adds the game ID to Firestore, while the "Remove From List" option deletes it.
  • The list page displays the stored games.