Why Also, Next.js helps us build blazing-fast websites along with benefits such as Image optimization.<\/p>\n\n\n\n Why Not only that, it comes with amazing support for responsiveness. For example Finally, we are going to deploy the application on Vercel<\/strong>. Vercel gives us an easy way to deploy our application with CI\/CD. The code is pushed to a remote GitHub repository and with every push, it’s deployed.<\/p>\n\n\n\n The website includes what I consider to be the absolute minimum you should have in your portfolio website, along with some extra features that are cool to have.<\/p>\n\n\n\n We are going to include all the necessary pages you should have in your portfolio website, such as:<\/p>\n\n\n\n The entire website is divided into components \u2013 small chunks of reusable code that you can use anywhere on the webpage. The folder structure is quite simple and self explanatory:<\/p>\n\n\n\n After creating Dark mode support is provided by a _app.js<\/strong><\/p>\n\n\n\n To toggle the theme between light mode and dark mode, we need a button. You can reuse this button anywhere in the application, but we are going to integrate it in the Navbar.js<\/strong><\/p>\n\n\n\n Once the button is clicked, the theme changes. Pretty cool, right? ?<\/p>\n\n\n\n The hero section lets you grab people’s attention. If you do it right, it can help you land your first job.<\/p>\n\n\n\n I’ve used The good thing about this effect is that the end-user immediately pays attention to the text that’s highlighted. You can put your best foot forward here and tell them WHO you are and WHAT you do.<\/p>\n\n\n\n The code for Here, I’ll create a custom component called RainbowHighlight.js<\/strong><\/p>\n\n\n\n Hero.js<\/strong><\/p>\n\n\n\n Fetching repositories with the GitHub API<\/a> is quite easy.<\/p>\n\n\n\n The GitHub API comes with a provision to fetch the repositories with descending Once we fetch the latest repository, we So the entire function looks like this:<\/p>\n\n\n\n getLatestRepos.js<\/strong><\/p>\n\n\n\n Once the data is fetched from the function, we can then use it inside of our React Component There is a small problem here \u2013 the GitHub API provides only a limited number of calls per IP address.<\/p>\n\n\n\n To resolve this issue, one can create a GitHub application and generate I’ve kept the projects section as simple as possible with a huge image area, because the recruiter \/ end-user is most interested in seeing what you’ve done. If it looks good, you already have an edge.<\/p>\n\n\n\n I’ve divided the page into Tailwind The image container contains a header text that displays the project’s name and a number at the bottom.<\/p>\n\n\n\n The hover animations on the images are subtle. The image scales slowly to gather the user’s attention. On click, it takes the user to the live website \/ GitHub repository of the project.<\/p>\n\n\n\n I took the contact section directly from the Tailwind Master Kit<\/a>, which is a components and templates marketplace for Tailwind web app projects. I didn’t want spend more time styling a contact form myself and used some help.<\/p>\n\n\n\n The component is absolutely free and you can embed it into Tailwind related websites easily.<\/p>\n\n\n\n Contact.js<\/strong><\/p>\n\n\n\n Deploying the application is fairly simple and just takes 8 simple steps.<\/p>\n\n\n\n This portfolio site will give a recruiter or visitor everything they’re looking for if they want to learn more about you and your work. The goal of your portfolio should be to showcase your skills in the best way possible.<\/p>\n\n\n\n Also, we’ve built the site with The website uses The components are granular and each serves its own purpose. The folder structure is simple and easy to understand.<\/p>\n\n\n\n You can customize the website in any way you like – I’ve open sourced it and the code is linked to the GitHub repo below.<\/p>\n\n\n\n My personal website<\/a> has helped me land interviews at big tech companies and it is one of the main reasons I’ve been able to get a job (along with practicing on freeCodeCamp and learning how to code).<\/p>\n\n\n\n I really enjoyed building this website. If you liked it, leave a star on the GitHub repo and help spread the word. \u2b50\ufe0f<\/p>\n\n\n\n Source Code<\/a> If you’re a web developer, it’s important for you to have a personal portfolio website \u2013 especially when you’re applying for jobs.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[161,189],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2281"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2281"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2281\/revisions"}],"predecessor-version":[{"id":2282,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2281\/revisions\/2282"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Next.js<\/code>? Because it is a React framework with Server-Side Rendering<\/code>, which is good for SEO (Good for us if we get found on Google, right?).<\/p>\n\n\n\ntailwindcss<\/code>? Because TailwindCSS is a framework which reduces a lot of styling efforts. It has low level CSS classes that you can directly embed into the HTML code.<\/p>\n\n\n\n<div className=\"text-sm md:text-xl\"><\/div><\/code> signifies that text will be small<\/code> on smaller screens and xl<\/code> on medium to large screens.<\/p>\n\n\n\nPortfolio Site Features<\/h2>\n\n\n\n
![\"websitegif-1\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/websitegif-1.gif\")
<\/figure>\n\n\n\nDark Mode<\/code> – Comes with dark mode support. Toggle the mode button to switch between dark and light mode.<\/li>Built with Next.js<\/code> – The website is built with Next.js which comes with awesome features out of the box like Image Optimization and SEO support.<\/li>Customizable styling<\/code> – Using TailwindCSS, I built this website in such a way that you can customize primary colors and change the look of your website according to your needs.<\/li>Custom Meta Component<\/code> – Every page is wrapped with a Meta Component tag which you can use to provide meta information for every separate page that you create.<\/li>Responsive Design<\/code> – Pages look beautiful on all the devices – desktop, tablet, and mobile.<\/li><\/ul>\n\n\n\nPortfolio Pages We’ll Build<\/h2>\n\n\n\n
Homepage<\/code> – A landing page for the visitor. This is what they’ll see when they land on your website.<\/li>About<\/code> – A brief intro that includes what you do, your technical skills, and your social links.<\/li>Experience<\/code> – A history of your work, your personal projects that you’ve undertaken, and your relevant projects.<\/li>Projects<\/code> – A grid of all the projects you have built.<\/li>Contact<\/code> – A form where the recruiter \/ end-user can reach out to you.<\/li><\/ul>\n\n\n\nComponents and Layouts<\/h2>\n\n\n\n
components<\/code> is where all the components live, like the hero section, navbar, and layouts.<\/li>public<\/code> is where all your static assets go, like images, fonts, and\/or any external script for generating dynamic sitemaps.<\/li>styles<\/code> is where your global styling lives. We will integrate Tailwind’s base library here.<\/li>pages<\/code> is where all your routes live, and it’s one of the best features of Next.js. Just create a new file in the pages<\/code> folder and it’ll serve as a new route.<\/li><\/ul>\n\n\n\nContainer Block<\/h3>\n\n\n\n
<ContainerBlock \/><\/code> is the parent of all the components. It provides a way for the user to have custom meta tags for every page. I designed the layout so that it accepts props as children<\/code> and provides a Navbar<\/code>, <meta><\/code> tags, and Footer<\/code> for every page.<\/p>\n\n\n\nimport React from \"react\";\nimport Head from \"next\/head\";\nimport { useRouter } from \"next\/router\";\nimport Navbar from \".\/Navbar\";\nimport Footer from \".\/Footer\";\n\nexport default function ContainerBlock({ children, ...customMeta }) {\n const router = useRouter();\n\n const meta = {\n title: \"Manu Arora - Developer, Writer, Creator and YouTuber\",\n description: `I've been developing websites for 5 years straight. Get in touch with me to know more.`,\n image: \"\/avatar.png\",\n type: \"website\",\n ...customMeta,\n };\n return (\n <div>\n <Head>\n <title>{meta.title}<\/title>\n <meta name=\"robots\" content=\"follow, index\" \/>\n <meta content={meta.description} name=\"description\" \/>\n <meta\n property=\"og:url\"\n content={`https:\/\/yourwebsite.com${router.asPath}`}\n \/>\n <link\n rel=\"canonical\"\n href={`https:\/\/yourwebsite.com${router.asPath}`}\n \/>\n <meta property=\"og:type\" content={meta.type} \/>\n <meta property=\"og:site_name\" content=\"Manu Arora\" \/>\n <meta property=\"og:description\" content={meta.description} \/>\n <meta property=\"og:title\" content={meta.title} \/>\n <meta property=\"og:image\" content={meta.image} \/>\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n <meta name=\"twitter:site\" content=\"@mannupaaji\" \/>\n <meta name=\"twitter:title\" content={meta.title} \/>\n <meta name=\"twitter:description\" content={meta.description} \/>\n <meta name=\"twitter:image\" content={meta.image} \/>\n {meta.date && (\n <meta property=\"article:published_time\" content={meta.date} \/>\n )}\n <\/Head>\n <main className=\"dark:bg-gray-800 w-full\">\n <Navbar \/>\n <div>{children}<\/div>\n <Footer \/>\n <\/main>\n <\/div>\n );\n}\n<\/code><\/pre>\n\n\n\nContainerBlock.js<\/code>, you can simply wrap your page component in a ContainerBlock<\/code> tag, providing meta tags for title<\/code>, description<\/code>, and image<\/code>:<\/p>\n\n\n\nimport Head from \"next\/head\";\nimport styles from \"..\/styles\/Home.module.css\";\nimport ContainerBlock from \"..\/components\/ContainerBlock\";\nimport FavouriteProjects from \"..\/components\/FavouriteProjects\";\nimport LatestCode from \"..\/components\/LatestCode\";\nimport Hero from \"..\/components\/Hero\";\n\nexport default function Home() {\n return (\n <ContainerBlock\n title=\"Manu Arora - Developer, Writer, Creator\"\n description=\"Building a template with Next.js and Tailwindcss - for FreeCodeCamp users.\"\n >\n <Hero \/>\n <FavouriteProjects \/>\n <LatestCode \/>\n <\/ContainerBlock>\n );\n}\n<\/code><\/pre>\n\n\n\nHow to Enable Dark Mode<\/h2>\n\n\n\n
![\"Screenshot-2021-08-18-at-9.09.35-AM\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/Screenshot-2021-08-18-at-9.09.35-AM.png\")
<\/figure>\n\n\n\nnpm<\/code> package called next-themes<\/code>. The aim is to wrap the parent container with a provider ThemeProvider<\/code> through which the theme<\/code> is available to the children at all times.<\/p>\n\n\n\nimport \"..\/styles\/globals.css\";\nimport { ThemeProvider } from \"next-themes\";\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <ThemeProvider defaultTheme=\"light\" attribute=\"class\">\n <Component {...pageProps} \/>\n <\/ThemeProvider>\n );\n}\n\nexport default MyApp;\n<\/code><\/pre>\n\n\n\n![\"Copy-of-Untitled--6--1\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/Copy-of-Untitled--6--1.png\")
<\/figure>\n\n\n\nNavbar<\/code> so it’s available for the end user at all times.<\/p>\n\n\n\nimport React, { useEffect, useState } from \"react\";\nimport Link from \"next\/link\";\nimport { useTheme } from \"next-themes\";\nimport { useRouter } from \"next\/router\";\n\nexport default function Navbar() {\n const router = useRouter();\n console.log(router.asPath);\n const { theme, setTheme } = useTheme();\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n setMounted(true);\n }, []);\n\n return (\n <div className=\"max-w-6xl mx-auto px-4 py-10 md:py-20\">\n <div className=\"flex md:flex-row justify-between items-center\">\n {\/* Logo \/ Home \/ Text *\/}\n\t\t \/\/ Rest of the code\n <button\n aria-label=\"Toggle Dark Mode\"\n type=\"button\"\n className=\"w-10 h-10 p-3 rounded focus:outline-none\"\n onClick={() => setTheme(theme === \"dark\" ? \"light\" : \"dark\")}\n >\n {mounted && (\n <svg\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n className=\"w-4 h-4 text-yellow-500 dark:text-yellow-500\"\n >\n {theme === \"dark\" ? (\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\n \/>\n ) : (\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\n \/>\n )}\n <\/svg>\n )}\n <\/button>\n <\/div>\n <\/div>\n \/\/Rest of the code\n );\n}<\/code><\/pre>\n\n\n\nHow to Build the Hero Section<\/h2>\n\n\n\n
![\"hero\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/hero.png\")
<\/figure>\n\n\n\nreact-rough-notation<\/code>, a library that dynamically highlights text with different colors and delays.<\/p>\n\n\n\nrough-notation<\/code> is simple: we wrap the text to be highlighted in <RoughNotationGroup><\/code> and <RoughNotation><\/code> tags with additional parameters such as colors and delays.<\/p>\n\n\n\nRainbowHighlight<\/code> which takes in a color and highlights the text enclosed which can be used everywhere.<\/p>\n\n\n\nimport React from \"react\";\nimport { RoughNotation } from \"react-rough-notation\";\n\nexport const RainbowHighlight = ({ color, children }) => {\n \/\/ Change the animation duration depending on length of text we're animating (speed = distance \/ time)\n const animationDuration = Math.floor(30 * children.length);\n\n return (\n <RoughNotation\n type=\"highlight\"\n multiline={true}\n padding={[0, 2]}\n iterations={1}\n animationDuration={animationDuration}\n color={color}\n >\n {children}\n <\/RoughNotation>\n );\n};\n<\/code><\/pre>\n\n\n\nimport React from \"react\";\nimport { RoughNotation, RoughNotationGroup } from \"react-rough-notation\";\nimport { RainbowHighlight } from \".\/RainbowHighlight\";\n\nexport default function Hero() {\n const colors = [\"#F59E0B\", \"#84CC16\", \"#10B981\", \"#3B82F6\"];\n return (\n <div className=\"flex flex-row justify-center items-start overflow-hidden\">\n {\/* Text container *\/}\n\n <div className=\"w-full md:w-1\/2 mx-auto text-center md:text-left lg:p-20\">\n <RoughNotationGroup show={true}>\n <RainbowHighlight color={colors[0]}>\n <h1 className=\"text-4xl md:text-8xl font-bold text-gray-700 dark:text-gray-200 my-2\">\n Developer.\n <\/h1>\n <\/RainbowHighlight>\n <RoughNotationGroup>\n <\/div>\n ....\n ....\n ....\n );\n<\/code><\/pre>\n\n\n\nHow to Fetch the Latest Repositories From GitHub<\/h2>\n\n\n\n
![\"Screenshot-2021-08-18-at-9.09.35-AM-1\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/Screenshot-2021-08-18-at-9.09.35-AM-1.png\")
<\/figure>\n\n\n\nupdated_time<\/code> field, so that we get the latest repositories.<\/p>\n\n\n\n const res = await axios.get(\n `https:\/\/api.github.com\/search\/repositories?q=user:${username}+sort:author-date-asc`\n );<\/code><\/pre>\n\n\n\nsplice<\/code> the array to only take into account the most recent 6 repositories.<\/p>\n\n\n\nlet repos = res.data.items;\n let latestSixRepos = repos.splice(0, 6);\n return latestSixRepos;<\/code><\/pre>\n\n\n\nimport axios from \"axios\";\n\nconst getLatestRepos = async (data) => {\n console.log(\"data\", data);\n try {\n const username = data.githubUsername;\n\n const res = await axios.get(\n `https:\/\/api.github.com\/search\/repositories?q=user:${username}+sort:author-date-asc`\n );\n\n let repos = res.data.items;\n let latestSixRepos = repos.splice(0, 6);\n return latestSixRepos;\n } catch (err) {\n console.log(err);\n }\n};\n\nexport default getLatestRepos;\n<\/code><\/pre>\n\n\n\n<GetReposCard \/><\/code> and pass the parameters accordingly.<\/p>\n\n\n\n<div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto px-10 lg:-mt-10 gap-y-20\">\n {\/* Single github Repo *\/}\n\n {repos &&\n repos.map((latestRepo, idx) => (\n <GithubRepoCard latestRepo={latestRepo} key=\"idx\" \/>\n ))}\n <\/div><\/code><\/pre>\n\n\n\nconst GithubRepoCard = ({ latestRepo }) => {\n return (\n <div className=\"github-repo\">\n <h1 className=\"font-semibold text-xl dark:text-gray-200 text-gray-700\">\n {latestRepo.name}\n <\/h1>\n <p className=\"text-base font-normal my-4 text-gray-500\">\n {latestRepo.description}\n <\/p>\n <a\n href={latestRepo.clone_url}\n className=\"font-semibold group flex flex-row space-x-2 w-full items-center\"\n >\n <p>View Repository <\/p>\n <div className=\"transform group-hover:translate-x-2 transition duration-300\">\n →\n <\/div>\n <\/a>\n <\/div>\n );\n};\n<\/code><\/pre>\n\n\n\nAuth Tokens<\/code>, which we can embed with the GitHub API request and you’ll get more requests per IP address. You can read the documentation here<\/a> for more info about it.<\/p>\n\n\n\nHow to Include Projects in Your Portfolio<\/h2>\n\n\n\n
![\"projects\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/projects.png\")
<\/figure>\n\n\n\ngrids<\/code> of two columns, which breaks on mobile screens into 1 column.<\/p>\n\n\n\n \nimport React from \"react\";\n\nexport default function Projects() {\n return (\n <section className=\"bg-white dark:bg-gray-800\">\n <div className=\"max-w-6xl mx-auto h-48 bg-white dark:bg-gray-800\">\n <h1 className=\" text-5xl md:text-9xl font-bold py-20 text-center md:text-left\">\n Projects\n <\/h1>\n <\/div>\n {\/* Grid starts here *\/}\n <div className=\"bg-[#F1F1F1] dark:bg-gray-900\">\n <div className=\"max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 py-20 pb-40\">\n {\/* Single card *\/}\n <a\n href=\"https:\/\/tailwindmasterkit.com\"\n className=\"w-full block shadow-2xl\"\n >\n <div className=\"relative overflow-hidden\">\n <img\n src=\"\/tmk.jpg\"\n alt=\"portfolio\"\n className=\"transform hover:scale-125 transition duration-2000 ease-out\"\n \/>\n <h1 className=\"absolute top-10 left-10 text-gray-50 font-bold text-xl bg-red-500 rounded-md px-2\">\n Tailwind Master Kit\n <\/h1>\n <h1 className=\"absolute bottom-10 left-10 text-gray-50 font-bold text-xl\">\n 01\n <\/h1>\n <\/div>\n <\/a>\n <\/div>\n <\/div>\n <\/section>\n ...\n ...\n ...\n );\n<\/code><\/pre>\n\n\n\nHow to Build the Contact Page<\/h2>\n\n\n\n
![\"contact\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/contact.png\")
<\/figure>\n\n\n\nimport React from \"react\";\n\nexport default function Contact() {\n return (\n <section>\n <div className=\"max-w-6xl mx-auto h-48 bg-white dark:bg-gray-800 antialiased\">\n <h1 className=\" text-5xl md:text-9xl font-bold py-20 text-center md:text-left\">\n Contact\n <\/h1>\n <\/div>\n <div className=\"relative z-10 rounded-md shadow-md bg-[#02044A] p-4 md:p-10 lg:p-20 max-w-6xl mx-auto mb-20 -mt-4\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div className=\"md:ml-4\">\n <header className=\"\">\n <h1 className=\"text-gray-50 font-semibold text-2xl\">\n Get in touch, let's talk.\n <\/h1>\n <p className=\"font-light text-base text-gray-200 mt-2\">\n Fill in the details and I'll get back to you as soon as I can.\n <\/p>\n <\/header>\n <div className=\"icons-container inline-flex flex-col my-20\">\n <div className=\"flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4\">\n \n <p className=\"text-gray-50 font-light text-sm\">\n +91 9987384723\n <\/p>\n <\/div>\n <div className=\"flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4\">\n ....\n ....\n <p className=\"text-gray-50 font-light text-sm\">\n contact@yourwebsite.com\n <\/p>\n <\/div>\n <div className=\"flex flex-row items-center space-x-6 rounded-md border border-[#02044A] hover:border hover:border-blue-500 p-4\">\n ....\n ....\n <form className=\"form rounded-lg bg-white p-4 flex flex-col\">\n <label htmlFor=\"name\" className=\"text-sm text-gray-600 mx-4\">\n {\" \"}\n Your Name\n <\/label>\n <input\n type=\"text\"\n className=\"font-light rounded-md border focus:outline-none py-2 mt-2 px-1 mx-4 focus:ring-2 focus:border-none ring-blue-500\"\n name=\"name\"\n \/>\n <label htmlFor=\"email\" className=\"text-sm text-gray-600 mx-4 mt-4\">\n Email\n <\/label>\n <input\n type=\"text\"\n className=\"font-light rounded-md border focus:outline-none py-2 mt-2 px-1 mx-4 focus:ring-2 focus:border-none ring-blue-500\"\n name=\"email\"\n \/>\n <button\n type=\"submit\"\n className=\"bg-blue-500 rounded-md w-1\/2 mx-4 mt-8 py-2 text-gray-50 text-xs font-bold\"\n >\n Send Message\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n );\n}\n<\/code><\/pre>\n\n\n\nHow to Deploy the Portfolio<\/h2>\n\n\n\n
git clone https:\/\/github.com\/manuarora700\/simple-developer-portfolio-website\n<\/code><\/pre>\n\n\n\nnpm install\n<\/code><\/pre>\n\n\n\nnpm run dev\n<\/code><\/pre>\n\n\n\ngit add *\ngit commit -m \"add changes to the cloned repo\"\ngit push\n<\/code><\/pre>\n\n\n\n![\"vercel\"\/](\"https:\/\/www.freecodecamp.org\/news\/content\/images\/2021\/08\/vercel.png\")
<\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
Next.js<\/code>, which shows that you’re comfortable with React and its frameworks. (Recruiters are looking for you! ?)<\/p>\n\n\n\ntailwindcss<\/code> for styling, which shows that you can work with a CSS framework and cut down on styling time.<\/p>\n\n\n\nSource Code and Live Demo<\/h4>\n\n\n\n
Live Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"