Latest
Search for:
Developers

How to Create a STUNNING Developer Website in Under 60 Mins for FREE

By 9 Mins Read

Table of contents

Why create a developer website?

Do you know that feeling when you have to leave the “personal website” input field blank on a form? For many developers creating a personal website is a hard task. There might be several reasons, “I have no time for it”, “I am a backend developer”, “I am still junior, I have nothing to write on my website”. In other words, this is an area where you might need help or automation, or both.

Good news: it’s actually one of the ways you can use CodersRank. Our goal is to help you establish your presence a professional. So we created this simple guide to walk you through the steps.

How about creating a website that’s free and automatically updates itself with your new projects and accomplishments via widgets? Sounds good, right? What if I said that it will take less than 60 minutes to create it (15 mins if you’re advanced)?

Not bad!

You will only need a Github, Netlify and a CodersRank developer account to follow along the tutorial.

TL;DR

Step 1: Create GitHub Repository

Firstly, we need to create new repository on GitHub.

I called my repo “personal-website-with-widgets“.

After this is done, we need to clone it locally. Open the terminal and type:

$ git clone https://github.com/GITHUB_USERNAME/REPO_NAME.git

In my case it was

$ git clone https://github.com/nolimits4web/personal-website-with-widgets.git

This command will clone repository to personal-website-with-widgets folder.

Step 2: Setup Project Structure

Next, when we clone a repository locally, we need to setup a website structure. Create the following files and folders in the repository folder:

personal-website-with-widgets/
  public/
    i/
    index.html
    main.css

where:

  • public/ – main folder for our website content
    • i/ – folder for storing images (profile photo, social icons)
    • index.html – HTML content of our website
    • main.css – our website’s stylesheet

Step 3: Create the HTML layout

I have a pretty simple web page structure in mind so it should contain the following:

  • header – main information about me with my photo, name and social links
  • widgets – CodersRank widgets with my coding stats, portfolio, work experience and education

Let’s create the appropriate HTML layout.

In our public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vladimir Kharlampidi - Front-end Developer</title>
  <!-- Link our CSS stylesheet -->
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <main>
    <header>
      <!-- Header content with avatar and basic info -->
    </header>
    <section>
      <h2>My Coding Activity & Stats</h2>

      <!-- Summary widget -->
      
      <!-- Activity widget -->
      
      <!-- Skills chart widget -->
    </section>
    <section>
      <h2>Recent Projects</h2>

      <!-- Portfolio widget -->
    </section>
    <section>
      <h2>Work Experience & Education</h2>

      <!-- Work experience widget -->

      <!-- Education widget -->
    </section>

    <footer>
      <!-- Generic footer copy -->
    </footer>
  </main>
  
</body>
</html>

Now Add Widgets…

It is time to integrate the widgets. We already wrote about our 6 new widgets but in this post, I will walk you through the setup step-by-step.

Right now, after I added my header and footer code with some basic styles added to main.css the website looks like this:

Step 4: Add Summary Widget

First, we start with the Summary widget:

This widget contains your profile photo, name, worldwide ranks and rank badges.

To integrate the widget we need to:

  1. add script with widget web component to our page (right before closing </body> tag:)
<body>
  <!-- ... -->

  <script src="https://unpkg.com/@codersrank/summary/codersrank-summary.min.js"></script>
</body>
  1. add widget HTML tag to your page with our CodersRank username:
<codersrank-summary username="nolimits4web"></codersrank-summary>

And this is what we have:

Not very impressive, and this doesn’t really fit into our design concept. Thankfully it is possible to customize CodersRank widgets.

Because i already have my profile photo and name in website header, we need to remove the header from widget:

<codersrank-summary
  username="nolimits4web"
  show-header="false"
></codersrank-summary>

And we need to use CSS Variables (CSS Custom Properties) to apply custom styles to widget. For example, we can add the following styles to our main.css stylesheet:

codersrank-summary {
  --bg-color: transparent;
  --badge-bg-color: #161616;
  --badge-text-color: #fff;
  --badges-padding: 0px;
  --badge-padding: 8px;
  --badge-margin: 16px;
  --badge-border-radius: 8px;
  --badge-rank-font-size: 16px;
  --badge-technology-font-size: 18px;
  --badge-location-font-size: 16px;
  --badge-icon-size: 32px;
  --badge-border: 1px solid rgba(0, 0, 0, 0.1);
  --badge-box-shadow: none;
}

Now we have much better look that fits perfectly into our design:

Step 5: Add the Activity Widget

Next one is the Activity widget:

Yes, it looks almost the same as the activity chart on your GitHub profile, but unlike the GitHub activity chart, the CodersRank activity chart also counts GitLab activities, commits to private repositories and StackOverflow activity.

To integrate the Activity widget we need to:

  1. add script with widget web component to our page (right before closing </body> tag:)
<body>
  <!-- ... -->

  <script src="https://unpkg.com/@codersrank/activity/codersrank-activity.min.js"></script>
</body>
  1. add widget HTML tag to our page with our CodersRank username:
<codersrank-activity username="nolimits4web" legend="false" labels tooltip step="5" ></codersrank-activity>

With extra attributes we:

  • disabled legend below the width (Less ... More)
  • enabled chart labels (months and day of the weeks labels)
  • enabled tooltip
  • set step to 5, which is number of activities for division by colors

This is what it looks like:

Some CSS magic:

