Building My Developer Portfolio: A Journey with TypeScript, Next.js, Tailwind CSS, and Accertinity

Creating a professional portfolio is essential for any developer looking to showcase their skills and projects. In this article, I'll walk you through how I built my portfolio using TypeScript, Next.js, Tailwind CSS, and the Accertinity CSS framework. I'll also share the challenges I faced, how I overcame them, and the features and functionalities that make my portfolio stand out.

My Portfolio Link

Technology Stack

• Next.js

• Typescript

• Tailwind CSS and Aceternity UI

• React Icons

• Vercel (for development and hosting)

Images

Summary (File Structure )

In the Public Folder :

I uploaded pictures and my resume here.

In Src Folder

---

• Data Folder: Contains all the project description data.

Components Folder

• Common Folder: Includes a Card component (used in the project section), Navbar, Sidebar (for mobile view), and various common elements like headings, buttons, and subheadings. These elements use customized Tailwind CSS and Framer Motion to add animations.

• Code Sample: Found in portfolio/src/components/common.

• Links Folder: Contains two files:

  • Contact.tsx: The contact page.

  • link.tsx: Contains all the important links (e.g., GitHub, LinkedIn).

• • Section Folder: Contains the project and skill sections.

    • Summary Folder: Contains the home summary and about summary text.

Lessons Learned and Future Improvements

• Building this portfolio provided me with invaluable knowledge about Framer Motion and Accertinity UI, including how to effectively add animations. Now, I can easily use any type of framework independently by referring to documentation, without needing tutorials.

• I also learned how to use maps, create methods, and develop custom components (e.g., MyHeadings, SubHeading, etc.). I realized the importance of separating text and frequently changing links into a dedicated folder, making them easier to manage and update.

Conclusion

Creating this portfolio was both challenging and rewarding. It not only serves as a showcase of my skills but also as a learning project that pushed me to improve my development and design capabilities. I encourage you to visit my portfolio, explore my projects, and reach out if you have any questions or opportunities.

Visit My Portfolio

By sharing my journey, I hope to inspire other developers to create their portfolios and showcase their unique skills and projects. Happy coding!