How to Build and deploy an Enterprise Portfolio of Developers using Next.js (r) (r)

A developer portfolio comprises a selection of work samples of work and work projects which demonstrate your capabilities as well as experience. An impressive portfolio can set you apart from other candidates to get a job. It's not only about it. A portfolio can also be a useful tool for networking and ensuring that you're keeping track of your education and ultimately building yourself into an professional in your field.

This is a live presentation that shows the portfolio of developers created using Next.js. It is available on the development project's repository on GitHub if you'd like to take a closer look or even fork the project. Next.js Portfolio-building project that I developed. The portfolio starter contains the easy codes, like the designs, the Font Awesome CDN link, pictures, and the basic structure.

Requirements/Prerequisites

It's an "follow along" style of tutorial. It is easier to program If you're using:

• A basic understanding of React along with Next.js

Why is there a reason for Next.js?

• Create static websites: Next.js can build static sites that are speedy, easy to deploy, and require minimal maintenance, similar to the portfolio site for developers which we'll create throughout this tutorial.
• creating dynamic websites: Next.js allows you to build dynamic websites that will change their content in response to users' interactions, as well as on server-side data download.
• improving the performance of websites by using server-side rendering, Next.js could improve web website speed, through reducing the amount of time required for the website to load.
• The building of an e-commerce sites: Next.js is well-suited to build e-commerce sites which require rendering on the server in order to achieve faster speed and SEO.
• The advancement of Progressive web-based applications (PWAs): Next.js lets you develop PWAs which are web-based apps which operate as native applications which can be installed on the devices of users.

How to Setup The Environment For Next.js Development Environment Next.js Development Environment

npx [email protected]est my-portfolio

An alert will pop up informing you of the confirmation needed for the other dependencies. Once you've confirmed that, you'll be capable of running an npm-based operation for your application to be accessible at the address of your localhost 3000.

If you make a Next.js project by using the Npx command, it will automatically organizes the folder structure using the directories listed as the main ones:

1. pages The folder that is in it contains the pages for the application that are routed automatically based on their file name. For example, pages/index.js would represent the homepage, and pages/about.js would be the pages/about.js page.
2. public This folder includes static files that are provided directly, like fonts, images and images and other sources.
3. components The folder is used for optional purposes and contains reusable UI components that are able to be reused across multiple various applications.
4. styles : This folder is not required and also contains the global styles that may be utilized across applications.

The various types of files and directories are also generated based upon the particular configuration or features, but these are the main directories in the base Next.js project.

The website that we build will be displayed on our index page (our single-page site) It will have components for various sections , including the hero aboutthe projects, along with other sections.

How do you create a responsive Portfolio of Developers Using Next.js

A typical portfolio consists of the following components:

• Navbar component
• Hero component
• About component
• Skills component
• The project is a key component
• Contact component
• Footer component

It is recommended that the Navbar and Footer components should be displayed on every page when the portfolio has more than one page. It is possible to accomplish this with the help of Next.js in order to design the layout.

Definition of Layouts using Next.js

In Next.js Layouts are the means to define a consistent structure of components which appear on every webpage of a site. The layout typically contains elements such as a header, as well as a navigation menu and a footer displayed across all site pages.

Create a components folder within the Src (source) directory in the Next.js project. Then, you need to build your Navbar and Footer component that will be used by the Layout module.

The following you will find the Navbar component of Navbar.jsx:

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

The Footer component can be found contained in Footer.jsx:

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

Notification: For the Font Awesome icons to work you have to install Font Awesome to your project or utilize its CDN. Incorporate the CDN link to your _document.js file like the following:

/pages/_document.js pages/_document.js import Html, Head NextScript and Main from  the 'next/document the default document function'. Export document() return ( );

Note: If you link to an alternative version of Font Awesome via the CDN, you will need change it over the proper high-quality hash to correspond to the version that you're using.

After creating all the necessary elements for your layout you can create the Layout component and include it on your webpages by wrapping the content of your pages in it.

Layout can create a prop with code that allows you access to the information on Your Next.js pages.

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

Now, you are able to create the Layout component, which contains the Footer and Navbar along with the children props positioned properly. It is now possible to include the Layout component on your webpages using wrapping the content of the page in the layout. The Layout component will be included in your _app.js file.

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

