How to Create and Implement the Developer Portfolio using Next.js - (r)

The developer's portfolio can be described as an array of work samples projects and work that demonstrate your abilities and experience. Your portfolio is a great way to set you apart against other candidates when you hunt for jobs. It's not just it's that. Portfolios can be beneficial for networking and also ensuring that you're keeping track of your education as well as making yourself appear as an authority in the field.

Live examples of how to build a developers portfolio which you'll create using Next.js. The portfolio is accessible through the website's GitHub repository for more information. Have a closer look, or make a fork of it Next.js portfolio beginning project I developed. It contains simple codes, such as the style and Font Awesome CDN link, pictures, and the basic layout.

Requirements/Prerequisites

This is an "follow along" type of tutorial. It's easier to learn how to instructions if you've:

• Basic understanding of React and possibly Next.js

What is the reason behind Next.js?

• Building static web pages: Next.js can build static sites that are speedy, easy to deploy and require minimal upkeep like the developer portfolio website which we'll construct throughout this guide.
• Web pages that are dynamic: Next.js allows you to build dynamic websites that change content in response to user interactions or server-side data downloading.
• improving website performance Utilizing rendering on the server side, Next.js can improve website performance by decreasing the time it takes for a page to load.
• The development of online stores: Next.js is well-suited to create e-commerce websites that require server-side rendering in order to provide an improved search engine optimization and speed.
• Building progressive web applications (PWAs): Next.js allows the development of PWAs which are web applications which function as native applications that are installed on a user's device.

How Do You Set Up The Environment For Your Next.js Development Environment

npx [email protected] my-portfolio

A prompt will appear asking for confirmation of additional dependencies. Then, you can begin npm run dev to make the app available on the localhost address 3000.

In the process of creating the Next.js project using the npx command, it automatically generates one's folder structure by making use of the directories listed below:

1. webpages The directory in this case contains pages of the application which are routed by the application according to their file names. For example, pages/index.js would be the homepage page, in contrast, pages/about.js would represent the page on.
2. public The folder consists of static files that may be downloaded straight from the internet, such as fonts, images, and other assets.
3. components: This folder can be used for other purposes and includes the reusable UI components that could be utilized across applications.
4. styles. The styles folder can be used to create other styles. It also comes with global styles which can be used across different applications.

Other directories and files may be created depending on the specific configuration and function, but they're principal directories within the foundation Next.js project.

In this guide, all of the components that we build will appear at high-up on the webpage (our single-page site), and you will find components for different sections , including the hero information, project, as well as other components.

How To Build A Responsive Developer Portfolio using Next.js

A typical portfolio comprises these components:

• Navbar component
• Hero component
• About component
• Skills component
• The Projects section
• Contact component
• Footer component

It is expected that the Navbar and Footer components will be shown across all pages if the portfolio contains many pages. It is possible to accomplish this by using Next.js by creating a design.

Definition of Layouts using Next.js

In Next.js Layouts can be used to provide a uniform structure to the elements displayed on each web page. Layouts typically contain elements such as a header along with a navigation menu and a the footer which is shown throughout the pages.

Begin by creating an element folder inside the Src (source) directory within the directory of your Next.js project. After that, you'll need to make your Navbar Footer and Footer components for use with the Layout module.

It is the Navbar component in Navbar.jsx:

// components/Navbar.jsx import Link from "next/link"; const Navbar = () => return ( Joe's Portfolio Resume ) export default Navbar;

The component Footer is located contained in Footer.jsx:

// components/Footer.jsx const Footer = () => return ( (c) new Date().getFullYear() Joel's Portfolio > ) export default Footer;

Note: For the Font Awesome icons to work , you have to install Font Awesome within your application or use its CDN. It is possible to add the CDN hyperlink to the _document.js file like as follows:

/http:// pages/_document.js import Html, Main, NextScript, and Head in the document's export to 'next/document' default function() Return ( );

NOTE: If you link to a different version of Font Awesome with the CDN It will be necessary to change it over the appropriate authenticity hash for the release.

Once you've created necessary elements of your layout, you'll be able to create the Layout component itself and incorporate it into the pages you have created by wrapping your pages' contents inside it.

The Layout component will accept children props with a code, which allows users to gain access to the information that you wish to display on Your Next.js pages.

// components/Layout.jsx import Navbar from './navbar'; import Footer from './footer'; const Layout = ( children ) => return ( children > ) export default Layout;

The Layout element that houses the Navbar as well as the Footer along with the children props properly placed. You can now include the Layout component on your pages by wrapping contents of your page within it. The process is done within your _app.js file.

// pages/_app.js import '@/styles/globals.css'; import Layout from '../components/layout'; export default function App( Component, pageProps ) return ( ); 

Now you have succeeded in creating a design for your developers' portfolio. This portfolio will focus in more detail on Next.js and the best way to implement it on your website . Then, you can import the styles styles that you've created in the styles/globals.css file into your project. If you open your portfolio's site in dev mode, you will observe the layout for your application.

