Project not found
;
+ }
+
+ return (
+
+
+
+ {t(`project_${project.id}_title`)}
+
+
+
+ 
+
+
+
+ {t('about_project')}
+{t(`project_${project.id}_description`)}
+{t('tech_used')}
+
+ {project.tech.map(t => (
+
+ {t}
+
+ ))}
+
+
+ {project.liveUrl && (
+
+ {t('live_link')}
+
+ )}
+ {project.repoUrl && (
+
+ {t('repo_link')}
+
+ )}
+
+ {link.icon}
diff --git a/frontend/src/app/components/Header.tsx b/frontend/src/app/components/Header.tsx
index f49c4b6..47c1719 100644
--- a/frontend/src/app/components/Header.tsx
+++ b/frontend/src/app/components/Header.tsx
@@ -17,9 +17,9 @@ export default function Header() {
- {t('about')}
- {t('projects')}
- {t('contact')}
+ {t('about')}
+ {t('projects')}
+ {t('contact')}
diff --git a/frontend/src/app/components/LanguageSwitcher.tsx b/frontend/src/app/components/LanguageSwitcher.tsx
index 10687e7..06f704e 100644
--- a/frontend/src/app/components/LanguageSwitcher.tsx
+++ b/frontend/src/app/components/LanguageSwitcher.tsx
@@ -4,6 +4,7 @@ import { useLocale } from 'next-intl';
import { usePathname, useRouter } from 'next/navigation';
import { useState, useTransition, useRef, useEffect } from 'react';
import { FaChevronDown } from 'react-icons/fa6';
+import ReactCountryFlag from 'react-country-flag';
export default function LanguageSwitcher() {
const [isPending, startTransition] = useTransition();
@@ -32,9 +33,9 @@ export default function LanguageSwitcher() {
return () => document.removeEventListener('mousedown', handleOutsideClick);
}, []);
- const languages: { [key: string]: { flag: string; label: string } } = {
- en: { flag: '🇺🇸', label: 'English' },
- pt: { flag: '🇧🇷', label: 'Português' },
+ const languages: { [key: string]: { label: string; countryCode: string } } = {
+ en: { label: 'English', countryCode: 'US' },
+ pt: { label: 'Português', countryCode: 'BR' },
};
return (
@@ -43,10 +44,9 @@ export default function LanguageSwitcher() {
type="button"
disabled={isPending}
onClick={() => setIsOpen(!isOpen)}
- className="flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-card)] border border-[var(--color-border)] rounded-md hover:bg-[var(--color-border)]/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[var(--color-background)] focus:ring-[var(--color-primary)] transition-colors"
+ className="flex items-center justify-center w-10 h-10 text-sm font-medium text-[var(--color-text-secondary)] bg-[var(--color-card)] border border-[var(--color-border)] rounded-md hover:bg-[var(--color-border)]/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[var(--color-background)] focus:ring-[var(--color-primary)] transition-colors"
>
- {languages[locale].flag} {languages[locale].label}
-
+
-
- {t('live_link')}
-
-
+
);
}
\ No newline at end of file
diff --git a/frontend/src/app/components/sections/About.tsx b/frontend/src/app/components/sections/About.tsx
index 0617cc0..1ab12dc 100644
--- a/frontend/src/app/components/sections/About.tsx
+++ b/frontend/src/app/components/sections/About.tsx
@@ -2,11 +2,10 @@
import {useTranslations} from 'next-intl';
import { motion } from 'framer-motion';
-// Updated skills based on your professional experience
const skillsData = {
- backend: [".NET (Framework, Core, 6+)", "C#", "Node.js", "Entity Framework"],
+ backend: [".NET (Framework, Core)", "C#", "Node.js", "Entity Framework"],
frontend: ["Angular", "TypeScript", "Next.js", "React", "HTML5 & CSS3"],
- databases: ["Oracle", "PostgreSQL", "Elasticsearch", "SQL"],
+ databases: ["Oracle", "SQL Server", "Elasticsearch", "Redis"],
cloud: ["Azure", "Docker", "RabbitMQ", "Git", "Kibana"]
};
@@ -32,14 +31,12 @@ export default function AboutAndSkills() {
{tAbout('title')}
- {/* About Me Column */}
- {/* Skills Column - Updated with new categories */}
))}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 13b86a0..1f9c979 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -48,20 +48,13 @@ h3 { font-size: 1.75rem; }
#home {
/* Re-added your background image underneath the gradient */
background:
- linear-gradient(125deg, rgba(5, 7, 21, 0.85) 0%, rgba(23, 33, 84, 0.85) 50%, rgba(67, 61, 125, 0.85) 100%),
- url("/pattern-randomized (3).svg");
+ url("/pattern-randomized.svg"),
+ linear-gradient(150deg, rgba(3, 7, 18, 0.95) 0%, rgba(23, 33, 84, 0.95) 50%, rgba(67, 61, 125, 0.95) 100%);
background-position: center;
background-size: cover;
- background-blend-mode: normal;
+ background-blend-mode: multiply;
}
-/* Adds a subtle glow to your name in the hero section */
-.hero-name-accent {
- color: var(--color-primary);
- text-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
-}
-
-/* Adds a subtle shadow to hero text for better readability on the gradient */
#home h1, #home p {
text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7);
}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index d56e17d..58f95ff 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -4,8 +4,6 @@ type Props = {
children: ReactNode;
};
-// Since we have a `not-found.tsx` page on the root, a layout file
-// is required, even if it's just passing children through.
export default function RootLayout({children}: Props) {
return children;
}
\ No newline at end of file
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 8f25da1..ff1861d 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,6 +1,5 @@
import {redirect} from 'next/navigation';
-// This page only renders when the app is built statically (output: 'export')
export default function RootPage() {
- redirect('/pt');
+ redirect('/en');
}
\ No newline at end of file
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 8480464..e2e2212 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -38,15 +38,17 @@
},
"projects": {
"title": "Projects I've Built",
- "project_1_title": "E-commerce Platform 'ShopNext'",
- "project_1_description": "A full-featured e-commerce website built with Next.js, featuring product catalogs, a shopping cart, user authentication, and a Stripe integration for payments.",
- "project_2_title": "Real-time Chat Application 'Converse'",
- "project_2_description": "A web-based chat app using Socket.IO and Node.js, allowing users to join rooms and exchange messages in real-time. Features include typing indicators and user presence.",
- "project_3_title": "Personal Portfolio & Blog",
- "project_3_description": "The very site you are on now! Built with Next.js and Tailwind CSS, statically exported for maximum performance. Includes a blog powered by MDX.",
+ "project_1_title": "Portfolio",
+ "project_1_description": "The very site you are on now! Built with Next.js and Tailwind CSS, statically exported for maximum performance.",
+ "project_2_title": "Homelab",
+ "project_2_description": "My personal homelab, running on a Raspberry Pi with Docker and Traefik. I host several services, including this portfolio.",
+ "project_3_title": "Happy",
+ "project_3_description": "A site to find orphanages to visit. Built with React, TypeScript and Styled-Components.",
"tech_used": "Technologies Used:",
"live_link": "Live Demo",
- "repo_link": "View Code"
+ "repo_link": "View Code",
+ "back_to_projects": "Back to Projects",
+ "about_project": "About this Project"
},
"contact": {
"title": "Let's Connect",
diff --git a/frontend/src/locales/pt.json b/frontend/src/locales/pt.json
index 67fac76..96ac197 100644
--- a/frontend/src/locales/pt.json
+++ b/frontend/src/locales/pt.json
@@ -38,15 +38,17 @@
},
"projects": {
"title": "Projetos que Construí",
- "project_1_title": "Plataforma de E-commerce 'ShopNext'",
- "project_1_description": "Um site de e-commerce completo construído com Next.js, com catálogos de produtos, carrinho de compras, autenticação de usuários e integração com Stripe para pagamentos.",
- "project_2_title": "Aplicação de Chat em Tempo Real 'Converse'",
- "project_2_description": "Um aplicativo de chat baseado na web usando Socket.IO e Node.js, permitindo que usuários entrem em salas e troquem mensagens em tempo real. Inclui indicadores de digitação e presença de usuário.",
- "project_3_title": "Portfólio Pessoal & Blog",
- "project_3_description": "O próprio site em que você está agora! Construído com Next.js e Tailwind CSS, exportado estaticamente para máxima performance. Inclui um blog com tecnologia MDX.",
+ "project_1_title": "Portfólio",
+ "project_1_description": "O próprio site em que você está agora! Construído com Next.js e Tailwind CSS, exportado estaticamente para máxima performance.",
+ "project_2_title": "Homelab",
+ "project_2_description": "Meu homelab pessoal, rodando em um Raspberry Pi com Docker e Traefik. Eu hospedo vários serviços, incluindo este portfólio.",
+ "project_3_title": "Happy",
+ "project_3_description": "Um site para encontrar orfanatos para visitar. Construído com React, TypeScript e Styled-Components.",
"tech_used": "Tecnologias Utilizadas:",
"live_link": "Ver ao Vivo",
- "repo_link": "Ver Código"
+ "repo_link": "Ver Código",
+ "back_to_projects": "Voltar para Projetos",
+ "about_project": "Sobre este Projeto"
},
"contact": {
"title": "Vamos Conversar",
{tAbout('paragraph1')}
{tAbout('paragraph2')}
{tAbout('paragraph3')}
{tSkills('backend')}
diff --git a/frontend/src/app/components/sections/Hero.tsx b/frontend/src/app/components/sections/Hero.tsx index 023e031..32ff0a0 100644 --- a/frontend/src/app/components/sections/Hero.tsx +++ b/frontend/src/app/components/sections/Hero.tsx @@ -1,7 +1,6 @@ 'use client'; import {useTranslations} from 'next-intl'; import Link from 'next/link'; -import { TypeAnimation } from 'react-type-animation'; export default function Hero() { const t = useTranslations('hero'); @@ -12,20 +11,6 @@ export default function Hero() {{t('greeting')} João Loureiro
-{t('subtitle')}
diff --git a/frontend/src/app/components/sections/Projects.tsx b/frontend/src/app/components/sections/Projects.tsx index 21c2948..bac3288 100644 --- a/frontend/src/app/components/sections/Projects.tsx +++ b/frontend/src/app/components/sections/Projects.tsx @@ -4,9 +4,9 @@ import ProjectCard from '../ProjectCard'; import { motion } from 'framer-motion'; const projectsData = [ - { id: 1, tech: ["Next.js", "Stripe", "Tailwind CSS", "Prisma"], imageUrl: "/project1.jpg" }, - { id: 2, tech: ["Socket.IO", "Node.js", "React", "Express"], imageUrl: "/project2.jpg" }, - { id: 3, tech: ["Next.js", "MDX", "Tailwind CSS", "Vercel"], imageUrl: "/project3.jpg" } + { id: 1, tech: ["Next.js", "Tailwind CSS", "TypeScript", "Framer Motion"], imageUrl: "/Portfolio.png", repoUrl: "https://github.com/joaonloureiro/portfolio-app" }, + { id: 2, tech: ["Traefik", "Docker", "Linux", "Homelab"], imageUrl: "/ProxmoxServer.png" }, + { id: 3, tech: ["React", "TypeScript", "Styled-Components"], imageUrl: "/Happy.png", repoUrl: "https://github.com/joaonloureiro/happy-app", liveUrl: "https://happy.joaoloureiro.dev.br/" } ]; const containerVariants = { @@ -46,10 +46,13 @@ export default function Projects() { {projectsData.map(project => (