Build an Awesome Personal Portfolio Website Using Next.js and Framer-motion.
A portfolio is essential for every developer. It gives you the opportunity to display your projects and show everyone the programming languages and libraries you’re passionate about using.
Preview the Portfolio website we are going to build in this blog.
Click here to see git repository . If, it helps you consider giving star to repo.
Let’s jump into the building part
yarn create next-app personal-websiteTo run your Next.js website, run
yarn run dev
Why Use Next.js Over Vanilla JavaScript?
Next.js is a popular framework for building modern web applications. But why should you use it instead of just plain JavaScript? Here are a few key reasons:
1. Easier Development:
Next.js makes it simpler to build web applications. It provides a lot of built-in features, so you don’t have to start from scratch every time.
2. Server-Side Rendering (SSR):
With vanilla JavaScript, your code runs entirely on the user’s browser. Next.js, however, can also run code on the server before sending it to the browser. This can make your website faster and better for search engines, which improves SEO.
3. Static Site Generation (SSG):
Next.js can generate HTML pages at build time, making your site incredibly fast and efficient. This is perfect for blogs or e-commerce sites where the content doesn’t change often.
4. Optimized Performance:
Next.js comes with performance optimizations out of the box. It can automatically split your code, so users only download what they need for the page they’re visiting, making your site faster.
What Is Virtual DOM?
When you build a web application, it’s common to update the user interface (UI) in response to user actions. With vanilla JavaScript, updating the UI can be slow and complex because you have to manipulate the DOM (Document Object Model) directly.
The Virtual DOM is a concept used in frameworks like Next.js (through React). It works like this:
- Instead of changing the real DOM directly, you make changes to a virtual copy of the DOM.
- The virtual DOM is a lightweight representation of the real DOM.
- When you make changes, the framework compares the virtual DOM with the real DOM and finds the differences.
- It then updates only the parts of the real DOM that changed, making the updates much faster and smoother.
What Is Reconciliation?
Reconciliation is the process that frameworks like Next.js use to update the DOM efficiently. Here’s a simple way to understand it:
- When something in your app changes, the framework creates a new virtual DOM.
- It compares this new virtual DOM with the previous version to see what has changed.
- The framework then updates only the parts of the real DOM that need to be changed, rather than re-rendering the entire page.
This process ensures that your web application is fast and responsive, even when dealing with complex UIs.
Modify layout.js, global.css and Page.js
Code for Navbar.js component imported in layout.js
import React from "react";
import styles from "./navbar.module.css";
import Link from "next/link";
import ResponsiveNav from "../responsiveNav/ResponsiveNav";
const Navbar = () => {
return (
<div className={styles.container}>
<div className={styles.logo}>Parikshit's Portfolio</div>
<div className={styles.links}>
<Link href="/" className={styles.link}>
Home
</Link>
<Link href="/blog" className={styles.link}>
Blog
</Link>
<Link href="/project" className={styles.link}>
Projects
</Link>
<Link href="/contact" className={styles.link}>
Contact Me
</Link>
</div>
<ResponsiveNav />
</div>
);
};
export default Navbar;Code for Footer component imported in layout.js
import React from "react";
import Image from "next/image";
import Link from "next/link";
import styles from "./footer.module.css";
const Footer = () => {
return (
<div className={styles.container}>
<div className={styles.info}>
<div className={styles.logo}>
<div className={styles.logoImageContainer}>
<Image
src="/myself.jpg"
alt="logo"
height={50}
width={50}
className={styles.logoImage}
/>
</div>
<h1 className={styles.logoText}>Parikshit</h1>
</div>
<p className={styles.desc}>
Copyright © All rights reserved | ParikshitGehlaut.com
</p>
<div className={styles.icons}>
<Link
href=""
target="_blank"
title="Instagram"
>
{" "}
<Image src="/instagram.webp" alt="" height={25} width={25} />
</Link>
<Link
href=""
target="_blank"
title="Medium"
>
{" "}
<Image src="/medium.webp" alt="" height={25} width={25} />
</Link>
<Link
href=""
target="_blank"
title="Twitter"
>
{" "}
<Image src="/Twitter.webp" alt="" height={25} width={25} />
</Link>
<Link
href=""
target="_blank"
title="LinkedIn"
>
{" "}
<Image src="/linkedin.webp" alt="" height={25} width={25} />
</Link>
</div>
</div>
<div className={styles.links}>
<div className={styles.list}>
<span className={styles.listTitle}>Links</span>
<Link href="/">Home</Link>
<Link href="/blog">Blog</Link>
<Link href="/project">Projects</Link>
<Link href="/contact">Contact Me</Link>
</div>
<div className={styles.list}>
<span className={styles.listTitle}>Social</span>
<Link
href=""
target="_blank"
>
Instagram
</Link>
<Link href="" target="_blank">
Medium
</Link>
<Link
href=""
target="_blank"
>
Linkedin
</Link>
<Link href="" target="_blank">
Twitter
</Link>
</div>
</div>
</div>
);
};
export default Footer;Code for Hero Section, imported in Page.js, you will find this code in file “Intro.js” inside components folder.
import React from "react";
import Image from "next/image";
import Link from "next/link";
import styles from "./intro.module.css";
const Intro = () => {
return (
<div className={styles.container}>
<section className={styles.introSection}>
<h1 className={styles.title}>
<b>Hello!</b> I'm{" "}
<b>
{" "}
<span className={styles.name}>Parikshit.</span>
</b>{" "}
I am Passionate <b>Web developer</b> .
</h1>
<div className={styles.box}>
<div className={styles.textContainer}>
<h1 className={styles.boxTitle}>About Me</h1>
<p className={styles.boxDesc}>
Hello, I am Parikshit. I am a Computer Science student at Indian
Institute of Technology, Dharwad, India.
</p>
<p className={styles.boxDesc}>
I have experience working with React, Next.js and Django.
</p>
<Link
href="https://github.com/ParikshitGehlaut"
className={styles.button}
>
Visit Github
</Link>
</div>
<div className={styles.imgContainer}>
<Image
src="/personal.jpg"
alt="personal image"
width={240}
height={320}
priority={true}
className={styles.image}
/>
</div>
</div>
</section>
</div>
);
};
export default Intro;The rest of code is available on Github, feel free to clone it .
This is basic template for creating Portfolio website using Next.js, hope this will get to started with Next.js.
If you consider this blogpost helpful, like it and share it.
