Devcover - Easiest way to generate a developer portfolio

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Building a developer portfolio can be a difficult task, we have to think of a good design, show our best projects, our last posts blogs, talk about ourselves, offer contact details and then write the code, but as least in my case, this was very complicated to do because I didn't have enough time to dedicate it or I simply had other side projects that I was working on, leaving aside the creation of my portfolio. That is why I decided to create a tool that does all this for you with just your Github or Hashnode username.

Github Repository / Demo

Inspiration

I was thinking about how I could help the developer community, so the first thing I did was explore my experience as a developer and make a list of projects that could save me time. One of the items on the list was my portfolio, It was there when I realized that as developers we have what it takes to build a portfolio with just our username since we have enough information on platforms like Github, Hashnode and Devto to show our projects, talk about us, show our latest blogs and offer contact details. But I had a problem, how do I get developers to publish their portfolios in their own domains? One word Vercel

Video Demo

Features

Creating your portfolio with Devcover, you are going to get:

  • Good designed and customizable portfolio
  • Google Analytics support to track user events
  • SEO friendly implemented with your data
  • Mobile friendly portfolio
  • High performance portfolio
  • Your latest Hashnode and Devto blogs sorted by reactions count and publish date
  • Your best Github projects sorted by stars count and forks count
  • About section from your Github README.md
  • Possibility of placing your email so that they contact you
  • Availability to be hired
  • And much more...

Next features

  • Edit About section (Markdown style)
  • Edit and add new social networks to contact
  • Edit limit of blogs/projects to show
  • Sort manually blogs/projects
  • Light mode
  • Set default theme dark/light
  • Time to re-fetch data ex: every day at 24hrs

Design Process

I like to have a clear design of what I'm going to do before starting to write code that is why I started with a simple low-fidelity design on Invision

Home Design: dev-cover(1).png

Portfolio Design: Click to see it

After that, I made a high-fidelity design on AdobeXD

Home Page: Dev Cover - Generator.png

Portfolio Design: Click to see it

Challenges

I had many challenges throughout the development process, such as avoiding the appearance of repeated blogs if the user has the same blogs published in Hashnode and Devto, allowing the user to publish their customized portfolio, among others, in the following table I detail which they were some of them and how I solved them:

ChallengeSolution
Repeated blogsUsed a library called string-similarity to detect the percentage of similarity between Hashnode and Devto posted blogs
Clean Github readme.mdCreated a custom function to format Github user Readme.md data
Organized data from multiple sourcesUsed lodash library functions to order blogs, projects, unified data and make validations
Save user dataImplemented a small API to save user preferences in a MongoDB database thanks to Next.js API Routes and Vercel Serverless functions
Generator mode and Portfolio mode in the same projectLocal environment variables and validations to detect mode in use
Styled Components theme and preferences dynamic changesI used React Context API to save customizer, UI, and User data when the application is in generator mode
Page faviconIf the user has a favicon configured on his Hashnode blog the application fetches it using icons.duckduckgo API, otherwise a favicon is created with his name initials using dicebear API and his primary colour preferred

How I create it

The first thing I did was analyze all the APIs that I was going to use, Hashnode, Github and Devto to verify if it had the minimum user data to build a portfolio.

Then I chose tech stack to build the project, I decided to use Next.js because I really like it and it's an excellent framework to build a React application for production, I used styled-components for application styles, Apollo Client for Hashnode API communication, react-iconly for Icons and other libraries that helped me a lot like that react-markdown to render Github user readme.md

If you want to know more about project implementations and how works it here the repository:

Devcover Repository

Is open to receive contributions ๐Ÿ™‹โ€โ™‚๏ธ

Usage Process

Create your portfolio with Devcover is quite straightforward. In just a few clicks you can deploy your own portfolio.

1 . First we have to open Devcover website and write our Hasnode or Github username, press Enter or the submit button and wait while generating your portfolio it takes not much than 1-2 minutes

image.png

2 . If you want to customize your portfolio you can open the customizer and change your name, email, your preferred colour, your page title even you can set your Google Analytics code to see users behaviour on your portfolio, I created a set of events to track as that social network link clicked, scroll events, Show More button clicked and blog or project clicked.

Screenshot_2021-02-04 Junior Garciฬa Web Mobile Developer.png

3 . The when you are ready, just click on Deploy on Vercel button

Screenshot_2021-02-04 Junior Garciฬa Web Mobile Developer(1).png

