André Carlos

@andresinho20049

Table of Contents

1. About the Project
2. Technologies Used
3. Getting Started
   • Node
   • Docker
4. Benefits of SSR with Next.js
5. Benefits of SSR with Next.js
6. Typescript
7. Contact Page

About the Project

This is my personal portfolio developed in a combination of modern technologies, designed to showcase my skills and experience as a developer.

This portfolio demonstrates skills related to web development and delivery, highlighting features such as:

Search Engine Optimization (SEO)

Portfolio features content originally created with the goal of improving visibility in search engines. This is achieved through the use of:

• Concise and meaningful project descriptions.
• Consistent typography for a professional aesthetic.

Responsiveness

The site is fully responsive, ensuring that the user experience is equally good on any device. This is achieved through the use of techniques such as:

• Media queries.
• Flexible layouts.
• Adaptive visuals.

Quality Testing

To ensure good performance and a satisfactory user experience, the site has been subjected to quality testing tools, including:

• Lighthouse: a tool that evaluates the performance, accessibility, SEO and site improvement practices.
• Other testing tools to ensure that the site meets expected standards.

Server-Side Rendering (SSR)

The use of Server-Side Rendering (SSR) allows content to be rendered dynamically, improving the user experience. This is achieved by prioritizing the delivery of static content and using techniques such as:

• Caching.
• File compression.
• Image optimization.

Clean Code Practices

To keep the code organized and easy to understand, the site was developed based on SOLID practices (SOLID is an acronym for Single responsibility, Open closed, Liskov substitution, Interface segregation and Dependency inversion), which include:

• A modular approach.
• Use of classes and objects to encapsulate the site's logic.
• Implementation of interfaces to ensure flexibility.

Contact Form

The contact form has been integrated with the GCP Gmail API, allowing users to send messages directly from the site. This is achieved by utilizing GCP APIs to create a secure and reliable connection.

Development

The project was developed using Next.js, a popular framework for creating static web applications, along with Tailwind CSS for styling. The content part is generated dynamically using MDX and the Content Layer library, and the artwork was built in Photoshop.

Technologies Used

• Next.js: A React framework for developing static web applications.
• Tailwind CSS: A styling library for creating responsive layouts.
• TypeScript: TypeScript is a strongly typed programming language based on JavaScript.
• Photoshop: Images developed in Photoshop to customize the appearance of the project.
• YUP: A data validation library to ensure the integrity of forms.
• Unform: A form component to create forms more efficiently and intuitively.
• Googleapis: Integration with Google's API service for sending messages and other resources.
• Nodemailer: A library for sending emails via server.
• ContentLayer: A library for dynamically generating content and optimizing application performance.
• Next-themes: A Next.js extension to support custom and customizable themes.
• Schema-dts: A library for creating data schemas on the fly and improving data integrity.
• ESLint: A code linting tool to detect errors and improve code quality.

Getting Started

To run the project, follow the steps below:

Node

1. Git Clone: ​​git clone https://github.com/andresinho20049/my-portfolio
2. Install Dependencies: npm install
3. Run the Project: npm run dev or npm run start

If you don't have Node.js and npm installed, you can use Docker

Docker

To run the project using Docker, follow the steps below:

1. Git Clone: ​​git clone https://github.com/andresinho20049/my-portfolio
2. Run the Project: docker-compose up
   (or use the command docker-compose --profile development up)

Benefits of SSR with Next.js

Using Next.js with SSR features offers several Benefits include:

• Improved SEO: Server-side rendering allows pages to be indexed by search engines faster.
• Shorter Page Load Times: Information is preloaded before the first page loads, resulting in a faster and more efficient user experience.

Improved SEO with Next.js

The not-found.tsx, manifest.ts, robots.ts and sitemap.ts files are important components of a website powered by Next. They offer significant benefits in terms of SEO, efficiency and customization.

Not-found.tsx (404 Page)

The not-found.tsx file is a custom page that returns a 404 error page when a user tries to access a non-existent URL. This provides benefits such as:

• Improved user experience: By displaying a clear and beneficial message, the user can be directed to the correct website more easily.

• Reduced loading time: The 404 error page does not cause unnecessary loading time and reduces frustration.

Manifest.ts (To dynamically generate manifest file)

The manifest.ts file is used to create a manifest file that contains information about the site, such as the title, main URL, and icons. Dynamically generating this file can improve:

• Improved user experience: By including information about layout and design for different devices, you can create a more pleasant experience for users.

• Efficient indexing: By using dynamic generation methods, you can automatically update the list of main links, and by providing the necessary information, search engines can index the site more efficiently.

• Customization: You can customize the settings of the manifest.ts file to suit your specific needs.

Robots.ts (With sitemap and user-agent settings)

The robots.txt file is a text file that defines how search engines should interact with your site. Settings include:

• Sitemaps: By allowing HTML files to be indexed, you can improve the efficiency of content retrieval.

• User-agent: By defining which search engine software is allowed to access your site, you can reduce overhead.

Sitemap.ts (Generate sitemap dynamically when building a site)

The sitemap.ts file automatically generates Sitemap files for search engines. This can improve:

• Visibility indicators: Search engines can easily find and index new resources on your site, increasing your visibility.

• Indexing time: By automatically generating your Sitemap, you can reduce the time it takes for search engines to index new content.

Advantages of being generated dynamically during site construction

These files can significantly improve your SEO results when they are automatically updated during site construction. This means you can:

• Maintain data consistency and accuracy.

• Schedule updates for search engines, avoiding unnecessary waiting times.

• Improve the efficiency of indexing new resources.

Typescript

Benefits of using TypeScript

Using TypeScript provides several benefits, including:

• Improved safety: Static typing and compilation help prevent type errors and ensure that your code is safe.

• Improved readability: TypeScript helps improve code readability by adding static types, making it easier for other developers to understand your code.

• Improved scalability: Static typing and compilation allow you to write more robust and scalable code.

Difference Between TypeScript and JavaScript

JavaScript and TypeScript are two distinct languages ​​with different characteristics.

JavaScript

JavaScript is a script interpreted by the browser engine, Node.js or another. It is a dynamic language that allows you to create dynamic interactions on the web. JavaScript is interpreted directly by the browser or the server, which means that it does not need to be compiled before executing it.

TypeScript

TypeScript, on the other hand, is a typed language. It adds a set of features and characteristics to JavaScript to make it more secure and scalable. TypeScript compiles your code into an intermediate format called smart (ECMAScript), which is executed by the browser engine or the server.

Main Differences

Here are some of the main differences between JavaScript and TypeScript:

• Typing: TypeScript is a typed language, while JavaScript is not. This means that TypeScript requires static types to be defined for variables, functions, and properties, while JavaScript is typeless.

• Compilation: TypeScript is compiled before it is executed, while JavaScript is interpreted directly by the browser engine or server.

Disadvantages of JavaScript

There are some disadvantages to using only JavaScript for development:

• Insecurity: JavaScript can contain typographical errors and may not guarantee the security of all programs.

• Scalability: JavaScript can be slow due to the lack of predictability about the behavior of the code.

Contact Page

One of the specific features that caught my attention the most in my portfolio is the integration of the GMail API service with Google Cloud Platform (GCP). Here is how it works:

• Contact Form: The form was developed using Unform and YUP for field validation, allowing for a more efficient user experience.

• Sending Messages: When filling out the form, the message is sent to my email address and a copy is forwarded to the email provided in the form.

:copyright: Copyright

Developed by Andresinho20049
Project: My Portfolio
A responsive website showcasing some of my skills, development and journey as a developer