It's time to start designing your portfolio of developers. For this portfolio, we are focusing more on Next.js and the best way to publish your website to . This means that you can to import the stylesheets from your styles/globals.css file into your application. When you start your portfolio website in development mode then you'll be able view the layout of your application.

The time has come to make sure your portfolio website is updated with to include the right content.

Building Portfolio Components

It is now possible to create separate parts for each area of your portfolio as a developer. All these components will be imported into the index page for the Next.js project. The components will show when you start your project with NPM run dev.

The Hero Component

The Hero element is the initial section beneath the Navbar Its main purpose is to catch the attention of users and provide an understanding of what the goal of the site or app is about.

 / / components/Hero.jsx Import image from "next/image";Const Hero = () *export to the standard Hero 

In the above code in the code above, you will notice it is Next.js is the Next.js image component replaces using the HTML img tag. The reason for this is that it includes the image because it enables an automatic image optimization and scaling, as well as various other.

Within the About section, you'll also notice that an easy line of description for the creator was included along with the social icons of Font Awesome to add social hyperlinks.

This is what it should look like the Hero component should look like:

It's possible to include additional information to the Hero component, alter the style of the styles/globals.css file or maybe even rework the entire section depending on your preference.

The About Component

The About section is designed to provide readers or those who browse your portfolio, more information about you in the length of the paragraphs you want. If you'd like to share your personal story, it's possible to create a dedicated "About Me" page. You can add a button to the page to find out more about you.

