If you're a Developer (Front-end / Back-end / Full-Stack) and you don't have a portfolio website, you're already late to the party. Having a portfolio website not only establishes you as a brand, but can be a all-in-one place for all your activities.

For example, You can write technical blogs (Like I do) and share your knowledge with other people.

Share resources and links to helpful websites.

Share code snippets that are used on a regular basis and are just copy-paste snippets.

The use cases are endless.

I've come up with a boilerplate website that looks amazing, has optimized React code, is Mobile responsive and most of all, it is deployed in 3 steps. (Thanks to Vercel). The page design is inspired by Kevin Clark. I tried to keep it as simple as possible.

Website features and structure

The boilerplate website already comes up with features such as:

• Dark mode support.
• Built in Next.js - Easy routing and blazing-fast.
• Styled with tailwindcss - Simple classes embedded directly in the HTML
• Deployed on Vercel
• Uses modern animations like Rough Notation
• Uses tailwindcss built in animations.
• Meta tags for all the pages - I've built a custom Meta component for the same.

The website is divided into 5 pages:

• /Homepage - Who you are, what you do, your latest GitHub Repositories
• /About - Who you are, what is your Tech Stack, Your social links.
• /Experience - Your work experience, Education and Internships
• /Projects - Your standalone projects, SaaS products and/or research projects.
• /Contact - Contact form - Taken from TailwindMasterKit

I'm continuously working on it, going to add Blog pages and individual project pages into the same repository

Deploying the application

You will have to clone the repository and make necessary changes (Customize it to make it yours) and deploy it on vercel for hosting.

Clone the repository

git clone https://github.com/manuarora700/simple-developer-portfolio-website

Download locally and install node modules

npm install
// or
npm i
// or
yarn

Make the changes - commit code - push your code to the repo

git add .
git commit -m "changes made"
git push

Create an account on Vercel and add your existing GitHub Project.

Once connected, you can keep on making changes and it'll reflect on the website instantly. Change code and push to the repo. That is it.

Building and workflow

Tech Stack

The website is built in my favourite Tech Stack and deployed on Vercel

• Next.js for building React Components.
• tailwindcss for styling.
• React Rough Notation for Hero section highlighting.
• Vercel for deployments and CI/CD.

Folder structure

• /components is where all the components live.
• /pages is where all the pages / routes live.
• /public is for all the static assets like images and videos
• /styles is a global place for all the root level styles. Tailwind base modules go here.

It is simple. Not much required 🥺

Container Layour

I have kept Navbar, MainContent, and Footer in the <ContainerBlock></ContainerBlock> element. I did this because I wanted to have a root level layout which accepts children as a prop and has Navbar, Footer and Meta Component by default.

It accepts Meta Properties and children as a prop.

One could write meta properties for a components as:

<ContainerBlock
  title="Blogs - My Website"
  description="This is a dummy description"
>
  // Code related to the page you're going to developer
  <Blog />
</ContainerBlock>

Navbar Component

Navbar is pretty simple, It is a Flex layout that accepts three flex items - Home Container, Links Container and Social Container.

Have included a separate Links Container flex item for the mobile view that is only visible on small screens.

Navbar also has a button that toggles between Dark Mode and Light Mode. This is done with the Next themes package.

import React, { useEffect, useState } from "react";
import { useTheme } from "next-themes";

...
export default function Navbar() {
    const { theme, setTheme } = useTheme();
    ...
    ...
    return (
        ...
        ...
        <button
            aria-label="Toggle Dark Mode"
            type="button"
            className="w-10 h-10 p-3 rounded focus:outline-none"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          >

              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
                stroke="currentColor"
                className="w-4 h-4 text-yellow-500 dark:text-yellow-500"
              >
                {theme === "dark" ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
                  />
                )}
              </svg>

          </button>
    );
...
...

For this snippet to work, A Provider has to be present in the root _app.js file that holds all the components together.

import "../styles/globals.css";
import { ThemeProvider } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider defaultTheme="light" attribute="class">
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Hero Section

Hero section was the most fun to build. It has three things:

• React Rough Notation for box highlighting
• Grid for dividing Hero into two parts
• And my beautiful Avatar :p

Rough notation is easy to integrate. Wrap the text element with RoughNotationGroup and RoughNotation text elements.

For this, I created a separate component called RainbowHighlight that takes into consideration the animationDuration property too.

import React from "react";
import { RoughNotation } from "react-rough-notation";