4 . You will see a screen like this, write the name of your project that you prefer (I assumed that you already have a Vercel account, but if you don't you can create one here)

Screen Shot 2021-02-04 at 22.35.57.png

5 . Then choose your preferred Git provider to save your portfolio project, basically what this does is clone the Decover and save it into your Git provider as a new project.

Screen Shot 2021-02-04 at 22.43.22.png

6 . Choose a project name or leave the default name Screen Shot 2021-02-04 at 22.43.59.png

7 . Then you must put your username in the NEXT_PUBLIC_USERNAME value

Screen Shot 2021-02-04 at 22.45.39.png

and VOILA! you have your portfolio deployed on your own domain ๐Ÿฅณ๐Ÿฅณ

Screen Shot 2021-02-04 at 22.49.43.png

Deploy your own Portfolio on Vercel

If you want to customize your portfolio colours, name, bio a put your Google Analytics code, I suggest you create your portfolio from Devcover website.

If you prefer to go faster and accept the default parameters you can click on the following button and the only thing you have to do is put your Github or Hashnode username in the NEXT_PUBLIC_USERNAME.

Deploy with Vercel

Feel free to ask in the comments or mentions me on my Twitter.

I hope this helps you and I would like to see your portfolio results! ๐Ÿ‘‹

Andrew Baisden's photo

So cool well done many will find this helpful.

Divine Philip's photo

amazing!!!

Samet ร‡ELฤฐKBIร‡AK's photo

Great job Junior Garcia ๐Ÿ‘, it's so helpful for newbies.

lary mak's photo

Nice work Junior Garcia, this is such an inspiration for us, the other developers. ๐Ÿ‘๐Ÿ‘

Junior Garcia's photo

Thank you so much lary mak ๐Ÿ™‹โ€โ™‚๏ธ

Deepak Kumar's photo

This is one of the best side project, I have seen so far. Keep building man.

Sruthi's photo

This one is so amazing. The thought process is so unique. Keep going

Junior Garcia's photo

Thank you for having my back Sruthi

Catalin's Tech's photo

Wow! I am rarely impressed by side projects and new apps, but this one is extremely nice.

I gave it a go, and I love it! ๐Ÿคฉ๐Ÿ‘๐Ÿ”ฅ

Junior Garcia's photo

Thank you very much Catalin Pit, your words honour me ๐Ÿคฉ, your Devcover portfolio looks really good!

Sang Dang's photo

I start giggling when the app said "doing some magic", then it was a big WOW, OMG this is super nice tool! If you charge something below 10$ for selecting a theme, I'm definitely down for it!

Junior Garcia's photo

I'm glad you liked Sang Dang, yeah maybe for a second version with more features! why not? hahaha ๐Ÿš€

Hrithwik Bharadwaj's photo

This is sooo coool dude !

Best part is I can even customize it

Junior Garcia's photo

Thank you Hrithwik Bharadwaj, yeah I thought the people wanted to customize their portfolio so I added a Customizer ๐Ÿš€

Victoria Lo's photo

Wow such a creative project! :D I LOVE IT!

Rutik Wankhade's photo

๐Ÿ˜ Absolutely loved this project man! Not just the idea but the execution is perfect. The look and feel of UI are just awesome.

The favicon thing, option to choose a theme color and deploy it, wow! ๐Ÿ™Œ Kudos! You did a great job.

Junior Garcia's photo

Thank you very much Rutik Wankhade!, I did my best, I'm so glad you liked the project

Paul Ibeabuchi's photo

Dang! well thought and planned out. I could sense your personality just reading through this. Well done, amazing!

Junior Garcia's photo

Thanks a lot Paul Ibeabuchi, I'm glad you liked it! ๐Ÿš€๐Ÿš€

Alimam Miya's photo

Nice! It's amazing, luck my profile devcover.vercel.app/portfolio/alimammiya

Junior Garcia's photo

Thanks a lot Alimam Miya, your portfolio looks really good, remember that you can deploy it on your own domain by clicking the "Deploy on Vercel" button.

Alimam Miya's photo

Junior Garcia But the latest blog post links are not working. Kindly fix it...

Megha Pathak's photo

The is the greatest project I have seen so far ๐Ÿ˜ Totally loved it โœจ

Junior Garcia's photo

Thank you very much Megha Pathak, I'm glad you liked my project ๐Ÿš€๐Ÿš€๐Ÿš€

Yogesh Chavan's photo

Superbโค๏ธ. Loved the way it takes recent posts and projects from dev.to, GitHub, etc and displays in a nice format. Awesome work ๐Ÿ‘

Junior Garcia's photo

Thanks a lot! Yogesh Chavan ๐Ÿ™‹โ€โ™‚๏ธ๐Ÿ™‹โ€โ™‚๏ธ๐Ÿ™‹โ€โ™‚๏ธ

Roger Colque Calcina's photo

fantastic!! its better than my portfolio page ๐Ÿ˜…

Junior Garcia's photo

Thank you so much Roger Colque Calcina, just click on Deploy on Vercel button and replace your current portfolio ๐Ÿš€๐Ÿš€๐Ÿš€

HARDIK KAUSHIK's photo

Excellent work, I really appreciate this project. ๐Ÿฅฐ Thanks for helping the dev community.

Junior Garcia's photo

Thank you very much HARDIK KAUSHIK!

Joyancefa's photo

Amazing ๐ŸŽ‰

Murewa Ashiru's photo

This is absolutely fantastic!

Ana Vela's photo

This is such a creative and well-executed app. Wonderful work!

Junior Garcia's photo

Thank you very much for your comment! Ana Vela

Hetav Desai's photo

Brilliant idea and Flawless execution. Great work!!

Junior Garcia's photo

Thank you so much Hetav Desai!

Obayuwana Paul's photo

Wow....I love this..so amazing

Chris Bongers's photo

This is really cool!

What a great idea, and good execution ๐Ÿคฉ

Samba Ndiaye's photo

Very nice app, definitely down to help make it more awesome. I'll stop by Github and check out the code. Congrats.

Junior Garcia's photo

Thanks a lot Samba Ndiaye, any contribution welcome ๐Ÿ™‹โ€โ™‚๏ธ๐Ÿš€๐Ÿš€

Olubisi Idris Ayinde's photo

Thanks for sharing. This is awesome ๐ŸŽ‰

Junior Garcia's photo

You're welcome Olubisi Idris Ayinde ๐Ÿš€๐Ÿ™‹โ€โ™‚๏ธ

Anand Baraik's photo

Awesome project

Junior Garcia's photo

Thanks! ๐Ÿ™‹โ€โ™‚๏ธ

Mohammed Kabir Hussaini's photo

wow this is an awesome project, super amazing, you've inspired me to create a project similar although not for portfolio ๐ŸŽ‰, would you recommend direct editing of the project in order to add a skill section or something and there are some projects i wouldn't want to show on the site. great work!!

Junior Garcia's photo

Hi Mohammed Kabir Hussaini, thanks a lot! Yes, you could clone your generated portfolio from your GitHub and edit it.

Pro tip: If you don't want to show some projects on your site, just starred the projects that you want to show as these are sorted by "starts" and "forks"

Hope it helps!

Mohammed Kabir Hussaini's photo

Junior Garcia Cool, I'll do that, thanks a lot

Tapas Adhikary's photo

Excellent project. Just ๐Ÿ˜ฎ wow... Thanks for sharing.

Junior Garcia's photo

Thanks a lot Tapas Adhikary, you got a really good readme on Github!

Braydon Coyer's photo

Such a great idea and goodness, I was shocked when I saw the portfolio it generated for me! So cool!

Junior Garcia's photo

I'm so glad you liked it Braydon Coyer! ๐Ÿ™‹โ€โ™‚๏ธ

Josias Aurel's photo

I love it. It's fast and the output is cool. I love the final portfolio, well organised . Good work

Junior Garcia's photo

Thank you very much Josias Aurel!

Raksha Kannusami's photo

Wow! This is amazing!

Jesus Guerrero's photo

Wow that is both amazing and very useful project, congrats.

Suggestion, as it happens that the user may not have the same username in those platforms it would be cool to have an option like advanced or custom entry nicknames where you allow the user to put their username by platform.

Junior Garcia's photo

Hi Jesus Guerrero!,

Thank you very much and thank you for your suggestion, I will think of a way to implement that.

Currently if in your Hashnode account you have the Github URL that has priority over the username that is entered in the home input, so even though you have a username differs in Hashnode and GitHub the same user data is brought.

Favourite Jome's photo

Wow, the app is very good. I'm blown away by how it created a nice looking portfolio just from my username ๐Ÿคฏ.

I just had to create mine, lol : my-awesome-portfolio-one.vercel.app

Junior Garcia's photo

Thanks a lot Jome Favourite!

Your portfolio looks great! ๐Ÿ’ฏ

Savio Martin's photo

Bro, I just loved this app. Great work and You have made it awesome. Thanks, I'm Enjoying this

One Suggestion scrnli_05_02_2021_08-11-17.png

instead of https://devcover.vercel.app/portfolio/saviomartin/#blog links like this you could use just #blog to avoid page refreshing and it scrolls smooth to #blog container.

Hope it helps

Junior Garcia's photo

Thanks for your suggestion mate!, I already fixed that here: github.com/jrgarciadev/dev-cover/commit/68a..