Ivan New Portfolio
My portfolio built with Next.js, TypeScript, TailwindCSS and Gsap
Overview
Creating a personal portfolio is a vital step for anyone looking to showcase their skills and projects. This portfolio is thoughtfully built using a combination of modern web technologies, emphasizing reusability and efficiency. The choice of frameworks and libraries ensures that the site is not only visually appealing but also easy to maintain and scale.
Features
- Reusable Animations: All animations are designed as reusable hooks, allowing for consistency and easy updates.
- Next.js with TypeScript: The use of Next.js provides server-side rendering capabilities, while TypeScript adds type safety for a more robust codebase.
- Drizzle ORM: This object-relational mapping tool facilitates database interactions with the Turso and Sqlite databases, specifically tailored for managing images.
- Zustand for State Management: This lightweight global state management tool enables efficient handling of application state without the complexity of larger libraries.
- Next Mdx Remote: Utilizing the MDX library allows the blog content to be written in Markdown, combining the simplicity of Markdown with the power of React components.
- Tailwind CSS Framework: The incorporation of this utility-first CSS framework promotes a modern design aesthetic and allows for rapid styling adjustments.
- Bright Highlighter: The server-side code highlighter enhances code readability, making it easier to showcase programming skills effectively.
- GSAP Animation Library: Adding professional-grade animations, GSAP brings life to the portfolio, enhancing user engagement through smooth transitions and effects.
- 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.
- Drizzle ORM
Drizzle ORM is a TypeScript ORM for SQL databases designed with maximum type safety in mind. It comes with a drizzle-kit CLI companion for automatic SQL migrations generation. Drizzle ORM is meant to be a library, not a framework. It stays as an opt-in solution all the time at any levels.
- 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.
- MDX
MDX is a format that allows developers to write JSX within Markdown documents, combining the power of React with the simplicity of Markdown. This allows for the creation of dynamic and interactive content that can be easily shared and consumed across different platforms and devices.
- 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.
- Zustand
Zustand is a lightweight state management library for React that provides a simple and intuitive API for managing state in your application. It allows developers to easily create and manage global state, and provides a powerful set of tools for optimizing performance and improving developer productivity. Zustand is designed to be easy to use and easy to learn, making it a popular choice for developers of all skill levels.