export const RainbowHighlight = ({ color, children }) => {
  // Change the animation duration depending on length of text we're animating (speed = distance / time)
  const animationDuration = Math.floor(30 * children.length);

  return (
    <RoughNotation
      type="highlight"
      multiline={true}
      padding={[0, 2]}
      iterations={1}
      animationDuration={animationDuration}
      color={color}
    >
      {children}
    </RoughNotation>
  );
};

Then, I simply integrated this snippet into the Hero section.

<RoughNotationGroup show={true}>
    <RainbowHighlight color={colors[0]}>
    <h1 className="text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2">
        Developer.
    </h1>
    </RainbowHighlight>
    <RainbowHighlight color={colors[1]}>
    <h1 className="text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2">
        Designer.
    </h1>
    </RainbowHighlight>
    <RainbowHighlight color={colors[2]}>
    <h1 className="text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2">
        Programmer.
    </h1>
    </RainbowHighlight>
    <RainbowHighlight color={colors[3]}>
    <h1 className="text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2">
        Youtuber.
    </h1>
    </RainbowHighlight>
</RoughNotationGroup>

Projects section

Used tailwind grids for aligning project cards.

Hover effect is a simple scale-on-hover effect that can be done easily with tailwind

<div className="relative overflow-hidden">
  <img
    src="/tmk.jpg"
    alt="portfolio"
    className="transform hover:scale-125 transition duration-2000 ease-out"
  />
  <h1 className="absolute top-10 left-10 text-gray-50 font-bold text-xl bg-red-500 rounded-md px-2">
    Tailwind Master Kit
  </h1>
  <h1 className="absolute bottom-10 left-10 text-gray-50 font-bold text-xl">
    01
  </h1>
</div>

Experience section

I've created a simple, standard card for each 'Experience' or 'Work related exposure' that you hold. Connected with a custom animation animationPulse built just with tailwindcss (It is powerful!).

 {/* Experience card */}
<div className="relative experience-card border p-4 rounded-md shadow-xl bg-white dark:bg-gray-800 z-10 mx-4">
    <h1 className="absolute -top-10 md:-left-10 md:-top-10 text-4xl text-gray-200 font-bold dark:text-gray-800">
        2021
    </h1>
    <h1 className="font-semibold text-xl">Software Developer</h1>
    <a href="https://mroads.com" className="text-gray-500">
        mroads
    </a>
    <p className="text-gray-600 dark:text-gray-400 my-2">
        Contributed to our flagship product - Panna - which is an AI
        powered candidate interviewing product.
    </p>
</div>
<div className="divider-container flex flex-col items-center -mt-2">
    <div className="w-4 h-4 bg-green-500 rounded-full relative z-10">
        <div className="w-4 h-4 bg-green-500 rounded-full relative z-10 animate-ping"></div>
    </div>
    <div className="w-1 h-24 bg-gray-200 dark:bg-gray-500 rounded-full -mt-2"></div>
</div>

About section

About section is where all your social links and things related to you 'As a person' comes in. I kept it very simple and descriptive. Have also included the tech stack that a full-stack developer might use. Ignore the bullshit I've written because didn't really want to write lorem text.

Created a custom hover effect wherein a border-bottom appears on hover With a slight transition, looks smooth. 😇

<div className="flex flex-row justify-start items-center">
  <a
    href="https://twitter.com"
    className="flex flex-row items-center space-x-4 group"
  >
    <div className="my-4">&rarr;</div>
    <p className="text-lg text-gray-500 font-mono relative overflow-hidden dark:text-gray-300">
      <div className="absolute h-0.5 w-full bg-gray-400 bottom-0 transform -translate-x-24 group-hover:translate-x-0 transition duration-300"></div>
      Twitter
    </p>
  </a>
</div>

Contact section

Contact section is directly taken from Tailwind Master Kit.

Tailwind Master Kit is a components and templates marketplace for Tailwind projects. They have drag and drop pieces of code snippets that you can directly embed into your projects with ease.

I've used one of their Contact Section Form which is a free one.

Conclusion

The template is one complete website that covers all the aspects that recruiters are looking for. A website should be your living and breathing CV. My personal website has helped me land technical interview at big companies.

You can customize the website to the core and you're free to use it in any way (Just don't use my image please ;_;)

I really enjoyed building this template from the ground up. If you like it, please leave a star ⭐️ at the GitHub Repository

Peace ✌️