Portfolio

screenshot of Portfolio
nextjs
react
material-ui

Personal software engineer portfolio built with NextJS & Material UI.

Overview

Creating a personal portfolio website is essential for showcasing skills and projects in today's digital world. The portfolio described here is built using modern technologies that not only enhance user experience but also make the development process more efficient. This project effectively highlights key features and displays technical capabilities, making it a perfect representation of its creator, Kelvin Sanchez.

The design leverages a powerful tech stack to ensure a smooth and dynamic interface, while also keeping the user engaged with visually appealing elements. The integration of various libraries and tools allows for seamless functionality, from email communications to responsive design across devices.

Features

  • React: Utilizes this powerful JavaScript library to create interactive user interfaces that respond fluidly to user input.
  • NextJS: A robust React framework that supports hybrid static and server rendering, which significantly boosts performance and SEO optimization.
  • Material UI: Incorporates a sleek, component-based design system to ensure a visually appealing and consistent interface throughout the website.
  • Formik: Leverages this open-source library to handle forms efficiently, simplifying the process of collecting user data with ease.
  • Yup: Uses this JavaScript schema builder for effective value parsing and validation, ensuring that all user input conforms to expected formats.
  • SendGrid/Mail: Integrates email functionalities directly within the site, allowing for smooth communication and contact management via JavaScript.
  • React Icons: Makes it simple to include popular icons in the project, enhancing the aesthetic and usability of the interface.
nextjs
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

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

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

portfolio
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

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.

formik
Formik

Formik is a popular form library for React that helps with form state management, validation, and submission handling. It provides a declarative approach to building forms with support for complex validation scenarios and easy integration with validation libraries like Yup.

typescript
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.

vercel
Vercel

Vercel offers built-in support for deploying and hosting Next.js applications, making it a popular choice among Next.js developers.

Yup

Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.