Now is the time to give your portfolio website with proper content.

Building Portfolio Components

Now, you can build separate components for each section of your portfolio as a developer. All of these components will be imported to the index page for your Next.js project. This means that they appear whenever you run your project by using NPM run development.

The Hero Component

The Hero component is the initial component that sits below the Navbar Its primary function is to draw the eye of the user and to give the impression of what this application or site is about.

/components/Hero.jsx components/Hero.jsx import Image from "next/image" //const Hero is () *Export the default Hero

In the above code, you will notice that you will notice that Next.js is the Next.js image component is utilized instead of the HTML image tag. This is to include images as it allows for automated photo optimization, resizing, and resizing, and many more.

In the About section you'll notice that the simple introduction of the developer was included along with the social icons of Font Awesome to add social hyperlinks.

This is the way the Hero component should be:

You can add extra content into the Hero component. You can also modify the styles in the styles/globals.css file or maybe re-create the area to your liking.

The About Component

The About section is designed to offer readers or people who visit your portfolio details about you, with as many sentences as you'd prefer. If you wish to tell your story then you could make a separate "About Me" page. Add an option on the page for more information about you.

// components/About.jsx import image of "next/image" *const About = () = = return ( return ( About me About Me"flex-about""p" > engineer I've always had a love in the development of elegant and efficient solutions for difficult issues. I'm proficient in the area of software development with an emphasis on web-based technologies such as HTML, CSS, and JavaScript. I am a fan of developing the front-end as well as the back-ends of software applications. I'm always seeking ways to optimize efficiency, improve the userexperience and ensure the best level of quality code. Throughout my career I've participated in various projects including static web pages, to morecomplex enterprise-level applications. I'm adept at working with various software tools to develop and frameworks like React, Angular, Vue.js, Node.js, and Laravel. I am always eagerto learn and discover new technologies and am always seeking out opportunities to increasemy abilities and knowledge. >>> (/div>*) export the default About code below contains two paragraphs of text on the developer along with an image of the developer. The About section should look in the About section: About component You are able to tweak the styles to add pictures and more. Skills Component Skills Component The skills component will highlight the fact that the developer has the latest technologies or methods that they have employed in the past. The Skills component can be made it easier to handle by using the creation of an array on an external file. Then, import into the components for skills. This way, you'll be able to go on looping without creating duplicates of similar code. // components/Skills.jsx const Skills = () => return ( Skills HTML CSS JavaScript React Node Python ) export default Skills; In the code above it is possible to create cards to represent each skill. Each card displays the font-awesome technology icon as well as the name of the technology. Additionally, you can change the style or alter the code to make it more attractive and distinctive. Projects Component Projects Component The project component is one essential elements in an individual's portfolio. These projects provide tangible evidence of the developer's abilities and capabilities and demonstrate the capacity of putting their knowledge into practical problems. Projects component It is possible to make arrays for storing every project's information and add it to your component so that you don't have to hardcode these information. We will create an data.js file in order to store the array of project data. It is stored either within the folder of components or in the pages/api folder. In this example, I will store it in the component folder. It will include the object of the project. It holds its name as in addition to the description, as well as GitHub hyperlink. /* components/data.js export const projectData = [ id: 1, title: 'Todo List App', description: A simple Todo List app built using JavaScript. The information stored locally is kept in local storage. This application allows users check their targets and record the tasks as they complete them. ', gitHubLink: 'https://github.com/olawanlejoel/Todo-List-App', , id: 2, title: 'Books Library App', description: 'A simple Book Library App built with JavaScript. This app lets users maintain excellent lists of the books they're either studying or are currently reading. ', gitHubLink: 'https://github.com/olawanlejoel/Book-Library', , id: 3, title: 'Quotes Generator', description: 'Helps you generate quotes from about 1600 quotes written by different authors . Quotes automatically copy into your clipboards. ', gitHubLink: 'https://github.com/olawanlejoel/random-quote-generator', , id: 4, title: 'Password Generator', description: 'Helps you generates random passwords, you can select what you want your password to entail and also you can copy generated password to clipboard. ', gitHubLink: 'https://github.com/olawanlejoel/Password-Generator', , id: 5, title: 'Twitter UI Clone', description: 'Simple Twitter UI clone built with TailwindCSS and Vue Js. It only covers the main page of the Twitter UI. It's a great method to get started with TailwindCSS as it allows you to learn the basic concepts. ', gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone', , ]; It is now possible to create a project component to make use of this data, using a looping. There are a variety of JavaScript iteration method but for this instance you could make use of the JavaScript mapping() method that allows you to browse through the data array following the import to The Projects component. // components/Projects.jsx import projectData from './data.js'; const Projects = () => return ( Projects projectData && projectData.map((project) => ( project.title project.description )) ) export default Projects; In the example code above you've kept from repeating yourself by looping the array and outputting each project into the Projects component making it easy to manage and create more projects. Contact Component A different reason why a developer should have a portfolio is to allow potential customers to get in touch with the developer. One way would be for individuals to reach out to the developer via email. That is exactly what we'll do with this Contact component. // components/Contact.jsx const Contact = () => return ( Get In Touch If you want us to work together, have any questions or want me to speak at your event, my inbox is always open. Whether I just want to talk with you or have a chat, I'll do my best to respond to you! Cheers! Say Hi! ) export default Contact; Insert your email address into the tag, such that it launches an email app that will send a message to the email address you have entered. Contact component Now you have completed the process of creating every element of your portfolio application. The next step is to include them on the page index. Browse through the pages/index.js document - which is the one created as default -- then then change its code by adding the following. // pages/index.js import Hero from '@/components/Hero'; import About from '@/components/About'; import Skills from '@/components/Skills'; import Projects from '@/components/Projects'; import Contact from '@/components/Contact'; import Head from 'next/head'; const Home = () => return ( Joel's Portfolio > ); ; export default Home; Image optimization is performed using the Next.js Image component. Before deploying an application into production, that uses using the Next.js Image component, it's suggested that you install Sharp. This is accomplished using your terminal. Be sure to be in the project's directoryand using the following command: npm i sharp It is now possible to install your app, and your images will work thanks to the highest level of optimization by Next.js provides. What is the best way to install the Next.js Application Once you're happy with your portfolio showcasing your best achievements in development along with important details, you'll likely be eager to show it off with other people. We'll look at ways to do this using GitHub and the Application Hosting platform. It is possible to push your code to GitHub and upload your source code on GitHub using the following steps: Create a brand new repository (just as a local directory to store your files). This can be done by signing in to your GitHub account and then pressing the plus button at the upper-right corner of the page and selecting the option of creating a new repository from the dropdown menu. The procedure is illustrated in the screenshot below. Create a fresh GitHub repository. The next step is to give your repository a name and an explanation (optional) as well as select the option to make your repository to be publicly accessible or closed. Click"Create. You will then be capable of transferring your program to the newly-created GitHub repository. What you require to upload your code using Git is the URL of your repository that can be found in the main repository page under the Clone or download button, or at the end of the process following the creation of a repository. Join your GitHub repository's URL. The most effective method to accomplish this is to ensure that you are ready to publish the code you wrote by entering your console, or command prompt, and then going to the directory that's the base of the project. Use the following procedure to start your Git repository local to your computer: Git repository: Git init It is now possible to add your code to the local Git repository with the command git add . The above command will add all files in the currently-running directory and its subdirectories to the new Git repository. Now, you can make changes permanent with the command below: Git commit"my initial commit "my very first commit" Note: You can replace "my very first commit" by your own short paragraph describing the changes you made. Last, upload your code into GitHub via the following commands remote git Add origin URL [repository URL] git push -u origin master Note: Be sure to replace "[repository URL" by the URL of your personal GitHub repository. Once you've finished these steps, your file is pushed to GitHub and accessible through the URL of your repository. Now you can transfer your repository's information to . Set up Your Portfolio for the process will only take a few minutes. Begin by going to your My dashboard and sign to your account, or register an account. Choose Applications on the left of the sidebar Simply click "Add service" in the dropdown menu, select App because you want to deploy the Next.js application on . Create an application project in My A The pop-up is displayed where you are able to select the repository you would like to publish. Automatically detect the start command. After the application has started in the process of deploying. In just a couple of hours, an email will be sent to allow access to the deployed version of your application. In this case, it is: https://-developer-portfolio-ir8w8..app/ Deployment link on Notice: Automatic deployment was activated, which means that it automatically deploys the application every time you make changes to your codebase . Then, it pushes it to GitHub. Summary There are a number of advantages developers can consider about using Next.js for projects that are web-based. It's the first one to deliver optimized performance straight out of the box including features such as pre-fetching and code splitting, which can help decrease page load times. In addition, it provides an intuitive development environment to React developers. It supports well-known tools like styled components as well as React hooks. Next.js is also used to create a range of deployment alternatives, ranging from traditional servers-based hosting , to modern servers such as. It allows developers to select the deployment option that best matches their needs and benefit from the framework's optimizations for performance in addition to other benefits. The next step is adding new options to the new website for your portfolio. There are a few options to get your imagination juice flowing: add pages that provide more details, integrate a blog with MDX, implement animation. Share your ideas or experiences in the comments area below. Simple setup and administration within My Dashboard. My dashboard 24 hour expert assistance The top Google Cloud Platform hardware and network driven by Kubernetes to ensure maximum scaling. An integrated Cloudflare for enterprises to improve speed and security The reach of the global user base is over 35 data centers, as in addition to over 275 PoPs around the globe

Article was posted on here