joaonloureiro/portfolio-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust padding of about and contact for mobile

Browse Source
This commit is contained in:
João Loureiro
2025-09-15 22:12:18 -03:00
parent 1eeef50622
commit 8013c1eb34
2 changed files with 57 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/sections/About.tsx
View File

@@ -28,10 +28,11 @@ export default function AboutAndSkills() {
viewport={{ once: true }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
<div className="container mx-auto px-4">
<h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--color-text-primary)] heading-underline">{tAbout('title')}</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
<div className="space-y-4 text-lg text-left text-[var(--color-text-secondary)]">
<div className="space-y-4 text-lg text-justify text-[var(--color-text-secondary)]">
<p>{tAbout('paragraph1')}</p>
<p>{tAbout('paragraph2')}</p>
<p>{tAbout('paragraph3')}</p>
@@ -64,6 +65,7 @@ export default function AboutAndSkills() {
</div>
</div>
</div>
</div>
</motion.section>
);
}

6
frontend/src/app/components/sections/Contact.tsx
View File

@@ -74,13 +74,14 @@ export default function Contact() {
return (
<motion.section
id="contact"
className="container mx-auto py-12 md:py-20"
className="mx-auto py-12 md:py-20"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: "easeOut" }}
>
<div className="text-center max-w-2xl mx-auto">
<div className="container mx-auto px-4">
<div className="text-justify max-w-2xl mx-auto">
<h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] heading-underline">{t('title')}</h2>
<p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p>
</div>
@@ -106,6 +107,7 @@ export default function Contact() {
{isSubmitting ? t('status_sending') : t('submit_button')}
</button>
</form>
</div>
</motion.section>
);
}