---
title: "Discussion on \"Steps To Build A Professional Next.js Portfolio\" | Hashnode"
description: "Discussion on \"Steps To Build A Professional Next.js Portfolio\". With Tailwind CSS"
url: "https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Steps To Build A Professional Next.js Portfolio](https://dialabk.hashnode.dev/steps-to-build-a-professional-nextjs-portfolio?utm_source=hashnode&utm_medium=feed)

With Tailwind CSS

Jun 18, 2022 · 8 min read · dialabk.hashnode.dev  
Updated Jun 16, 2023  
Read the article

-   [#javascript](https://hashnode.com/tag/javascript)
-   [#tailwind-css](https://hashnode.com/tag/tailwind-css)
-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#portfolio](https://hashnode.com/tag/portfolio)

## Written by

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

@DialaBK · Amman, Jordan

  
[View profile](https://hashnode.com/@DialaBK)

Software developer | Python

Python Software Developer. Civil engineering background. thrives in the Front-End Technical tools : Node.js, React, GitHub, VS code, Heroku, PostgreSQL, Netlify, Kaggle, Vercel, Replit, Jupiter, Seaborn, Tailwind CSS, next.js... I love spending my time learning and challenging myself with new experiences.

## Responses 13

Markdown supported · ⌘↵ to post

[Developer Avocado](https://hashnode.com/@AvocaDEV)

[Jul 6, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62c5e24cc8efe473b8fe4a9b)

It was great article [Diala Abul-Khail](https://hashnode.com/@DialaBK), I really enjoying your writing style 🥰

[Jun 28, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62bb9231c2f205e7cdb18f4a)

Nice article! But I don’t understand how you manage the form? Could you explain? Thanks.

Hubert

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jul 31, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62bb9231c2f205e7cdb18f4a#reply-62e6405b430bd1d04a8434d6)

You can use EmailJS as a tool to send emails from react/javascript to your acutal email.. all you have to do is to sign up here: [emailjs.com](https://www.emailjs.com/) and link your account with your email

now create a new template in EmailJS that matches your contact inputs.. (this is how you are going to receive data)

then use this command to install emailjs with npm: `npm install @emailjs/browser@3.6.2`

after that you can add this to your contact component as a handler function for the form:

import emailjs from "@emailjs/browser";

function sendEmail(e) { e.preventDefault(); emailjs.sendForm( "your service id --> from your Emailjs profile", "your template id --> from your Emailjs profile", e.target, "Your personal id from Emailjs profile" ); }

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jul 31, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62bb9231c2f205e7cdb18f4a#reply-62e64072430bd1d04a8434dc)

[github.com/dialaabulkhail/my\_portfolio/blob/main/…](https://github.com/dialaabulkhail/my_portfolio/blob/main/pages/components/Contact.js)

[Ibrahim Nergiz](https://hashnode.com/@nergiz)

[Jun 25, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b77b3692447c9aed5b8840)

Nice article [Diala Abul-Khail](https://hashnode.com/@DialaBK) 👏👏

[Miguelángel Cabrera](https://hashnode.com/@mcabreradev)

[Jun 22, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b365c186d22092a7546f89)

Great job!.. I like your post a lot!!

[I AM Matengo](https://hashnode.com/@CApostle)

[Jun 21, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b1e3400572b078ae51691f)

Thank you for sharing such fantastic content...

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 21, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b1e3400572b078ae51691f#reply-62b1fc210572b078ae516cf7)

Thanks!

[I AM Matengo](https://hashnode.com/@CApostle)

[Jun 22, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b1e3400572b078ae51691f#reply-62b288c10572b078ae5178e4)

What are some of the resources you used in your learning journey from the beginning? [Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jul 31, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b1e3400572b078ae51691f#reply-62e6410a430bd1d04a843503)

[Davis The Coding Apostle](https://hashnode.com/@CApostle)

Hello Davis, you can check my readings repo,, it has most of the resources I used

[dialaabulkhail.github.io/Reading-Notes](https://dialaabulkhail.github.io/Reading-Notes/)

[Ahmed Essam](https://hashnode.com/@Hanaffi)

[Jun 20, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b04d7882adbb66f3a0b142)

Awesome article! Looking forward to seeing your post on Remix. Feel free to drop a msg if you want to collaborate on it :)

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 21, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b04d7882adbb66f3a0b142#reply-62b1fc1994003a788976e90e)

Thank you!!

[Ephraim Duncan](https://hashnode.com/@dephraiim)

[Jun 20, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62b01dbc0924134a8048b9b4)

This is really great👏

PS: When you are commenting bash code, you use `#` and not `//` as you did in the create Next.js app codeblock.

[Benjamin Rukundo](https://hashnode.com/@rukundob451)

[Jun 20, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62aff8f3d8afe74aa51fe8cc)

Awesome article, everyone should surely give it a read [Diala Abul-Khail](https://hashnode.com/@DialaBK).

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 20, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62aff8f3d8afe74aa51fe8cc#reply-62b0380b82adbb66f3a0ad5b)

Thank you!

[Simon Egersand 🎈](https://hashnode.com/@prplcode)

[Jun 19, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62aee1550924134a80489201)

Great article! Thanks for sharing ⭐

Just so you know, the links in the **Recommended Extensions** are broken.

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 19, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62aee1550924134a80489201#reply-62aee8650924134a804892cd)

Thanks for the note, It's fixed now!

[Shubham Kumar Singh](https://hashnode.com/@shubhamsinghbundela)

[Jun 19, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62ae68d4d8afe74aa51fbc87)

Thank you [Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Peter Witham](https://hashnode.com/@pwitham)

[Jun 18, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62ae5ce30924134a80488858)

A really great easy-to-follow example, thanks [Diala Abul-Khail](https://hashnode.com/@DialaBK) I'll be spinning this up locally to play with and explore.

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 19, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62ae5ce30924134a80488858#reply-62aee87dd8afe74aa51fc71c)

Thanks a lot!

[Agrit Tiwari](https://hashnode.com/@agrittiwari)

[Jun 18, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62adf8b7d8afe74aa51fb211)

With NextJS, I always thiink about <Link/> tag. For one page, you've demonstrated href ='#name' and referenced id for that div on the same page. Thanks for clearly showing that.

[Utkarsh Nagar](https://hashnode.com/@Utkarshn10)

[Jun 18, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62adefd10924134a80487e10)

Very well written Dialia 👏!!

[Diala Abul-Khail](https://hashnode.com/@DialaBK)

[Jun 19, 2022](https://hashnode.com/posts/steps-to-build-a-professional-nextjs-portfolio/62adb55ed8afe74aa51faa62/comment/62adefd10924134a80487e10#reply-62aee8310924134a804892b6)

Thank you!