Update for an alternative displaying style
Portfolio.js and PastPortfolio.js provide one way for you to display the data which you can check the demos at the buttom of the README.md, denoted as 'Style-1'.
NewPortfolio.js and NewPastPortfolio.js provide the other way for displaying which you can check 'Style-2' at Demo section.
How to switch styles?
Open App.js and comment or uncomment these two components.
How to use?
- git clone.
npm start. Local server runs on Port 3000
src/webData.jsprovides some API which can be loaded into pages. Not all data are included in it. TBD someday MAYBE.
npm run build.
- You can see some in the console.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve serve -s build
You can see the web app generated then.
3. If everything goes right, you can deploy it on a server with Nginx or Apache.
Before step 4, make sure that you have some knowledge of Nginx.
4. Take Nginx as an example. Create a configuration file. Here gives a example configuration file. You can configure more function such as load balance for the web app.
- Run this .conf then you can visit.
nginx -c /etc/nginx/vhost/example.conf # We always make a vhost directory in nginx to store our .conf.
If you want to stop it, first check the parent PID.
ps aux|grep nginx
Then stop it.
kill -QUIT [PPID]
Compress your images
Large images will reduce loading speed.
IPad and Ipad Pro
- The project remove _openClick from magnific-popup.js. If you want to use popup when you click the portfolio project, please undo the comment of _openClick function and use href='modal-xx' (Eg. href='modal-01') href in Portfolio and PastPortfolio. Also, the magnific-popup.js is not compressed, which means affects a little bit loading performance.
- You may see that 'Words' section is hidden in mobile device due to bad compatibility. You can show that by edit index.css file.