DEV Community

loading...
Cover image for I built this cool GitHub UI based DEV Portfolio

I built this cool GitHub UI based DEV Portfolio

hima_khaitan profile image Himanshu ・2 min read

The Design Idea

Spitting the truth, I really came across 1000s of dev portfolio πŸ’» websites among which some inspired πŸ€“ too but that inspiration and design faded until I saw this amazing πŸ’― VS-Code Themed Portfolio Website.

The designs I came across before this, only confused me and made me hop on one to another but this react app gave me the idea for My Dev Portfolio.

I really was excited to built this when I first got this idea. And on the future part I am yet excited to flood it with cool features and functionality.

GitHub Themed Dev Portfolio

If you're interested in exploring the project yourself, there's the link to it πŸ‘‰πŸ» github-portfolio.vercel.app/

GitHub Themed Dev Portfolio

A GitHub themed developer portfolio website built with React.js and deployed on Vercel.

Dev Portfolio


Feature Roadmap

  • Themes and customizations
    • Default Light
    • Dark Dimmed
    • Default Dark (default)
  • Interactive custom pages and tabs

For other features and themes suggestions, please open an issue.


Running the Project

In the project directory, you can run:

npm start

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.

npm run build

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!


Editing the Code

All Github related components can be found in the Components folder. To change the…

This is a React Application which will of course have a backend in future and will lately be converted into a MERN Stack Project. πŸ‘©β€πŸ’»

From Layout to Experience I have been working on to make this look and feel like the GitHub. I will be adding cool stuffs to it like themes, timeline and many more.

I Need A Help

As you can see that some of the pages have dummy content in it and also the application is not at all responsive at the stage when it comes to Mobile viewing.

What other features would you like to see in this project? I would highly appreciate if you leave a feedback, criticism or suggestion of any kind. πŸ™ŒπŸ»

You can always fork this repo and the project is yet not complete. You can give a new accent to the project by applying your ideas onto it. 🀝🏻

I hope you find it interesting to contribute as the project is truly Open-Source. You may star this repo for future references.

Happily turning coffee into code βœ…

Discussion (16)

Collapse
nefomemes profile image
Nefomemes

I've opened an issue. Check it here

Collapse
hima_khaitan profile image
Himanshu Author

Thanks You noticed it! πŸ’― I will be working on the same πŸ‘

Collapse
jcubic profile image
Jakub T. Jankiewicz • Edited

You should try to optimize the images. The bigger one weighs 2.6MB, on my internet in Poland it takes about 30 seconds to load. The smaller one have 800px but displays with about 300px you can resize and compress and make it less than 100kB maybe even less then 60kB

Collapse
hima_khaitan profile image
Himanshu Author

Thanks for this review. I will surely do this..!

Collapse
ivanjeremic profile image
Ivan Jeremic

Why not use Next.js ?

Collapse
hima_khaitan profile image
Himanshu Author

I am currently learning Next.js Once I get hands-on, I will definitely try it.

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited

Yep because setting up MERN seems too overkill fo me here also you need to think about how would you solve SEO and so on...Next is really a framework that gives you almost everything.

Thread Thread
hima_khaitan profile image
Himanshu Author

Will definitely Do it with NEXT.js once I get familiar with it

Collapse
lowcodecharts profile image
MyCharts

Looks nice. Thanks for sharing

Collapse
hima_khaitan profile image
Collapse
mkubdev profile image
Kubdev

This is nice! Good job well done :)

Collapse
hima_khaitan profile image
Himanshu Author

Thanku So Much!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
hima_khaitan profile image
Himanshu Author

Didn't get you...?πŸ˜…

Collapse
danielhemp profile image
Daniel Hemphill

Looks great on desktop, but might want to test on mobile. lots of stuff is overlapping. Love the idea though.

Collapse
hima_khaitan profile image
Himanshu Author

Thank you so Much! I will really be working on desktop version soon!

Forem Open with the Forem app