Web Developer Portfolio using Reactjs

Web Developer Portfolio
Welcome to my latest video on Web Developer Portfolio, where I will be discussing the key elements of an impressive portfolio that can showcase your skills as a web developer.
Whether you're a beginner or an experienced developer, I've got you covered because here I will explore nextjs, tailwindcss, and framer motion to create dynamic and visually striking websites that showcase your skills. Full project will be responsive from mobile to Desktop devices.
Please do like and leave your comments if you want more like of this video and Subscribe now and be part of the coding journey with me! Let's start your web design journey today!

Here you will learn:
How to initialise nextjs application.
How to setup tailwindcss and master it through development.
How to deploy nextjs project in vercel.
Detailed step-by-step guides for every skill level.
Learning the best uses of Framer Motion.
Hands-on projects to enhance your portfolio.
Stay tuned and never miss an update by subscribing to my channel and turning on notifications.

Useful links:

#nextjs #nextjs13 #nextjsAppRouter #ReactJS #Animations #PortfolioWebsite #FramerMotion #tailwindcss #portfolio #portfoliowebsite #motion #portfólio #nextjstutorial

[ahmedalhusaini]

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

[manavshete]

I saw your portfolio. It was stunning🔥Please make a portfolio project like yours

[waqarrao]

MERN stack with Tailwind is everything. Thanks

[usmansoomro]

Sir, you made amazing projects but I want to say that kindly make sections of your video for our better understanding.


Thank you❤

[umar]

Hey bro, Please share the source code / github repo link for this post

[davidmukoro]

@reactjsBD Thanks for this great tutorial. Great job indeed. Please what tool did you used in saving the screenshoot of the files in the project section. I have tried to get my projects having full screen just like yours.

[umar]

Can you give the source code for this project.

[lancetv]

Hi sir, where did you create your logo? Do you have a tut for it?

[abhishekcode]

Pls teach us MERN full stack project from starting❤

[hanbyeolkwon]

Thank you for the video! Btw, I wonder why you used Typescript instead of vanilla JS for this project. Is there any specific reason?

[levixenos]

I can't able to deploy it in vercel.. showing errors

[cupcakes]

There might be a later version but i decided to work with this one since it has a 'page' directory

[ss_space]

Thanks noor for the great tutorial, Do you mind to contact with you for some next inquires with mail ?

[LewraAzad]

Nice work brother!
Are you Bangladeshi?

[DorkyFranzis]

nice tutorial, but also put the credit for the original creator of that portfolio, brittany chiang.

[amolshelke]

It's not original it's created by britany chiang.

[JamshaidMannan]

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
import { AiFillThunderbolt } from "react-icons/ai";
import profileImg from

const About = () => {
return (<section id="about"
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"

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;