Hi fellas π
In this article, we will create a stunning bento-like portfolio like this and deploy it to GitHub Pages so that you can share it with the world.
So, are you ready to create yours?
1οΈβ£.. 2οΈβ£.. 3οΈβ£.. Let's go π
Grab your laptop, open up your IDE and start crafting π
Here is my bento π
It's built using React, Typescript, framer-motion and tailwind CSS.
Here is the original reveal bento grid code by @tomisloading
I got inspiration from the component, customized it, and deployed it to GitHub Pages.
Create your bento πͺ
Here's how you can create such bento in 4 easy steps:
Step 1οΈβ£
- Clone this repository.
Step 2οΈβ£
- Run
npm install
to install all the required packages.
Step 3οΈβ£
- Edit the
src/data/profile.json
file to personalize the bento to your needs.
Step 4οΈβ£
- Run
npm start
and see it in action.
Deploy it to Github Pages π
We can use the gh-pages
package to deploy the bento.
Here is a step-by-step guide for deployment:
-
Create Repository πͺ½
- For a user page: Create a repository named
username.github.io
. - For a project page: Create a repository named
username.github.io/project
.
- For a user page: Create a repository named
-
Add React App Code β
- Follow the guide above to create your bento, then add the code to your repository.
-
Edit the
homepage
Key inpackage.json
βοΈ- Add the
homepage
key:
"homepage": "https://username.github.io/"
or
"homepage": "https://username.github.io/bento"
- Add the
-
Change Remote Repository π»
- Link your local repository to the GitHub repository:
git remote add origin https://github.com/username/repository-name.git
-
Push React App β¬οΈ
- Build and deploy the app:
npm run build npm run deploy
-
Configure GitHub Pages βοΈ
- Go to the repository settings on GitHub.
- Under the "GitHub Pages" section, set the source to the
gh-pages
branch.
This will deploy your Bento to GitHub Pages.
Thatβs a wrap! Youβve now built and deployed a custom bento portfolio to GitHub Pages β great job! π₯π₯
Don't forget to share your bento portfolio in the comments below and on social media β itβs a great way to get noticed! π
Top comments (5)
This is great work
I would make one! That's awesome ππ
Yup, create yours
Awesome and unique portfolio idea. Waiting to see more updates. Initial update is very nice.
Glad you liked it