Portfolio App

Description

This repository contains my portfolio developed using React and React Bootstrap. It displays information about my projects, project cases, information about me, and ways to get in touch.

Features

1. Displays the following information in separate views:

• About me (details about me background)
• Projects (details about my current/previous projects)
• Project cases (information on how a specific project was developed/designed)
• Testimonials (reviews about me from colleagues/students)
• Contact (contact information)
• Resumes (ability to download my resumes in several languages)
• Policies (cookie and privacy policies information)

2. The app has the following features:

• It is designed according to responsive recommendations. That means that whatever device a visitor uses to navigate to the app, it is always easy to use
• The app employs media queries to better accommodate the various needs of the users. This also means that when a user prefers to reduce the motion on their machine, the app turns off animations.
• The app shows various information in separate views, providing links, video files, and images necessary to know more about a specific project, reviewer, contact data, etc.
• It is localized to several languages. That means that when a user wants to view the app in a different language, they can click on the language switcher, and their preference gets stored.
• The app also has a theme switcher. The visitor can switch between a light and dark theme and this setting is also saved.
• The portfolio was turned into a Progressive web app making it possible to install it on a mobile/desktop device.
• The app now has better accessibility due to improved styling and more descriptive tags.
• The app also displays the latest updates in a custom modal window. The user can click to minimize it.
• It shows user-friendly confirmation modal windows upon switching the theme and uses simple sound effects when the users click on specific interfaces.
• If the app hasn't loaded yet, it shows a loading animation to make it more intuitive and user-friendly.

3. When installed like a Progressive Web App, it allows to:

• Resemble a native-app experience.
• Have an improved user experience
• Experience cross-platform compatibility
• Make use of faster loading times
• Use offline accessibility
• Have a smaller size than a native desktop app
• Access the app quickly via a mobile home screen, a Windows/Mac taskbar, etc

Read more about the Progressive Web Apps here

Technologies Used

• React
• React Bootstrap
• Responsive design
• jQuery
• Progressive Web Apps (PWA)
• Service worker
• Accessibility
• React FontAwesome
• i18n

Project Screenshot

Project Dependencies

• Node.js
• React.js as a framework
• React Bootstrap for design
• jQuery for interactivity/accessing the DOM
• Github pages for deployment
• Service worker for PWA functionality
• React FontAwesome for icons
• i18nnext, react-i18nnext for localization
• use-sound for sound effects

Live Version

The App is live here

Clone and Preview

To clone the app use the following command: console git clone [email protected]:yevheniiairapetian/portfolio Or download directly by clicking on <> Code button > Download ZIP. Make sure you have Node installed on your machine. To check if you have Node installed, run the node -v command in the terminal. If Node is not installed, use the preferred package manager:

• For npm on Windows, run the npm install nodejs command
• For Mac, run the brew install node command
• For Linux Debian/Ubuntu-based systems run the sudo apt-get install nodejs command
• For Red Hat/Fedora-based systems run the sudo yum install nodejs command

2. Then get back to the project folder and use the cd portfolio terminal command. Then run the npm i command (or similar, depending on the package manager) to install the project dependencies
3. After that, follow the scripts in the section below.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can't go back!

If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

Contact:

Feel free to contact me via LinkedIn or
email or via the contact information on my portfolio