Support me on Patreon : patreon.com/c/jslegend
How to deploy on GitHub pages using Vite : jslegenddev.substack.com/p/how-to-deploy-a-vite-js-game-project
1) Relevant links for the first portfolio website:
- Substack post explaining how to implement mobile controls : jslegenddev.substack.com/p/how-to-implement-player-controls
- Live demo : jslegenddev.github.io/portfolio/
- Source code : github.com/JSLegendDev/2d-portfolio-kaboom
- Map files (map.json + map.png) be found here : github.com/JSLegendDev/2d-portfolio-kaboom/tree/master/public
- Spritesheet can be downloaded here : github.com/JSLegendDev/2d-portfolio-kaboom/blob/master/public/spritesheet.png (I use a modified version of the original spritesheet available at momen-games.itch.io/happy-la-v2-ts)
- Font can be downloaded here : datagoblin.itch.io/monogram
- Tiled software can be downloaded here : mapeditor.org
2) Relevant links for the second portfolio website :
- Live demo : jslegenddev.github.io/new-2d-portfolio/
- Source code on GitHub : github.com/JSLegendDev/new-2d-portfolio
Assets are included in the repo.
- The book of shaders : thebookofshaders.com/
~ Credits ~
Player character asset is a slightly modified version of the asset hosted here : gibbongl.itch.io/8-directional-gameboy-character-template
~ 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