The Simplest Portfolio Website with Next.js and Make it Live

I have set up a new portfolio website for myself. I am believing in simplicity and you could feel it while browsing through my portfolio website. Here in this article, I am sharing the steps to create the simplest portfolio website with Next.js and make it live.

My portfolio website

The below link will direct you to my personal portfolio website:-

https://syam.me

I have used the Next.js framework to build this website. I also used the react-bootstrap package for a faster styling process.

After completing building the website, I deployed it on Vercel, purchased a domain name from GoDaddy, and connected it to Vercel. So that it becomes like.

The Simplest Portfolio Website with Next.js

So let us start coding a portfolio website with the Next.js framework.

Prerequisites

I assume that the reader has a basic knowledge about the following things:-

  • HTML, CSS, and JavaScript basics
  • React.js library
  • React-Bootstrap
  • Next.js framework
  • Deploying a Next.js app on Vercel
  • Basic knowledge in purchasing a domain name from Godaddy

What we will learn

After completing this article, we will learn to create the simplest portfolio website with the Next.js framework and make it live using Vercel.

We will also purchase and connect a domain name with our website.

After completing the article, we will create a portfolio website that works the same as below.

Start a new Next.js project

After successfully installing Node.js on our system, we can easily create a new Next.js project using the below command.

npx create-next-app syam-me-website

This will create a new project named syam-me-website.

We can enter the directory and open the project with Visual Studio Code or any other code editor.

Note: We must install VS code on our system before executing the commands below.

cd syam-me-website
code .

This will open our Next.js project in VS code as shown below.

Setup React-Bootstrap and Bootstrap icons in our Next.js project

To simplify the styling process, we are using the React-Bootstrap library in our app. So, install and set up React-Bootstrap on our app. So on your terminal, execute the following commands.

npm install react-bootstrap [email protected]
npm install bootstrap

Now, import the bootstrap.css in the pages/_app.js file.

import "bootstrap/dist/css/bootstrap.css";

In the same manner, install the bootstrap-icons package.

npm i bootstrap-icons

Import the bootstrap-icons.css in the pages/_app.js file.

import "bootstrap-icons/font/bootstrap-icons.css";

We are also importing the globals.css file that contains the global styles for our website.

import "../styles/globals.css";

So that the complete _app.js file looks the same as below.

// pages/_app.js

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Define some global style

We have already imported the globals.css in the _app.js and now let us define it. We are adding some global styles to our app. This can be written in a styles/globals.css file.

// styles/globals.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif !important;
}

a {
  color: rgb(0 0 0);
  text-decoration: none;
  font-weight: 600;
  text-decoration: underline;
}
a:hover {
  text-decoration: underline;
}
p {
  line-height: 1.6rem;
}
.line {
  margin-bottom: 1rem;
}

* {
  box-sizing: border-box;
}

Code the Header portion

We are splitting the home page into several portions or components. So that it is easier to manage our website.

Let us start with the Header section. We are adding a profile image, name, and profession here. The profile image is located in the public/assets/images directory.

We are also importing a style file that only includes the styles for the Header module component.

So that the components/Header.js file will be the same as below.

// components/Header.js

import styles from "../styles/Header.module.css";

export default function Header() {
  return (
    <main className={styles.header}>
      <img src="/assets/images/syamlal.jpg" className={styles.dp} />

      <h1 className={styles.name}>Syamlal CM</h1>

      <p className={styles.about}>
        Software Engineer & Internet Entrepreneur,
        <br />
        Founder & CEO at{" "}
        <a href="https://floyet.com" target="_blank" rel="noreferrer">
          Floyet Technologies
        </a>
      </p>
    </main>
  );
}

The style file styles/Header.module.css file will be defined the same as below.

// styles/Header.module.css

.header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.dp {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  margin-top: -5rem;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important;
  transition: transform 0.2s;
  cursor: pointer;
  border: 3px solid white;
}
.dp:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 5px 0 #dfdfdf, 0 8px 40px 0 rgb(10 14 29 / 6%);
}
.name {
  font-size: 2em;
  margin-top: 1rem;
}
.about {
  font-weight: 100;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .dp {
    margin-top: -7rem;
  }
  .about {
    font-size: 0.9em;
  }
}

