Portfolio Website - Gagik Yeranosyan

Creating a personal portfolio involved crafting something that was both easy to use and concrete. Naturally, I opted for React as the chosen technology. Moreover, I wanted to incorporate email connectivity into the portfolio. Therefore, I selected Next.js 13 with TypeScript and utilized the TSX syntax extension to TypeScript. This allowed me to write code that was type-checked and enabled me to become more proficient.

For animations, I made use of the Framer Motion library in React, which offers comprehensive documentation for implementing a wide range of animations. To achieve this, I simply needed to create a component, and everything was set up for implementing the desired animation. For styling, I turned to Tailwind CSS, and through using it, I gained a deeper understanding of how to write custom values, resulting in an easily attainable, modern design for my portfolio.

Email functionality is a crucial feature for effective communication in both professional and personal settings. To implement this, I chose the React Email library developed by the Resend team. By using Resend, I acquired the RESEND_API_KEY, which I placed in the root directory of my project within a .env file. I integrated the React Toast library to provide notifications, conveying the sending status. Additionally, I ensured the capability to track navigation and implement a light-dark mode using the Context API.

In terms of data storage, I opted for an ArrayList. I utilized "as const" to make an object or array immutable, enhancing the robustness of my application.

Tech Stack

• React Portfolio Website
• Next.js App
• Framer Motion
• TypeScript
• Tailwind CSS
• React Context API

Start My Portfolio

1. Create Next.js app:

           npx create-next-app@latest
         

2. Run development server:

           npm run dev
         

3. Install necessary packages:
   • React Icons:

                 npm i react-icons
               

   • Framer Motion:

                 npm i framer-motion
               

   • clsx for setting the value of the className attribute:

                 npm i clsx
               

   • React Intersection Observer:

                 npm i react-intersection-observer
               

   • React Vertical Timeline Component:

                 npm i react-vertical-timeline-component
               

                 npm i --save-dev @types/react-vertical-timeline-component
               

4. Create API key using Resend:

           npm i [email protected]
         

5. Styling email using React Email:

           npm i @react-email/components @react-email/tailwind
         

6. Styling alert message for form submission using React Hot Toast:

           npm i react-hot-toast