- Introduction π
- Development documentation π
- Technology Stack π οΈ
- Structure β
- Sharing π
- Future increments π
- Prerequisites πͺ
- Setup And Deployment π§
- Terms and License π
- Usage π
A personal static website application hosted with Firebase, built with React to showcase my portfolio and recent projects.
First increment in enhancing forked project as my portfolio website.
- 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
- Included 'Career' and 'Education' sections from Xun Ding forked project
- Modified hero media to include background 4-seconds loop video, react component: React-player
- Added attribution in footer: Thanks to Hashir Shoaeb for the original project, and Xun Ding for the modified project.
- Added Readme.md with video demo and proper structure
Added 'Final year project' section and implemented profile photo with responsive functionality.
- Added Final year project section with video demo, react component: React-player
- Modified profile photo with responsive functionality
- Multimedia elements have shadow and is interactive when mouse hover
- Updated navigation bar with sections left aligned and pages right aligned
- Added scroll to top element on home and contact page, react component: react-scroll-to-top
- Added contact form button in "Get in touch section"
- Cleaned up implementation of contact form
- Added 'About' section to 'Contact' page to fix white space issue
- Added SlideUpWhenVisible animation to all sections in 'Home' and 'Contact' page
- Moved 'Get in touch' section from footer to 'Home' page
- Changed profile photo
- Removed unnecessary images from forked project
- Implemented improved video player for 'Final year project' section using native HTML
<video />
element.- Video do not preload to improve web page loading time.
- Added wrapper using SCSS to prevent content jumping during transition between image of video poster and actual video.
- Changed 'Resume' icon to a more intuitive design indicating PDF format, based on usability studies.
Additional documentation can be found in ReadmeDocs.
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
- 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
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.
- Add Form validation for contact form, i.e. not empty fields and valid email address
- Implementation of video player react component instead of native HTML
<video />
element, without preload to reduce web page loading time
You should have Node.js and Git installed on your PC. You should also own a GitHub account.
-
To Get Started, Fork this repository to your GitHub account:
-
Clone the forked repo from your account using:
git clone https://github.com/<your-username>/portfolio.git
-
Open in editor and edit /src/editable-stuff/config.js file.
-
Add your resume as <resume.pdf> in place of /src/assets/resume.pdf
-
Edit title and meta description in public/index.html.
-
Change URL in package.json file:
"homepage": "https://<your-username>.github.io/portfolio"
Or for deployment at custom domain, refer create-react-app.dev
-
After editing run the following bash commands:
npm install npm start
-
To deploy website, run:
npm run build npm run deploy
Or for deployment at <username>.github.io, refer READMEdocs/custom-deployment.md.
-
Congrats your site is up and running. To see it live, visit:
https://<your-username>.github.io/portfolio
-
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.
LGPL-3.0
license. 2022. Calvin. See LICENSE for more information.
This project was bootstrapped with Create React App.
In the project directory, you can run:
To install the dependencies package.
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.
Launches the test runner in the interactive watch mode.
See the section about running tests for more
information.
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.
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.