About portion

Under the Header section, I am displaying an About section that contains a brief paragraph about me.

// components/About.js

import styles from "../styles/About.module.css";

export default function About() {
  return (
    <div className={styles.about}>
      <h2>About</h2>
      <img src="/assets/svg/line.svg" className="line" />
      <p>
        Hello! I'm Syamlal CM, a Software Engineer & Internet Entrepreneur. I am
        the founder and CEO of{" "}
        <a href="https://floyet.com" target="_blank" rel="noreferrer">
          Floyet Technologies - a digital branding company
        </a>
        .
      </p>
      <p>
        As a full-stack developer I can work with Next.js, React.js, React
        Native, Express.js and MongoDB.
      </p>
      <p>
        I am writing technical contents on{" "}
        <a href="https://techomoro.com" target="_blank" rel="noreferrer">
          Techomoro.com
        </a>
        ,{" "}
        <a href="https://dev.to/syamjayaraj" target="_blank" rel="noreferrer">
          Dev.to
        </a>
        ,{" "}
        <a
          href="https://www.toolbox.com/user/about/SyamlalCM/"
          target="_blank"
          rel="noreferrer"
        >
          Toolbox.com
        </a>
        ,{" "}
        <a
          href="https://medium.com/@syamjayaraj"
          target="_blank"
          rel="noreferrer"
        >
          Medium
        </a>
        , and{" "}
        <a
          href="https://www.quora.com/profile/Syamlal-CM"
          target="_blank"
          rel="noreferrer"
        >
          Quora
        </a>
      </p>
    </div>
  );
}

The CSS for the about component will be defined below. This is coded inside the styles/About.module.css file.

// styles/About.module.css

