A portfolio webapp

Table of Contents

• Introduction 👋
• Development documentation 📚
  • Increment 1 🎂
  • Increment 2 🧋
  • Increment 2.1 🎁
  • Increment 2.2 🍜
• Technology Stack 🛠️
• Structure ⚓
• Sharing 💗
• Future increments 🚀
• Prerequisites 🍪
• Setup And Deployment 🔧
• Terms and License 🔖
• Usage 🏗
  • Available Scripts
    • npm start
    • npm test
    • npm run build
    • npm run eject

Introduction 👋

A personal static website application hosted with Firebase, built with React to showcase my portfolio and recent projects.

Development documentation 📚

Increment 1 🎂

First increment in enhancing forked project as my portfolio website.

1. Added 'Contact me' page with center-align contact form, react component: semantic-ui-react for form elements and EmailJS sends contents of form via email
2. Included 'Career' and 'Education' sections from Xun Ding forked project
3. Modified hero media to include background 4-seconds loop video, react component: React-player
4. Added attribution in footer: Thanks to Hashir Shoaeb for the original project, and Xun Ding for the modified project.
5. Added Readme.md with video demo and proper structure

Increment 2 🧋

Added 'Final year project' section and implemented profile photo with responsive functionality.

1. Added Final year project section with video demo, react component: React-player
2. Modified profile photo with responsive functionality
3. Multimedia elements have shadow and is interactive when mouse hover
4. Updated navigation bar with sections left aligned and pages right aligned
5. Added scroll to top element on home and contact page, react component: react-scroll-to-top
6. Added contact form button in "Get in touch section"

Increment 2.1 🎁

1. Cleaned up implementation of contact form
2. Added 'About' section to 'Contact' page to fix white space issue
3. Added SlideUpWhenVisible animation to all sections in 'Home' and 'Contact' page
4. Moved 'Get in touch' section from footer to 'Home' page
5. Changed profile photo
6. Removed unnecessary images from forked project

Increment 2.2 🍜

1. Implemented improved video player for 'Final year project' section using native HTML <video /> element.
   1. Video do not preload to improve web page loading time.
   2. Added wrapper using SCSS to prevent content jumping during transition between image of video poster and actual video.
2. Changed 'Resume' icon to a more intuitive design indicating PDF format, based on usability studies.

Additional documentation can be found in ReadmeDocs.

Technology Stack 🛠️

Dependencies defined in package.json:

• React
• Bootstrap
• Emailjs
• React-player
• react-intersection-observer
• Axios
• Semantic UI React
• Chakra-ui
• sweetalert2
• react-scroll-to-top
• Typist
• Font Awesome
• Firebase
• JetBrains WebStorm

Structure ⚓

• Navigation bar (optional)
• Body
  • Name | Profession
  • LinkedIn / GitHub
  • Resume | About me
• About Me
  • Display picture
  • About myself
  • Resume button
• Recent Projects (using GitHub API)
• Career
• Education
• My published works
• Contact me
• Footer
  • Footer Note
  • Copyrights - open source
  • Acknowledgements

Sharing 💗

Project is open source. Feel free to make your own version. All you need to do is to fork this repository, edit /src/editable-stuff/config.js and add resume. Mark star ⭐ if you like the project.

This portfolio webapp calvin.sg is a fork of the works of Hashir Shoaib and Xun Ding.

Future increments 🚀

1. Add Form validation for contact form, i.e. not empty fields and valid email address
2. Implementation of video player react component instead of native HTML <video /> element, without preload to reduce web page loading time

Prerequisites 🍪

You should have Node.js and Git installed on your PC. You should also own a GitHub account.

Setup And Deployment 🔧

1. To Get Started, Fork this repository to your GitHub account:

2. Clone the forked repo from your account using:

     git clone https://github.com/<your-username>/portfolio.git

3. Open in editor and edit /src/editable-stuff/config.js file.

4. Add your resume as <resume.pdf> in place of /src/assets/resume.pdf

5. Edit title and meta description in public/index.html.

6. Change URL in package.json file:

    "homepage": "https://<your-username>.github.io/portfolio"

   Or for deployment at custom domain, refer create-react-app.dev

7. After editing run the following bash commands:

   npm install
   npm start

8. To deploy website, run:

    npm run build
    npm run deploy

   Or for deployment at <username>.github.io, refer READMEdocs/custom-deployment.md.

9. Congrats your site is up and running. To see it live, visit:

     https://<your-username>.github.io/portfolio
   

10. To change the thumbnail image:

    • Navigate to the "public" folder.
    • There you will see "favicon.ico".
    • Delete it.
    • Take a screenshot of your version and rename it "favicon.ico" and place it there.

Next time if you make changes, repeat from step 8.

Terms and License

• LGPL-3.0 license. 2022. Calvin. See LICENSE for more information.

Usage

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm install

To install the dependencies package.

npm start

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

The page will reload if you make edits.
You will 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.