From fe8bbf05f6cd6f0604001660c430fa8a454d866f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Loureiro?= Date: Tue, 10 Jun 2025 00:27:48 -0300 Subject: [PATCH] feat: Enhance layout and styling with new fonts and components - Integrated Space Grotesk font alongside Inter in layout. - Added FloatingSocials component for social media links. - Updated Footer with a new background color. - Modified Header to improve spacing and added LanguageSwitcher. - Refactored LanguageSwitcher to use a dropdown for language selection. - Updated ProjectCard to include images and improved layout. - Revamped About section to include categorized skills with animations. - Enhanced Contact section with animations and improved form styling. - Updated Hero section with type animation for dynamic text display. - Refactored Projects section to include animations for project cards. - Removed Skills section as it was integrated into the About section. - Updated global styles for light and dark themes, including new animations. - Updated translations for new skills and hero section text. --- frontend/package-lock.json | 62 +- frontend/package.json | 4 +- frontend/public/pattern-randomized (1).svg | 1 + frontend/public/pattern-randomized (2).svg | 1 + frontend/public/pattern-randomized (3).svg | 1 + frontend/public/pattern-randomized.svg | 1 + ...echnology-abstract-background_26780676.svg | 574 ++++++++++++++++++ frontend/src/app/(i18n)/[locale]/layout.tsx | 20 +- frontend/src/app/(i18n)/[locale]/page.tsx | 12 +- .../src/app/components/FloatingSocials.tsx | 30 + frontend/src/app/components/Footer.tsx | 2 +- frontend/src/app/components/Header.tsx | 11 +- .../src/app/components/LanguageSwitcher.tsx | 65 +- frontend/src/app/components/ProjectCard.tsx | 46 +- .../src/app/components/sections/About.tsx | 74 ++- .../src/app/components/sections/Contact.tsx | 29 +- frontend/src/app/components/sections/Hero.tsx | 42 +- .../src/app/components/sections/Projects.tsx | 63 +- .../src/app/components/sections/Skills.tsx | 37 -- frontend/src/app/globals.css | 135 +++- frontend/src/locales/en.json | 15 +- frontend/src/locales/pt.json | 15 +- 22 files changed, 1075 insertions(+), 165 deletions(-) create mode 100644 frontend/public/pattern-randomized (1).svg create mode 100644 frontend/public/pattern-randomized (2).svg create mode 100644 frontend/public/pattern-randomized (3).svg create mode 100644 frontend/public/pattern-randomized.svg create mode 100644 frontend/public/vecteezy_circuit-board-technology-abstract-background_26780676.svg create mode 100644 frontend/src/app/components/FloatingSocials.tsx delete mode 100644 frontend/src/app/components/sections/Skills.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 39fb734..0dfc3d8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -9,12 +9,14 @@ "version": "0.1.0", "dependencies": { "@heroicons/react": "^2.2.0", + "framer-motion": "^12.16.0", "next": "15.3.3", "next-intl": "^4.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hot-toast": "^2.5.2", - "react-icons": "^5.5.0" + "react-icons": "^5.5.0", + "react-type-animation": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", @@ -3390,6 +3392,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/framer-motion": { + "version": "12.16.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.16.0.tgz", + "integrity": "sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.16.0", + "motion-utils": "^12.12.1", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -4192,7 +4221,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -4568,7 +4596,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -4683,6 +4710,21 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/motion-dom": { + "version": "12.16.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.16.0.tgz", + "integrity": "sha512-Z2nGwWrrdH4egLEtgYMCEN4V2qQt1qxlKy/uV7w691ztyA41Q5Rbn0KNGbsNVDZr9E8PD2IOQ3hSccRnB6xWzw==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.12.1" + } + }, + "node_modules/motion-utils": { + "version": "12.12.1", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.12.1.tgz", + "integrity": "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -4853,7 +4895,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5152,7 +5193,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -5242,9 +5282,19 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, + "node_modules/react-type-animation": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-type-animation/-/react-type-animation-3.2.0.tgz", + "integrity": "sha512-WXTe0i3rRNKjmggPvT5ntye1QBt0ATGbijeW6V3cQe2W0jaMABXXlPPEdtofnS9tM7wSRHchEvI9SUw+0kUohw==", + "license": "MIT", + "peerDependencies": { + "prop-types": "^15.5.4", + "react": ">= 15.0.0", + "react-dom": ">= 15.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", diff --git a/frontend/package.json b/frontend/package.json index 0f4dcef..9dd61f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,12 +10,14 @@ }, "dependencies": { "@heroicons/react": "^2.2.0", + "framer-motion": "^12.16.0", "next": "15.3.3", "next-intl": "^4.1.0", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hot-toast": "^2.5.2", - "react-icons": "^5.5.0" + "react-icons": "^5.5.0", + "react-type-animation": "^3.2.0" }, "devDependencies": { "@eslint/eslintrc": "^3", diff --git a/frontend/public/pattern-randomized (1).svg b/frontend/public/pattern-randomized (1).svg new file mode 100644 index 0000000..3f366e6 --- /dev/null +++ b/frontend/public/pattern-randomized (1).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/pattern-randomized (2).svg b/frontend/public/pattern-randomized (2).svg new file mode 100644 index 0000000..303c8c2 --- /dev/null +++ b/frontend/public/pattern-randomized (2).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/pattern-randomized (3).svg b/frontend/public/pattern-randomized (3).svg new file mode 100644 index 0000000..ef0cfd2 --- /dev/null +++ b/frontend/public/pattern-randomized (3).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/pattern-randomized.svg b/frontend/public/pattern-randomized.svg new file mode 100644 index 0000000..ae2c88b --- /dev/null +++ b/frontend/public/pattern-randomized.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/vecteezy_circuit-board-technology-abstract-background_26780676.svg b/frontend/public/vecteezy_circuit-board-technology-abstract-background_26780676.svg new file mode 100644 index 0000000..fd1ce89 --- /dev/null +++ b/frontend/public/vecteezy_circuit-board-technology-abstract-background_26780676.svg @@ -0,0 +1,574 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/app/(i18n)/[locale]/layout.tsx b/frontend/src/app/(i18n)/[locale]/layout.tsx index 0751921..982a659 100644 --- a/frontend/src/app/(i18n)/[locale]/layout.tsx +++ b/frontend/src/app/(i18n)/[locale]/layout.tsx @@ -1,4 +1,4 @@ -import { Inter } from "next/font/google"; +import { Inter, Space_Grotesk } from "next/font/google"; import Header from "@/app/components/Header"; // Usando o Header que forneci import Footer from "@/app/components/Footer"; import "@/app/globals.css"; // Importando o CSS global @@ -11,8 +11,18 @@ import {getTranslations, setRequestLocale} from 'next-intl/server'; import { ReactNode } from "react"; import { routing } from "@/i18n/routing"; import { notFound } from "next/navigation"; +import FloatingSocials from "@/app/components/FloatingSocials"; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ + subsets: ["latin"], + variable: '--font-inter', +}); + +const space_grotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ['300', '400', '500', '700'], + variable: '--font-space-grotesk', +}); type Props = { children: ReactNode; @@ -42,13 +52,13 @@ export default async function RootLayout({children, params}: Props) { setRequestLocale(locale); return ( - + - +
-
+
{children}