/"/ components/About.jsx Import Image from "next/image" //const About = () => Return ( About me As an experienced software developer, I've always found myself searching for simple, effective solutions to complicated problems. I've built a solid foundation in the area of software development with particular attention to web-based technologies such as HTML, CSS, and JavaScript. I am a fan of working on the front and back end of the applications. I continuously seek out methods to improve efficiency, enhance the userexperience and assure the highest quality of quality code. Over the course of my career, worked on various tasks that range from simple static websites as well as more sophisticated enterprise-level software. I have experience using a range of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I'm always lookingto discover and experiment with new technologies and am always seeking out new ways to enhancemy skills and expertise. > > The ) export the default About. The code below has two paragraphs on the creator as well as an image of the developer's name. The About section is the About component. You are able to always tweak your style to include additional images, as well as other information. The Skills Component The skills component is designed to show how developers are using one of the top technologies or the techniques they used in the past. The Skills component can be made it easier to handle with the help of creating an array inside an external file, and after that, uploading it to the skill component. This way, you'll be able to repeat the loop instead of duplicate similar code. // components/Skills.jsx const Skills = () => return ( Skills HTML CSS JavaScript React Node Python ) export default Skills; In the code above, a card is created for each skill. Every card is embellished with the symbol of the technology used by font-awesome, as well as the brand name of the technology. You can also add more styles and tweak the codes to make the design unique and appealing. It is the Projects Component The component of projects is among the most important element of a portfolio for a developer. These projects provide tangible proof of the developer's skills and capabilities and demonstrate their capacity to put their expertise into actual issues. The Projects component is possible to create an array that holds the details of each project and import it into your component in order to not have to write these specifics. We'll create a data.js file that stores the project's data array. It can be stored within the folder of components , or within the folder pages/api. This demonstration put it into the components folder. The array contains the object of the project. It contains the title of the project, description and GitHub hyperlink. /components/data.js components/data.js export projectData const ID: 1, title: 'Todo List App' Description: A simple Todo List app built using JavaScript. The data is stored in local storage. Users can list their tasks and then tick as they finish their tasks. ', 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 allows users to have an extensive collection of the books they're studying or finished 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 are automatically copied onto the 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. The only thing it covers is the home page of Twitter UI. It's great to get started using TailwindCSS as it will assist you with understanding basic concepts. ', gitHubLink: 'https://github.com/olawanlejoel/TwitterUI-clone', , ]; It is now possible to develop a component for your project to benefit from this data by looping through easily. There are many JavaScript method of iteration however, for this specific tutorial, it is possible to utilize the JavaScript map() methods for examining the array of data following the import of data to Projects. 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 code above you've successfully prevented repetition by looping through the array to output each project into the Projects component. It makes it simpler to manage and create additional projects. The Contact Component The reason you should create the portfolio of the developer is to make sure that clients who are interested in the service have the opportunity to reach them. them. Another option is to allow people to send you an email. This is precisely the function we'll provide in this Contact element. // 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. In the event that I wish to chat with you or have a query, I'll be sure to contact you! Cheers! Speak to us! ) Export the default contact; Enter your email address into the tag. It is designed in the way that hitting it launches an email app that sends a message to the user. Contact component It is now feasible to design all elements for your portfolio. What you need to do is to add them to the page index. Navigate to pages/index.js file -that is the one generated as default and change it using this code. // 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 handled with the Next.js Image component. When deploying your application to production using the Next.js Image component, it is strongly suggested that you create sharp. This can be done via your terminal, ensuring you're within the project's directories after which you can execute the command: npm i sharp It can now be installed your app, and your images will work flawlessly with the complete optimization that Next.js offers. How to deploy the Next.js Application to When you're pleased with the portfolio you've created, which highlights the best work you've done on development as well as important data You're likely to want to show it off to others, wouldn't you? Let's look at ways to do it by making use of GitHub along with the App Hosting Platform. Upload your code on GitHub Upload your code on GitHub by following the steps below: The first step is to create a brand new repository (just like a local folder that stores the sources of code). You can do this by signing in to your GitHub account by clicking the plus button in the upper right-hand corner of the screen and selecting New repository from the dropdown menu, as shown in the image below. Create a new GitHub repository. The next step is to create a repository name, add an explanation (optional), and choose the option to make your repository to be public or private. Click the Create button. Now you are able to move your code to the newly-created GitHub repository. All that is needed to upload your code using Git is your repository's URL. You can locate it in the main repository page, under the Clone or download tab as well as on the step-by-step instructions to follow when creating the repository. Access your GitHub repository's URL. The most efficient method is to make sure you're ready to upload your code through an interface or command prompt before going to the directory which includes your code. Follow these steps to start the process of creating your own local Git repository. This is the Git process. Then, incorporate your code into your local Git repository by using this commands: Add Git . This command will add every document in the directory as well as subdirectories within it to the brand new Git repository. You can now commit changes by via the below command by committing to git using the -m "my very first commit" Be aware that you can replace "my initial commit" by a concise paragraph describing the changes you've made. Last but not least, put your code on GitHub via these commands: Remote Git Include origin URL, [repository URL] git push --u origin master Make sure you substitute "[repository URL"[repository URL]" with the URL for your personal GitHub repository. Once you've completed all of the above steps the code you've created will be posted to GitHub and available via your repository's URL. You can now relocate your repository's content to . The Deploy Your Portfolio can be set up in just moments. You can start by visiting My dashboard and logging in or create an account. My dashboard, sign in or create an account. Click Applications to the left of the sidebar Simply click "Add service" In the drop-down menu, choose the Application as you wish to deploy an Next.js application to . Create an application project in My A The modal window will open which you can select the repository to which you want to publish. Automatically detect the start command. At this point, the application will be in the process of deployment. After a few hours, you will receive you will receive a link for accessing the deployed version of the application. In this case, it is: https://-developer-portfolio-ir8w8..app/ Deployment link on Notice: Automatic deployment was disabled, and it will automatically re-deploy the application every time you update your codebase and push the changes onto GitHub. Summary There are numerous advantages when using Next.js for web-based projects. It's the first one to deliver optimized performance straight out of the box including features such as pre-fetching and code splits which help speed up loading time on pages. Furthermore, it gives an easy development environment to React developers. It also supports well-known tools such as stylized components as well as React hooks. Next.js can also offer a wide range of deployment options, ranging starting with traditional servers to more modern, serverless platforms such as  the's. This allows developers to choose the deployment option that best matches their requirements, while profiting of the framework's optimizations to improve performance, as well as other advantages. The next step is to include more options on your new portfolio site. Some ideas to help get your creative energy flowing Include additional pages that give detailed information, include blogs that use MDX and implement animation. Tell us about your work or experiences in a comment below. Easy setup and management of My dashboard. My dashboard 24/7 professional assistance Google Cloud Platform hardware and network, that is powered by Kubernetes for maximum performance. Enterprise-level Cloudflare integration to provide performance and security. Reaching out to a worldwide audience with up to 35 data centers, as well as around 275 POPs in all over the world.

Article was first seen on here