How I developed my modern open source portfolio 👨🏾‍💻

Developer Tools Design Tools Javascript UI Libraries

Vercel Landing Page

1

Vercel

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

This portfolio is hosted on Vercel and it rebuilds every time I push to the main branch on github.

#Developer Tools #Web Development Tools #App Deployment 522 social mentions
Tailwind CSS Landing Page
2

Tailwind CSS

A utility-first CSS framework for rapidly building custom user interfaces.
Pricing:
- Open Source
#Developer Tools #Design Tools #Website Design 866 social mentions
React Landing Page
3

React

A JavaScript library for building user interfaces
Pricing:
- Open Source
Development was the most interesting stage so I am probably going to spent slightly more time here. At the core of this portfolio there is ReactJS. I used React to create all the components. Below is a sample reusable Button component and its styles.

#Javascript UI Libraries #JS Library #JavaScript Framework 775 social mentions
Next.js Landing Page
4

Next.js

A small framework for server-rendered universal JavaScript apps
Pricing:
- Open Source
My blogs are coming straight from the dev.to api and I am using NextJS to build pages with blog content at build time like so. More on NextJS can be found here.

#Developer Tools #Web Frameworks #JavaScript Framework 919 social mentions
MailChimp Landing Page

5

MailChimp

MailChimp is the best way to design, send, and share email newsletters.

#Email Marketing #Email Marketing Platforms #Email Marketing Automation 85 social mentions
GitHub Landing Page
6

GitHub

Originally founded as a project to simplify sharing code, GitHub has grown into an application used by over a million people to store over two million code repositories, making GitHub the largest code host in the world.
Pricing:
- Open Source
#Code Collaboration #Git #Version Control 2036 social mentions
Figma Landing Page

7

Figma

Team-based interface design, Figma lets you collaborate on designs in real time.

After designing the wireframes I headed over to figma for the actual design I used for development. Please note that not everything on the portfolio was designed in figma some things were added during development, there are also some things that were designed on figma that were not coded because I changed the design. Below is how the first iteration of the design looked like in figma.

#Design Tools #Prototyping #Design Collaboration 101 social mentions
DEV.to Landing Page

8

DEV.to

Where software engineers connect, build their resumes, and grow.

Export async function getStaticProps() { const res = await fetch( `https://dev.to/api/articles?username=${DEV_TO_USERNAME}&per_page=5` ); const articles = await res.json(); return { props: { articles, }, revalidate: 60, }; }.

#CMS #Blogging #Blogging Platform 384 social mentions
GitHub Copilot Landing Page

9

GitHub Copilot

Your AI pair programmer. With GitHub Copilot, get suggestions for whole lines or entire functions right inside your editor.

The next thing after the design was generating content for the website. For me that was one of the difficult stages but luckily I didn't want too much content. Can you believe that GitHub Copilot helped me out with some of the content 🤔, I mean the AI is that good👌🏼.

#Developer Tools #Coding #Code Autocomplete 211 social mentions