Fresh Look Portfolio

Dec 16, 2023, 08:00 GMT+0 • 3min

I took some time to redesign my portfolio website with a couple inspirations from some of favorite gurus and the things I learned all throughout the last couple months. This comes after a complete U-turn from what I consider was pinnacle of web development -sorry to let you go PHP!

Why Next.js

Next.js, a popular React framework, brings a host of benefits to the table. Its server-side rendering (SSR) and static site generation (SSG) capabilities contribute to faster page loads, improved SEO, and an overall better user experience. Additionally, the ease of setting up routes, hot module replacement, and automatic code splitting made Next.js a no brainer decision.

Embracing TypeScript

I wholeheartedly hated JavaScript -no cap, but imagine a world where your code is not only elegant but also catches errors before they become issues. Next.js, coupled with TypeScript, offers just that. Next.js streamlines your project structure and boosts performance, while TypeScript brings a level of type safety that can save you from those dreaded runtime errors. Embracing these technologies doesn't mean sacrificing simplicity; instead, it empowers you to write clean, maintainable code effortlessly.

import { SanityDocument } from "next-sanity";

export type ImageType = {
  asset: {
    url: string;
  };
};

export type SocialLinkType = {
  platform: string;
  url: string;
  icon: string;
};

export type ProfileType = {
  _id: string;
  fullName: string;
  slogan: string;
  email: string;
  headline: string;
  profileImage: {
    alt: string;
    image: string;
  };
  body: SanityDocument[];
  resumeURL: string;
  socialText: string;
  socialLinks: SocialLinkType[];
  contact: string;
  skills: string[];
};

export type ShowcaseType = {
  _id: string;
  showcaseName: string;
  description: string;
  body: SanityDocument[];
  datePublished: string;
  updatedOn: string;
  showcaseImage: {
    alt: string;
    image: string;
  };
  showcaseVideoURL: string;
  showcaseURL: string;
  fileURL: string;
  tags: string[];
};


/* services */
export type ServiceType = {
  _id: string;
  serviceName: string;
  description: string;
  serviceImage: {
    alt: string;
    image: string | null;
  };
  serviceURL: string;
  serviceModal: string;
  categoryName: string[];
  tags: string[];
};


/* posts */
export type BlogPostType = {
  _id: string;
  title: string;
  description: string;
  slug: string;
  author: string;
  mainImage: {
    alt: string | null;
    image: string;
  };
  publishedAt: string;
  premium: boolean;
  body: SanityDocument[];
  estimatedReadingTime: number;
}

Content Management with Sanity

Managing content effectively is crucial for any dynamic portfolio. Sanity, a headless CMS, allows you to structure and organize your content seamlessly. Why Sanity you may ask? why not?

But on serious note, easy setup and configuration. Tons of content and guides out there to help with almost any issue - at least in my case. And most importantly, well documented!

Conclusion

Staying attuned to the latest industry trends isn't just a professional duty; it's a strategic advantage. Adapting to new tools, frameworks, and methodologies not only enhances your skill set but also positions you as a sought-after professional and stay ahead of the curve in a competitive job market. The tech landscape evolves rapidly, and being in sync with the latest trends ensures that you're not just a witness to change but an active participant in shaping the future of software development.

Navigating the vast realm of industry trends can be challenging, but rather than succumbing to overwhelm, let's cultivate patience and approach it one chapter at a time. Happy learning to you!