Jorgeassaf Portfolio
My portfolio built with Next.js 15, TypeScript, Tailwind, Shadcn, Three.js and Sanity CMS
Overview
Jorge Assaf's portfolio is a beautifully crafted showcase that leverages modern web technologies to provide an engaging user experience. Built with a tech stack that includes Next.js, Tailwind CSS, and Three.js, it demonstrates a keen understanding of both design and development. The portfolio not only highlights his work but also utilizes 3D elements and animations, creating a dynamic interface that enhances user interaction.
The combination of a well-structured content management system using Sanity and the application of TypeScript contribute to a powerful and efficient backend, ensuring that content updates are seamless. This portfolio is an excellent example of how current frameworks can be utilized to create visually appealing and highly functional web applications.
Features
- Next.js App Directory: Utilizes Next.js for server-side rendering and static site generation, providing excellent performance and SEO benefits.
- TypeScript Integration: Written in TypeScript, which enhances code quality and provides better tooling support.
- 3D Graphics: Implements stunning 3D elements using Three.js and React Three Fiber, adding a unique visual layer to the portfolio.
- Responsive Design: Styled with Tailwind CSS, ensuring that the portfolio looks great on all devices with a mobile-first approach.
- Content Management: Uses Sanity as a headless CMS, allowing for easy updates and management of blog posts and projects.
- Optimized Layout: The blog and about pages feature a 75-character width for improved readability and a clean design.
- Dynamic Blog Filtering: Incorporates query parameters for blog categories, making it easier for users to navigate through content.
- Interactive Animations: Enhanced with Framer Motion, which brings animations to life, creating a more engaging user experience.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Shadcn UI
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
- Sanity
Sanity is a fully customizable, API-first, and cloud-based headless content management system that enables developers to manage structured content across multiple channels and platforms.
- Blog
Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.
- Personal
A personal website is an online platform that showcases an individual's work, interests, and personality. It can include a range of content, such as a bio, resume, portfolio, blog, and contact information, and is often used to promote one's personal brand or professional services.
- Portfolio
A portfolio website is a type of website that showcases an individual's or a company's work, skills, and accomplishments. It typically includes a gallery of images or videos, case studies, and client testimonials to provide potential clients or employers with a comprehensive overview of their experience and expertise.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Motion
Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript. It provides a simple declarative API for creating fluid animations, gestures, and transitions with excellent performance and accessibility.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.