My First Portfolio v1.0
Image representing My First Portfolio v1.0

My First Portfolio v1.0

Next.jsTailwindCSSMySQLReactTypescriptSEOHTMLHostingDrizzleORM
Nikola Filipovski
Image of author Nikola Filipovski

Nikola Filipovski

Full-Stack Web Developer

About My First Portfolio v1.0

After completing a few freelance projects on my own and several working with other designers in a team, I decided to create my own personal portfolio to showcase my skills and projects. This was my first portfolio built with Next.js and it marked an important step in applying my frontend and backend knowledge in a real-world environment.

Image representing an old landing page of nfwdesign.com website on different devices

Technical Implementation

The portfolio was built with Next.js 13 using the App Router and TypeScript. Styling was done with TailwindCSS and ShadCN UI components for reusable UI elements. The backend used a MySQL database and the entire project was self-hosted on a shared web hosting on Node.js server.

A custom admin panel (CMS) was created to manage dynamic project pages. This allowed me to add new projects after completing work for clients without touching the code manually. Images and content for projects were managed directly through the admin interface, making the process much more efficient for a growing portfolio.

Image representing an old admin dashboard page of nfwdesign.com website on different devices

Key Features

  • Self-hosted on shared web hosting (soon i will move to VPS)
  • Custom admin panel (CMS) for adding projects dynamically
  • Fully responsive design for desktops, tablets, and mobile devices
  • SEO optimized with static and dynamic schema markups and metadata
  • Easy navigation and clear structure for visitors to find information quickly
  • First portfolio project built with Next.js + TailwindCSS + ShadCN UI

Challenges & Achievements

Hosting a Next.js 13 project on a shared server was challenging, but it allowed me to learn important lessons about deployment, scalability, and server configuration. Despite the limitations, I successfully launched a fully functional portfolio that was easy to navigate, showcased my completed projects, and was ready for future expansion.

Dynamic project pages and the admin CMS provided an efficient workflow for managing content, even before introducing my later portfolio upgrades with blogs, advanced SEO, and enhanced UI/UX.

Result

The first portfolio successfully demonstrated my ability to build, host, and maintain a full-featured web project. It was responsive, scalable, and featured a clean UI while serving as a solid foundation for my future portfolio improvements.