Build and Deploy a Dynamic Portfolio Website with Next.js
Creating a dynamic portfolio website is a great way to showcase your skills and projects to potential clients and employers. In this article, we will walk through the process of building and deploying a dynamic portfolio website using Next.js, a popular React framework for building web applications.
Step 1: Set up the project
First, make sure you have Node.js and npm installed on your system. Then, create a new directory for your project and run the following commands to set up a new Next.js project:
npx create-next-app@latest my-portfolio
cd my-portfolio
npm run dev
Step 2: Design the layout
Next, design the layout of your portfolio website by creating pages and components using the Next.js file-based routing system. You can use CSS frameworks like Bootstrap or Tailwind CSS to style your components and create a cohesive design for your website.
Step 3: Add dynamic content
To make your portfolio website dynamic, you can create a data folder to store information about your projects, skills, and experiences. Use Next.js data fetching methods like getStaticProps or getServerSideProps to fetch and display this data on your website.
Step 4: Deploy your website
Once you have built your portfolio website, you can deploy it to a hosting platform like Vercel or Netlify. These platforms provide seamless deployment and hosting for Next.js projects, allowing you to easily share your portfolio website with the world.
Conclusion
By following these steps, you can build and deploy a dynamic portfolio website using Next.js. This will allow you to showcase your work and skills in a professional and appealing way, helping you stand out to potential clients and employers.
trash guide tbh. went on to follow as i am a beginner, u are just copy pasting from the code that you already wrote and not explaining shit!
source code sir?
Great tutorial, if you're looking for a tutorial online and can't find one with no bugs or errors this one is for you
It's not original it's created by britany chiang.
where is the source code?
Britany Chiang is amazing
npx create-next-app@13.2.4 –typescript <app_name>
There might be a later version but i decided to work with this one since it has a 'page' directory
Hey bro, Please share the source code / github repo link for this post
Can you give the source code for this project.
hi, I created the project as your guide, but I have stuck in about section as my text section did not set to 2/3 and image appears in next line instead of right side of text. Can you check the error. My about file is. import SectionTitle from '../components/SectionTitle';
import { AiFillThunderbolt } from "react-icons/ai";
import profileImg from "../../public/assets/images/profileImg.jpg";
const About = () => {
return (<section id="about"
className="max-w-containerSmall mx-auto py-10 lgl:py-32 flex flex-col gap-8">
<SectionTitle title="About me" titleNo="01"/>
<div className="flex flex-col lgl:flex-row gap-16">
<div className="w-full lgl:w-2/3 text-base text-textDark font-medium flex flex-col gap-4">
<p>
Hello! My name is Noor Mohammad and I enjoy creating things that live on the internet. My interest in web development
started back in 2012 when I decided to try editing custom Tumblr themes — turns out hacking together a custom reblog
button taught me a lot about HTML & CSS!
</p>
<p>
Fast-forward to today, and I had the privilege of working at an advertising agency, a start-up,
<span className="text-textGreen">
a huge corporation,and a student-led design studio.
</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio rem accusantium fugiat veritatis, quidem repellat
<span className="text-textGreen">
ab natus possimus? Sint, accusamus!
</span>
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem ullam eligendi dolorum nostrum possimus quos iusto magnam ut esse recusandae.
</p>
<p>
Here are a few technologies I have been working with recently:
</p>
<ul className="max-w-[450px] text-sm font-titleFont grid grid-cols-2 gap-2 mt-6">
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> JavaScript (ES6+)
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> React
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> TypeScript
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> MongoDB
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> Next.js
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> Node.js
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> Express.js
</li>
<li className="flex items-center gap-2">
<span className="text-textGreen">
<AiFillThunderbolt />
</span> Tailwindcss
</li>
</ul>
</div>
<div className="w-full lgl:w-1/3 h-80 relative group">
<div className="absolute w-full h-80 -left-6 -top-6 rounded-lg">
<div className="w-full h-full relative z-20 flex pl-6 lgl:pl-0">
<img
className="rounded-lg h-full object-cover"
src="/assets/images/profileImg.jpg"
alt="profileImg"
/>
<div className="hidden lgl:inline-block absolute w-full h-80 bg-textGreen/20 rounded-md top-0 left-0 group-hover:bg-transparent duration-300"></div>
<div className="hidden lgl:inline-flex w-full h-80 border-2 border-textGreen rounded-md group-hover:translate-x-2 group-hover:-translate-y-2 transition-transform duration-300">
</div>
</div>
<div>
</div>
</div>
</div>
</div>
</section>
);
};
export default About;
thanks for this this was fire
Hey, i dont get any pages directory when i run my npx create-next-app@latest –typescript, i only have; next, app,public and node module directories. I am on next version 13.4.2
Sir, you made amazing projects but I want to say that kindly make sections of your video for our better understanding.
Thank you❤
Hi sir, where did you create your logo? Do you have a tut for it?
Nice work brother!
Are you Bangladeshi?
Can I get the git repository
Thanks noor for the great tutorial , Do you mind to contact with you for some next inquires with mail ?
I saw your portfolio. It was stunning🔥Please make a portfolio project like yours
nice tutorial, but also put the credit for the original creator of that portfolio, brittany chiang.
thanks 💙eng