As a frontend developer with three years of experience at a startup, I have had the opportunity to work with a variety of technologies, including React.js, Next.js, JavaScript, Tailwind, Redux Toolkit, CSS, and Formik. But one of the most important skills I have developed over that time is the ability to work collaboratively with a team, communicate effectively, ask questions, and research new and better ways to get things done.

One of the best ways to showcase those skills is by building a portfolio website that highlights my experience and expertise. I decided to update my portfolio website to reflect my growth and demonstrate my ability to create high-performance, scalable, and flexible web applications using Next.js. You can find the source code on my GitHub and a live version on codewithmercy.netlify.app.

For the portfolio animation, I made use of Framer Motion, which is a powerful animation library for React. I also made use of React Icons for the icons on my site. For design inspiration, I drew from Pinterest and Behance.

I am currently open to new opportunities as a front-end developer, and I believe that my skills and experience would make me an asset to any company. By showcasing my ability to work collaboratively, communicate effectively, and continually improve my skills and knowledge, I hope to demonstrate the value that I can bring to a development team.

If you're interested in learning more about my skills and experience or would like to discuss potential opportunities, please don't hesitate to contact me. You can find me on LinkedIn, Twitter, and Instagram.

Here's how I would go about building a portfolio website with Next.js:

Step 1: Set up my development environment

Before I can start building my portfolio website, I'll need to set up my development environment. This will involve installing Node.js, creating a new Next.js project, setting up my text editor and development tools, and configuring my project environment. Here are the steps to follow to create a next app

Initialize a new Next.js project by running the following command in your terminal:

npx create-next-app

1. Next, install Tailwind CSS and its dependencies by running the following command:

npm install tailwindcss postcss-preset-env postcss-flexbugs-fixes

1. Create a postcss.config.js file in the root directory of your project and add the following code:

module.exports = {
  plugins: [
    "tailwindcss",
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        autoprefixer: {
          flexbox: "no-2009",
        },
        stage: 3,
      },
    ],
  ],
};

1. Create a tailwind.config.js file in the root directory of your project and add the following code:

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

1. Import Tailwind CSS in your styles/globals.css file by adding the following code:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

1. Finally, start your Next.js development server by running the following command:

npm run dev

Congratulations! You now have a Next.js project with Tailwind CSS configured and ready to use.

Step 2: Create my website layout and design

Once my development environment is set up, I can start designing my website layout and design. This will involve creating a basic layout and choosing a colour scheme, this was easy because I picked the colour scheme from a UI on Behance, so I didn't have to spend hours trying to figure out which one works best and the same with the font too, and adding any other design elements.

Step 3: Implement my website functionality

With my website layout and design in place, I can start implementing the functionality I'd like to include. This includes creating pages for my portfolio projects and adding contact forms I make use of Formspree since I don't want to write backend to handle the form validation, submission and all. You can read more about what and how to use Formspree here https://formspree.io/ integrating social media feeds, also made use of Framer motion to animate the site transition and also animate the content on my portfolio website and more.

Step 4: Update my website with new skills and experience

As I continue to develop my skills and gain new experience, I'll want to update my portfolio website to reflect my growth. This might involve adding new projects, adding a blog page to my portfolio page either by fetching all my blogs from Hashnode or using contentful to post blogs separately, showcasing new technologies I've learned, or highlighting new areas of expertise.

Conclusion

Building a portfolio website with Next.js is a great way to showcase my experience and expertise as a front-end developer. By following the steps outlined above and incorporating the latest front-end development tools, I can create a website that is both visually appealing and highly functional, while also demonstrating my ability to work collaboratively, communicate effectively, and continually improve my skills and knowledge.