New portfolio with i18n

.gitignore

@@ -1,9 +1,51 @@
 # Logs
 logs
 *.log
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+.vscode
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 pnpm-debug.log*
 lerna-debug.log*
 
@@ -23,4 +65,6 @@ dist-ssr
 *.sln
 *.sw?
 .env
-yarn.lock
+yarn.lock
+
+vite.config.js.*

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": true
+}

README.md

@@ -0,0 +1,134 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+-------
+
+<div align="center">
+  <img src="./public/Logo.svg" height="68px" width="68px" alt="portfolio logo" align="center"/>
+</div>
+
+<h1 align="center">Rodrigo's Portfolio</h1>
+
+## 👋🏽 Introduction
+
+Welcome to my portfolio! I’m a full-stack software developer who uses programming to develop innovative solutions and attractive user interfaces. In this portfolio you’ll be able to see an overview of my work and some personal projects I’ve developed in order to improve my skills and expand my knowledges.
+
+## 📚 Table of contents
+
+- [👋🏽 Introduction](#-introduction)
+- [📚 Table of contents](#-table-of-contents)
+- [👨🏽‍💻 About me](#-about-me)
+- [🛠 Technologies](#-technologies)
+- [📺 How to view](#-how-to-view)
+- [🚀 How to run](#-how-to-run)
+- [🖼 Previews](#-previews)
+- [👨🏽‍🦱 Author](#-author)
+
+## 👨🏽‍💻 About me
+
+As mentioned earlier, I’m a full-stack software developer with a strong emphasis on front-end web development. Although my specialisation lies in creating engaging user interfaces, I am equally adept at back-end development and creating mobile applications. My passion for technology is marked by a sincere appreciation for the world of UI/UX design, where I do some work using Figma.
+
+## 🛠 Technologies
+
+<div>
+  <img src="https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB" alt="React">
+  <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML">
+  <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS">
+  <img src="https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white" alt="Styled components">
+  <img src="https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white" alt="React router">
+  <img src="https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white" alt="VITE">
+  <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript">
+  <img src="https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white" alt="SASS">
+</div>
+
+## 📺 How to view
+
+In case you want to take a look at the application, you can access the project at the official link just by [clicking here](https://rm-portfoliof.netlify.app/).
+
+## 🚀 How to run
+
+To install the application, you first need to clone the project to your local device. To do this, simply run the following command in your terminal:
+
+```
+git clone https://github.com/rodrigsmor/my-portfolio.git
+```
+
+With the application cloned on your local device, go to the portfolio directory and with the package manager of your choice, run the command to install the project packages.
+
+```
+# go to the cloned project directory
+cd my-portfolio
+
+# install dependencies
+npm install
+```
+
+Once the dependencies are effectively installed, you are now fully able to run the application, so just run the following command:
+
+```
+npm run dev
+```
+
+> 💭 DETAIL: The application will probably be running on `http://localhost:5173/`.
+
+## 🖼 Previews
+
+![A preview of the portfolio](./public/preview-1.gif)
+
+## 👨🏽‍🦱 Author
+
+<img height="100px" src="https://avatars.githubusercontent.com/u/78985382?v=4" alt="Rodrigo profile picture">
+<p>Developed with love by <b size="48px">Rodrigo Moreira</b> 
+ 💜🚀</p>
+
+---
+
+<div>
+  <a href="mailto:rodrigsmor.pf@gmail.com">
+    <img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" alt="gmail">
+  </a>
+  <a href="https://www.linkedin.com/in/psrodrigomoreira/">
+    <img src="https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
+  </a>
+  <a href="https://www.behance.net/rodrigsmor">
+    <img src="https://img.shields.io/badge/Behance-1769ff?style=for-the-badge&logo=behance&logoColor=white" alt="behance">
+  </a>
+  <a href="https://dev.to/psrodrigs">
+    <img src="https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge&logo=devdotto&logoColor=white" alt="dev.to">
+  </a>
+</div>
+

app/[lang]/layout.tsx

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+import { LangPageProps } from "./page";
+import { notFound } from "next/navigation";
+import { LanguageProvider } from "@/utils/hooks/useTranslate";
+import { getDictionary, hasLocale } from "@/utils/functions/dictionaries";
+import { Prompt, Turret_Road } from "next/font/google";
+
+const prompt = Prompt({
+  variable: '--font-prompt',
+  subsets: ["latin"],
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
+});
+
+const turret = Turret_Road({
+  variable: '--font-turret_road',
+  subsets: ["latin"],
+  weight: ['400']
+});
+
+export async function generateStaticParams() {
+  return [{ lang: 'en-US' }, { lang: 'pt-BR' }, { lang: 'es-149' }]
+}
+
+type LayoutProps = LangPageProps & {
+  children: ReactNode;
+};
+
+export default async function LangLayout({
+  children,
+  params,
+}: LayoutProps) {
+  const { lang } = await params;
+
+  if (!hasLocale(lang)) notFound()
+
+  const dictionary = await getDictionary(lang);
+
+  return (
+    <html lang={lang}>
+      <body className={`${prompt.variable} ${turret.variable} antialiased`}>
+        <LanguageProvider initialLocale={lang} dictionary={dictionary}>
+          {children}
+        </LanguageProvider>
+      </body>
+    </html>
+  )
+}

app/[lang]/page.tsx

@@ -0,0 +1,40 @@
+// You now have access to the current locale
+
+import { Metadata } from "next";
+import Portfolio from "@/views/portfolio"
+import { LanguageCode } from "@/utils/@types/lang";
+import { getDictionary } from "../../utils/functions/dictionaries";
+
+export type LangPageProps = {
+  params: Promise<{ lang: LanguageCode }>;
+};
+
+export async function generateMetadata({ params }: LangPageProps): Promise<Metadata> {
+  const { lang } = await params;
+
+  const dict = await getDictionary(lang);
+
+  return {
+    title: dict.Metadata.title,
+    description: dict.Metadata.description,
+    openGraph: {
+      title: dict.Metadata.title,
+      description: dict.Metadata.description,
+      locale: lang,
+    },
+    alternates: {
+      canonical: `/${lang}`,
+      languages: {
+        'en-US': '/en-US',
+        'pt-BR': '/pt-BR',
+        'es-149': '/es-149',
+      },
+    },
+  };
+}
+
+export default async function Page() {
+  return (
+    <Portfolio />
+  );
+}

app/globals.css

@@ -0,0 +1,83 @@
+@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+:root {
+  /* background colors */
+  --background-extradark: #0C0816;
+  --background-dark: #1B1231;
+  --background-main: #291B4B;
+  --background-light: #372565;
+  --background-extralight: #493187;
+
+  /* typography colors */
+  --typography-extradark: #B2A2DD;
+  --typography-dark: #C2B4E4;
+  --typography-main: #D1C7EB;
+  --typography-light: #E0DAF1;
+  --typography-extralight: #F0ECF8;
+
+  /* primary colors */
+  --primary-extradark: #23024B;
+  --primary-dark: #450396;
+  --primary-main: #6805E0;
+  --primary-light: #8F33FF;
+  --primary-extralight: #C799FF;
+
+  /* secondary colors */
+  --secondary-extradark: #760A60;
+  --secondary-dark: #BC109A;
+  --secondary-main: #ED2BC6;
+  --secondary-light: #F372D9;
+  --secondary-extralight: #F9B8EC;
+
+  /* ----------- */
+
+  /* font sizes */
+  --font-h1: 3rem;
+  --font-h2: 2.25rem;
+  --font-h3: 1.5rem;
+  --font-h4: 1.25rem;
+  --font-h5: 1.125rem;
+  --font-h6: 1rem;
+  --font-h7: .875rem;
+
+  /* font weights */
+  --font-light: 200;
+  --font-regular: 300;
+  --font-medium: 400;
+  --font-semibold: 500;
+  --font-bold: 600;
+  --font-extrabold: 700;
+
+  /* shadows */
+  --shadow-header: 0px 0px 8px 1px rgba(0,0,0,0.4);
+  --shadow-primary-main: 0 0 1.75rem .5rem rgba(104, 5, 224, .4);
+  --text-shadow-primary-main: 0px 0px 28px rgba(104, 5, 224, .4);
+
+  /* gradients */
+  --gradient-primaryToSecondary-x-main: linear-gradient(90deg, #6805E0 0%, #ED2BC6 100%);
+  --gradient-primaryToSecondary-y-main: linear-gradient(180deg, #6805E0 0%, #ED2BC6 100%);
+  --gradient-primaryToSecondary-x-dark: linear-gradient(90deg, #450396 0%, #BC109A 100%);
+  --gradient-metalic-style: linear-gradient(90deg, #0C0816 0%, #231A3C 50%, #0C0816 100%);
+  --gradient-typographyToOpacity-x: linear-gradient(90deg, #F0ECF8 0%, rgba(240, 236, 248, 0) 100%);
+  /* media sizes */
+  /* --media-mobile: 320px;
+  --media-tablet: 768px;
+  --media-desktop: 1024px; */
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background-extradark);
+  color: var(--typography-extralight);
+  font-family: "Prompt", Helvetica, sans-serif;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Prompt", Helvetica, sans-serif;
+}