codersrank-activity {
  padding: 8px;
  border-radius: 8px;
  background: #161616;
  --bg-color-0: #111;
  --bg-color-1: rgba(var(--theme-color-rgb), 0.25);
  --bg-color-2: rgba(var(--theme-color-rgb), 0.5);
  --bg-color-3: rgba(var(--theme-color-rgb), 0.75);
  --bg-color-4: rgba(var(--theme-color-rgb), 1);
  --label-text-color: rgba(255, 255, 255, 0.54);
}

And here we go:

Step 6: Add the Skills Chart Widget

Next one is the Skills Chart widget:

This chart shows how your scores have grown over the past few years, broken down by programming language.

Similarly as with other widgets, to integrate the Skills Chart widget we need to:

  1. add script with widget web component to our page (right before closing </body> tag:)
<body>
  <!-- ... -->

  <script src="https://unpkg.com/@codersrank/skills-chart/codersrank-skills-chart.min.js"></script>
</body>
  1. add widget HTML tag to our page with our CodersRank username:
<codersrank-skills-chart
  username="nolimits4web"
  labels
  tooltip
  skills="JavaScript,CSS,Less,Vue,Svelte,TypeScript,CSS,HTML"
  svg-width="1120"
  svg-height="400"
></codersrank-skills-chart>

With extra attributes we:

  • enabled chart labels (chart axis with dates)
  • enabled tooltip
  • specified skills we want to display on the chart
  • set generated svg render width and height to fit better into our design

In addition, a bit of extra CSS:

codersrank-skills-chart {
  --label-text-color: rgba(255, 255, 255, 0.54);
  --chart-bg-color: #161616;
  --chart-border-radius: 8px;
  --axis-bg-color: transparent;
  --label-font-size: 12px;
}

And the result:

Step 7: Add the Portfolio Widget

To showcase the projects I am working on or proud of, I will use the Portfolio widget.

Integrate the Portfolio widget:

  1. add script with widget web component to our page (right before closing </body> tag:)
<body>
  <!-- ... -->

  <script src="https://unpkg.com/@codersrank/portfolio/codersrank-portfolio.min.js"></script>
</body>
  1. add widget HTML tag to our page with our CodersRank username:
<codersrank-portfolio
  username="nolimits4web"
  grid
  company="false"
></codersrank-portfolio>

With extra attributes we:

  • enabled grid layout
  • disable displaying company name in portfolio item

And this is what we initially get:

Some extra styles to match our design and colors:

codersrank-portfolio {
  --grid-columns: 2;

  --item-bg-color: #161616;
  --item-border-radius: 8px;
  --item-spacing: 16px;
  --item-padding: 16px;
  --logo-size: 64px;
  --tag-bg-color: rgba(255,255,255,0.075);
  
  --link-text-color: var(--theme-color);
  --link-bg-color: rgba(255,255,255,0.1);
  --link-hover-bg-color: rgba(255,255,255,0.125);
  --link-active-bg-color: rgba(255,255,255,0.075);
  --link-border-radius: 8px;
  --link-padding: 4px 8px;
  --link-text-transform: none;
  --link-font-weight: 500;
  --link-margin: 8px;
}

Now it looks much better:

Step 8: Add the Work Experience & Education Widgets

Finally, we can add the following widgets to complete our developer website:

Work Experience widget 

and Education widget 

As with other widgets, integrate the Portfolio widget first:

  1. add script with widget web component to our page (right before closing </body> tag:)
<body>
  <!-- ... -->

  <script src="https://unpkg.com/@codersrank/work-experience/codersrank-work-experience.min.js"></script>

  <script src="https://unpkg.com/@codersrank/education/codersrank-education.min.js"></script>
</body>
  1. add widget HTML tag to our page with our CodersRank username:
<codersrank-work-experience
  username="nolimits4web"
  logos
></codersrank-work-experience>

<codersrank-education
  username="nolimits4web"
></codersrank-education>

A pinch of CSS styles:

codersrank-work-experience,
codersrank-education {
  --item-bg-color: #161616;
  --item-border-radius: 8px;
  --item-spacing: 16px;
  --item-padding: 16px;
  --logo-size: 64px;
  --tag-bg-color: rgba(255,255,255,0.075);
}

And here we go:

Step 9: Deploy To Netlify

Our website is ready and it is time to deploy it.

As our website is fully static and doesn’t require any build pipeline, it can be deployed to absolutely any server that can serve static files.

In my case i will deploy it to Netlify. It has great free plan and can automatically deploy from GitHub, exactly what we need.

Firstly, we need to push our local website to GitHub. In terminal (in local repository folder) run the following:

  • Commit change we made$ git commit . -m "My website"
  • Send them to GitHub$ git push

Next, we need to create an account on Netlify (if you don’t have it yet).

After that (when you logged in), there is a “New site from Git” button in your dashboard:

On next screen choose to deploy from GitHub:

It will prompt you to authorize Netlify on Github and move to the next screen where you need to choose the repository to deploy from:

It will open deploy settings. In “Publish directory” we need to type our website folder – public. And click on “Deploy site” button.

After that it will create a project, deploy it and show the live link:

And here comes our website live at personal-website-with-widgets.netlify.app.

It’s mobile-friendly (which is something tech recruiters check when reviewing your portfolio) and the widgets will take care of all the info updates while you sleep.

Your shiny, new developer website

In conclusion, it is really easy and fast to create a personal developer website with CodersRank widgets. Such a website can serve as a personal portfolio, or a good fit as online CV for job seekers.

If you don’t want to go through the whole tutorial from scratch, you can start by forking my personal-website-with-widgets repo and just customizing it.

If the amount of data or appearance of widgets is not enough for you, you can go with totally custom solution using official public CodersRank API.

Author

Frontend Developer at CodersRank. Creator of Framework7 and Swiper.

Related Posts

2 Comments

Write A Comment