Build 2 Gamified Portfolio Websites with JavaScript and React
Support me on Patreon : / jslegend
How to deploy on GitHub pages using Vite : https://jslegenddev.substack.com/p/ho...
1) Relevant links for the first portfolio website:
Substack post explaining how to implement mobile controls : https://jslegenddev.substack.com/p/ho...
Live demo : https://jslegenddev.github.io/portfolio/
Source code : https://github.com/JSLegendDev/2d-por...
Map files (map.json + map.png) be found here : https://github.com/JSLegendDev/2d-por...
Spritesheet can be downloaded here : https://github.com/JSLegendDev/2d-por... (I use a modified version of the original spritesheet available at https://momen-games.itch.io/happy-la-...)
Font can be downloaded here : https://datagoblin.itch.io/monogram
Tiled software can be downloaded here : https://mapeditor.org
2) Relevant links for the second portfolio website :
Live demo : https://jslegenddev.github.io/new-2d-...
Source code on GitHub : https://github.com/JSLegendDev/new-2d...
Assets are included in the repo.
The book of shaders : https://thebookofshaders.com/
~ Credits ~
Player character asset is a slightly modified version of the asset hosted here : https://gibbongl.itch.io/8-directiona...
~ CHAPTERS ~
0:00 Intro
1:41 Intro for the first portfolio website
5:03 Setup
18:08 Loading Assets
21:04 How to use Tiled to draw maps
37:51 Writing logic to display map
46:30 Creating the player
53:41 Writing logic to display boundaries
59:35 Writing logic to display dialogue
1:17:56 Spawning the player + player movement logic
1:28:01 Writing logic for scaling the camera + animations + dialogue text
1:39:09 Intro for the second portfolio website + Setup
1:53:14 Finishing setup
2:07:28 Loading sprites
2:12:56 Making the tiled pattern shader
2:39:36 Creating our player
2:47:45 Implementing camera zoom, player animations and controls
3:15:10 State management setup with Jotai
3:27:48 Building the zoom UI
3:43:03 Building the social modal component
3:54:49 Building the email modal and project modal components
4:03:31 Building the section game object component
4:20:51 Resolving the duplicate font loading issue
4:22:36 Building icons game object components
4:42:32 Building the about section
4:57:59 Implementing logic for controlling opacity of components
5:03:30 Fixing opacity issue
5:11:23 Implementing the skills section
5:18:06 Implementing the experience section
5:26:32 Implementing the project section and finishing the portfolio