.about {
  padding-top: 1rem;
  font-size: 0.9em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.boxes {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.box {
  padding: 1rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
  border: 1px solid lightgrey;
  border-radius: 0.6rem;
  align-items: center;
  display: flex;
}
.box i {
  font-size: 1.5em;
  margin-right: 0.5rem;
}

A portion to add the experiences

This is the important portion of a portfolio website. Companies and people need to see my past experiences.

We are adding this in the components/Experience.js file.

// components/Experience.js

import styles from "../styles/Experience.module.css";

export default function Experience() {
  return (
    <div className={styles.experience}>
      <h2>Experience</h2>
      <img src="/assets/svg/line.svg" className="line" />
      <div className={styles.lineContainer}>
        <div className={styles.line}>
          <i class="bi bi-briefcase"></i>
          <div>
            <div className={styles.college}>
              <a href="https://redmonark.com/" target="_blank" rel="noreferrer">
                Redmonark Technologies LLP
              </a>
            </div>
            <div className={styles.branch}>
              Co-Founder (March 2018- January 2021)
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Let us add a bit of CSS for this module. This can be done in the styles/Experience.module.css file.

// styles/Experience.module.css

.experience {
  padding-top: 1rem;
  font-size: 0.9em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.branch {
  font-size: 0.8em;
}
.lineContainer {
  display: flex;
  justify-content: center;
}
.line {
  display: flex;
  flex-direction: row;
  text-align: left;
  align-items: center;
}
.college {
  font-size: 1.2em;
  font-weight: 600;
}

.line i {
  font-size: 1.5em;
  margin-right: 1rem;
}

A section to showcase the works

Here we will list all our works as cards. People can directly get to the linked website/ product page. So inside the components/Works.js, add the following code.

// components/Works.js

import { Card, Col, Row } from "react-bootstrap";
import styles from "../styles/Works.module.css";

export default function Works() {
  return (
    <div className={styles.works}>
      <h2>Works</h2>
      <img src="/assets/svg/line.svg" className="line" />
      <Row>
        <Col md={6}>
          <Card className={styles.card}>
            <a href="https://kuty.me" target="_blank" rel="noreferrer">
              <Card.Img
                variant="top"
                src="/assets/images/works/techomoro.png"
              />
              <Card.Body>
                <Card.Title className={styles.title}>Techomoro.com</Card.Title>
                <p className={styles.category}>Blog</p>
                <Card.Text>
                  A technology blog mainly dealing with the latest trends in
                  Full-stack web and mobile app development.
                </Card.Text>
                <Card.Text>
                  Topics include React.js, Next.js, Express.js, MongoDB, and
                  more.
                </Card.Text>
              </Card.Body>
            </a>
          </Card>
        </Col>
        <Col md={6}>
          <Card className={styles.card}>
            <a
              href="https://play.google.com/store/apps/details?id=com.onnich.parambath"
              target="_blank"
              rel="noreferrer"
            >
              <Card.Img
                variant="top"
                src="/assets/images/works/parambathapp.png"
              />
              <Card.Body>
                <Card.Title className={styles.title}>Parambath App</Card.Title>
                <p className={styles.category}>Android App</p>
                <Card.Text>
                  It is designed to provide instant access to services and
                  notifications for people living in Thalakkulathur village
                </Card.Text>
                <Card.Text>
                  The app is completely in the Malayalam language.
                </Card.Text>
              </Card.Body>
            </a>
          </Card>
        </Col>
        <Col md={6}>
          <Card className={styles.card}>
            <a href="https://kuty.me" target="_blank" rel="noreferrer">
              <Card.Img variant="top" src="/assets/images/works/kuty.png" />
              <Card.Body>
                <Card.Title className={styles.title}>Kuty.me</Card.Title>
                <p className={styles.category}>URL Shortener</p>
                <Card.Text>
                  People don't like long and messy URLs. Kuty.me will help you
                  to shorten any lengthy URL in just one click.
                </Card.Text>
                <Card.Text>
                  Other tools in Kuty.me are Whatsapp link generator and Quiz
                  maker
                </Card.Text>
              </Card.Body>
            </a>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

The styles for the works module can be added in the styles/Works.module.css file.

// styles/Works.module.css

.works {
  padding-top: 1rem;
  font-size: 0.9em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.works a {
  color: black;
  text-decoration: none;
}

.works a:hover {
  text-decoration: none;
}
.title {
  margin-bottom: 0;
}
.category {
  font-size: 0.8em;
}
.card {
  transition: transform 0.2s;
  margin: 0 auto;
  margin-bottom: 1.2rem;
}
.card:hover {
  transform: scale(1.1);
  border: none;
  box-shadow: 0 2px 5px 0 #dfdfdf, 0 8px 40px 0 rgb(10 14 29 / 6%);
}
.boxes {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.box {
  padding: 1rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
  border: 1px solid lightgrey;
  border-radius: 0.6rem;
  align-items: center;
  display: flex;
}
.box i {
  font-size: 1.5em;
  margin-right: 0.5rem;
}

Contact component

We need a Contact portion where people can contact us easily with a button click. I am adding the Email, Whatsapp, and link to the mobile number in this section. This is coded in the components/Contact.js file.

// components/Contact.js

import { Row, Col } from "react-bootstrap";
import styles from "../styles/Contact.module.css";

export default function Contact() {
  return (
    <div className={styles.contact}>
      <h2>Contact</h2>
      <img src="/assets/svg/line.svg" className="line" />
      <Row className={styles.boxes}>
        <Col lg={4} md={6} sm={12}>
          <a
            href="mailto:[email protected]"
            target="_blank"
            rel="noreferrer"
            className={styles.box}
          >
            <i className="bi bi-envelope"></i>
            [email protected]
          </a>
        </Col>
        <Col lg={4} md={6} sm={12}>
          <a
            href="https://kuty.me/sym"
            target="_blank"
            rel="noreferrer"
            className={styles.box}
          >
            <i className="bi bi-whatsapp"></i>
            Message
          </a>
        </Col>
        <Col lg={4} md={6} sm={12}>
          <a
            href="tel:+919946792650"
            target="_blank"
            rel="noreferrer"
            className={styles.box}
          >
            <i className="bi bi-telephone"></i>
            +91-9946792650
          </a>
        </Col>
      </Row>
    </div>
  );
}

We can add the styles part for this module in the styles/Contact.module.css file.

// styles/Contact.module.css

.contact {
  padding-top: 1rem;
  font-size: 0.9em;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.contact a {
  color: #333;
  transition: transform 0.2s;
  text-decoration: none;
}
.contact a:hover {
  text-decoration: none;
  background: #f3f3f3;
  transform: scale(1.2);
  border: none;
  box-shadow: 0 2px 5px 0 #dfdfdf, 0 8px 40px 0 rgb(10 14 29 / 6%);
}
.boxes {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}
.box {
  padding: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border: 1px solid lightgrey;
  border-radius: 0.3rem;
  align-items: center;
  display: flex;
}
.box i {
  font-size: 1.5em;
  margin-right: 0.5rem;
}
@media (max-width: 991px) {
  .box {
    font-size: 0.9em;
    margin-bottom: 1rem;
  }
}

Design the Footer part

At the footer, let us add the social media accounts and copyright information. We can add this code in the components/Footer.js file.

// components/Footer.js

import styles from "../styles/Footer.module.css";

export default function Footer() {
  return (
    <footer className={styles.footer}>
      <div className="container">
        <div className="social-accounts">
          <ul className="list-inline">
            <li className="list-inline-item">
              <a
                href="https://www.linkedin.com/in/syamjayaraj"
                target="_blank"
                rel="noreferrer"
                className="btn-sm btn-default btn-lg"
              >
                <i class="bi bi-linkedin"></i>
              </a>
            </li>
            <li className="list-inline-item">
              <a
                href="https://twitter.com/syamjayaraj"
                target="_blank"
                rel="noreferrer"
                className="btn-sm btn-default btn-lg"
              >
                <i class="bi bi-twitter"></i>
              </a>
            </li>
            <li className="list-inline-item">
              <a
                href="https://www.github.com/techomoro"
                target="_blank"
                rel="noreferrer"
                className="btn-sm btn-default btn-lg"
              >
                <i class="bi bi-github"></i>
              </a>
            </li>
          </ul>
        </div>
        <div className="copyright">
          <p className="top">
            Made with Love in God's own country | Powered by&nbsp;
            <a href="https://floyet.com">Floyet</a>
          </p>
          <p className="bottom">
            Copyright © <a href="https://syam.me">Syam.me</a> 2022
          </p>
        </div>
      </div>
    </footer>
  );
}

We can also write the CSS for this module.

// styles/Footer.module.css

.footer {
  border-top: 1px solid #eaeaea;
  padding-top: 1rem;
  font-size: 0.9em;
  margin-top: 2rem;
}

Import all the components and Add the Meta Information to the Home page

So we have finished creating all sections as components. Now let us import all to the home page. The home page is the pages/index.js file.

Here we are also adding the title and meta tags in our Next.js app. Because our website is a single page, we can easily add these between <Head></Head> on the same home page.

<Head>
        <title>
          Syamlal CM - Software Engineer & Internet Entrepreneur, Founder & CEO
          at Floyet Technologies, • Next.js • React.js • Express.js • MongoDB
        </title>
        <meta
          name="description"
          content="
        Syamlal CM is a Software Engineer & Internet Entrepreneur. He is the Founder & CEO
        at Floyet Technologies."
        />
        <meta name="theme-color" content="#ffffff" />

        <meta name="og:type" content="website" />
        <meta
          name="og:title"
          content="
          Syamlal CM - Software Engineer & Internet Entrepreneur, Founder & CEO
          at Floyet Technologies, • Next.js • React.js • Express.js • MongoDB"
        />
        <meta
          name="keywords"
          content="syam,lal,cm,syamlal,syamlal cm,software engineer, internet entrepreneur"
        />
        <meta name="og:url" content="https://syam.me" />
        <meta
          name="og:description"
          content="
          Syamlal CM is a Software Engineer & Internet Entrepreneur. He is the Founder & CEO
        at Floyet Technologies."
        />
        <meta name="og:image" content="/assets/images/syamlal-og.jpg" />

        <link rel="icon" href="/favicon.ico" />

        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
          rel="stylesheet"
        />
      </Head>

So that the complete pages/index.js file will look the same as below.

// pages/index.js

import Head from "next/head";
import { Card } from "react-bootstrap";
import styles from "../styles/Home.module.css";
import Header from "../components/Header";
import Footer from "../components/Footer";
import Experience from "../components/Experience";
import Education from "../components/Education";
import Works from "../components/Works";
import Contact from "../components/Contact";
import About from "../components/About";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>
          Syamlal CM - Software Engineer & Internet Entrepreneur, Founder & CEO
          at Floyet Technologies, • Next.js • React.js • Express.js • MongoDB
        </title>
        <meta
          name="description"
          content="
        Syamlal CM is a Software Engineer & Internet Entrepreneur. He is the Founder & CEO
        at Floyet Technologies."
        />
        <meta name="theme-color" content="#ffffff" />

        <meta name="og:type" content="website" />
        <meta
          name="og:title"
          content="
          Syamlal CM - Software Engineer & Internet Entrepreneur, Founder & CEO
          at Floyet Technologies, • Next.js • React.js • Express.js • MongoDB"
        />
        <meta
          name="keywords"
          content="syam,lal,cm,syamlal,syamlal cm,software engineer, internet entrepreneur"
        />
        <meta name="og:url" content="https://syam.me" />
        <meta
          name="og:description"
          content="
          Syamlal CM is a Software Engineer & Internet Entrepreneur. He is the Founder & CEO
        at Floyet Technologies."
        />
        <meta name="og:image" content="/assets/images/syamlal-og.jpg" />

        <link rel="icon" href="/favicon.ico" />

        <link
          href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
          rel="stylesheet"
        />
      </Head>

      <Card className={styles.card}>
        <Card.Body>
          <Header />
          <About />
          <Experience />
          <Education />
          <Works />
          <Contact />
          <Footer />
        </Card.Body>
      </Card>
    </div>
  );
}

Now add some CSS to the Home page. We are adding this in the styles/Home.module.css file.

// styles/Home.module.css

.container {
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  text-align: center;
  box-shadow: 0 2px 5px 0 #dfdfdf, 0 8px 40px 0 rgb(10 14 29 / 6%);
  border: none;
  margin-top: 20vh;
  width: 100%;
  height: auto;
  max-width: 50vw;
  padding: 2rem;
  padding-bottom: 0;
  margin-bottom: 5rem;
}

.footer {
  border-top: 1px solid #eaeaea;
}

.description {
  line-height: 1.5;
  font-size: 1.5rem;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin-top: 3rem;
}

.logo {
  height: 1em;
  margin-left: 0.5rem;
}

@media (max-width: 1200px) {
  .card {
    max-width: 67vw;
  }
}

@media (max-width: 1000px) {
  .card {
    max-width: 72vw;
  }
}

@media (max-width: 600px) {
  .card {
    max-width: 90vw;
    padding: 0.5rem;
  }
}

Deploy the website on Vercel and connect a domain name

Now let us learn the steps to deploy the website on Vercel and connect a domain name. I have already written an article regarding this topic. The link is given below and please refer to it.

How To Deploy A Next.Js App On Vercel For Free

Codesandbox

Refer to the CodeSandbox link to view the live app. You can clone this project to your CodeSandbox account and edit the code also.

https://codesandbox.io/s/interesting-archimedes-2vjq8

GitHub

You can always refer to the GitHub repository to clone this project, refer to the code and work on top of it.

https://github.com/syamjayaraj/syam-me-website

Summary

So here we created the simplest portfolio website using Next.js. The article explaining the steps to deploy the Next.js app on Vercel and connect a domain name is also given.

Related Posts

Be the first to reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.