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

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

@@ -28,38 +28,40 @@ export default function AboutAndSkills() {
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, ease: "easeOut" }} transition={{ duration: 0.6, ease: "easeOut" }}
> >
<h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--color-text-primary)] heading-underline">{tAbout('title')}</h2> <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="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('paragraph1')}</p>
<p>{tAbout('paragraph2')}</p> <p>{tAbout('paragraph2')}</p>
<p>{tAbout('paragraph3')}</p> <p>{tAbout('paragraph3')}</p>
</div> </div>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('backend')}</h3> <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('backend')}</h3>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{skillsData.backend.map(skill => <SkillPill key={skill} skill={skill} />)} {skillsData.backend.map(skill => <SkillPill key={skill} skill={skill} />)}
</div>
</div> </div>
</div> <div>
<div> <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('frontend')}</h3>
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('frontend')}</h3> <div className="flex flex-wrap gap-3">
<div className="flex flex-wrap gap-3"> {skillsData.frontend.map(skill => <SkillPill key={skill} skill={skill} />)}
{skillsData.frontend.map(skill => <SkillPill key={skill} skill={skill} />)} </div>
</div> </div>
</div> <div>
<div> <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('databases')}</h3>
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('databases')}</h3> <div className="flex flex-wrap gap-3">
<div className="flex flex-wrap gap-3"> {skillsData.databases.map(skill => <SkillPill key={skill} skill={skill} />)}
{skillsData.databases.map(skill => <SkillPill key={skill} skill={skill} />)} </div>
</div> </div>
</div> <div>
<div> <h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('cloud')}</h3>
<h3 className="text-xl font-semibold text-[var(--color-text-primary)] mb-3">{tSkills('cloud')}</h3> <div className="flex flex-wrap gap-3">
<div className="flex flex-wrap gap-3"> {skillsData.cloud.map(skill => <SkillPill key={skill} skill={skill} />)}
{skillsData.cloud.map(skill => <SkillPill key={skill} skill={skill} />)} </div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -74,38 +74,40 @@ export default function Contact() {
return ( return (
<motion.section <motion.section
id="contact" id="contact"
className="container mx-auto py-12 md:py-20" className="mx-auto py-12 md:py-20"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.6, ease: "easeOut" }} transition={{ duration: 0.6, ease: "easeOut" }}
> >
<div className="text-center max-w-2xl mx-auto"> <div className="container mx-auto px-4">
<h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] heading-underline">{t('title')}</h2> <div className="text-justify max-w-2xl mx-auto">
<p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p> <h2 className="text-3xl md:text-4xl font-bold text-[var(--color-text-primary)] heading-underline">{t('title')}</h2>
</div> <p className="text-[var(--color-text-secondary)] mb-10">{t('subtitle')}</p>
</div>
{/* Centered Form */} {/* Centered Form */}
<form onSubmit={handleSubmit} className="max-w-xl mx-auto"> <form onSubmit={handleSubmit} className="max-w-xl mx-auto">
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_name')}</label> <label htmlFor="name" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_name')}</label>
<input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required <input type="text" name="name" id="name" value={formData.name} onChange={handleChange} required
className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" /> className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
</div> </div>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="email" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_email')}</label> <label htmlFor="email" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_email')}</label>
<input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required <input type="email" name="email" id="email" value={formData.email} onChange={handleChange} required
className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" /> className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5" />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<label htmlFor="message" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_message')}</label> <label htmlFor="message" className="block mb-2 text-sm font-medium text-[var(--color-text-secondary)]">{t('form_message')}</label>
<textarea name="message" id="message" rows={5} value={formData.message} onChange={handleChange} required <textarea name="message" id="message" rows={5} value={formData.message} onChange={handleChange} required
className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5"></textarea> className="bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-text-primary)] text-sm rounded-lg focus:ring-[var(--color-primary)] focus:border-[var(--color-primary)] block w-full p-2.5"></textarea>
</div> </div>
<button type="submit" className="bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 text-white font-bold py-3 px-8 rounded-full transition-colors w-full" disabled={isSubmitting}> <button type="submit" className="bg-[var(--color-primary)] hover:bg-[var(--color-primary)]/90 text-white font-bold py-3 px-8 rounded-full transition-colors w-full" disabled={isSubmitting}>
{isSubmitting ? t('status_sending') : t('submit_button')} {isSubmitting ? t('status_sending') : t('submit_button')}
</button> </button>
</form> </form>
</div>
</motion.section> </motion.section>
); );
} }