From f50e3337693d5148c785a629a2557473424b63c7 Mon Sep 17 00:00:00 2001 From: Matias de Andrea Date: Fri, 26 Jul 2024 18:37:57 +0200 Subject: [PATCH] feat: add header --- lib/core/utils/constants.dart | 6 + lib/l10n/app_en.arb | 5 + lib/l10n/app_es.arb | 5 + lib/l10n/app_pt.arb | 5 + lib/ui/shared/media_query_extension.dart | 13 ++ lib/ui/views/home.dart | 234 ++++++++++++----------- lib/ui/widgets/footer.dart | 43 ----- lib/ui/widgets/username.dart | 25 +++ 8 files changed, 185 insertions(+), 151 deletions(-) create mode 100644 lib/ui/shared/media_query_extension.dart delete mode 100644 lib/ui/widgets/footer.dart create mode 100644 lib/ui/widgets/username.dart diff --git a/lib/core/utils/constants.dart b/lib/core/utils/constants.dart index d5f2af1..fd3af3d 100644 --- a/lib/core/utils/constants.dart +++ b/lib/core/utils/constants.dart @@ -9,3 +9,9 @@ class Urls { static const String podcast = 'https://universoflutter.com'; static const String profile = 'https://deandreamatias.com/profile.png'; } + +class Constants { + static const String username = 'dendreamatias'; + static const String name = 'Matias de Andrea'; + static const String separator = '·'; +} diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index c6b5318..5be31ef 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -38,6 +38,11 @@ "when_age": "Every year. Currently {age} years old", "when_work": "Monday to Friday", "when_balance": "All days looking for the balance between work and personal life", + "skills_one": "detail-oriented", + "skills_two": "cooperative", + "skills_three": "communicative", + "skills_four": "proactive", + "skills_five": "mediator", "homeHeaderTitle": "Hi, I'm Matias de Andrea", "homeHeaderSubtitle": "a creative and dynamic developer.\nI really like to work with mobile applications, developing UI/UX and software", "skillsTitle": "My most loved technologies and tools are", diff --git a/lib/l10n/app_es.arb b/lib/l10n/app_es.arb index 9c3b7fd..efb79ee 100644 --- a/lib/l10n/app_es.arb +++ b/lib/l10n/app_es.arb @@ -38,6 +38,11 @@ "when_age": "Cada año. Actualmente tengo {age} años", "when_work": "De lunes a viernes", "when_balance": "Todos los días buscando el equilibrio entre el trabajo y la vida personal", + "skills_one": "detallista", + "skills_two": "cooperativo", + "skills_three": "comunicativo", + "skills_four": "proactivo", + "skills_five": "mediador", "homeHeaderTitle": "Hola, soy Matias de Andrea", "homeHeaderSubtitle": "un desarrollador creativo y dinámico. Me encanta trabajar con aplicaciones móviles, desarrollando el UI/UX y el software", "skillsTitle": "Mis herramientas preferidas son", diff --git a/lib/l10n/app_pt.arb b/lib/l10n/app_pt.arb index 01ce7aa..634587c 100644 --- a/lib/l10n/app_pt.arb +++ b/lib/l10n/app_pt.arb @@ -38,6 +38,11 @@ "when_age": "Todos os anos. Atualmente tenho {age} anos", "when_work": "De segunda a sexta-feira", "when_balance": "Todos os dias buscando o equilíbrio entre o trabalho e a vida pessoal", + "skills_one": "detalhista", + "skills_two": "cooperativo", + "skills_three": "comunicativo", + "skills_four": "proativo", + "skills_five": "mediador", "homeHeaderTitle": "Olá, sou Matias de Andrea", "homeHeaderSubtitle": "um desenvolvedor criativo e dinâmico. Gosto muito de trabalhar com aplicações móveis, desenvolvendo o UI/UX e o software", "skillsTitle": "Minhas ferramentas favoritas são", diff --git a/lib/ui/shared/media_query_extension.dart b/lib/ui/shared/media_query_extension.dart new file mode 100644 index 0000000..2ddd21b --- /dev/null +++ b/lib/ui/shared/media_query_extension.dart @@ -0,0 +1,13 @@ +import 'package:flutter/widgets.dart'; + +extension MediaQueryExtension on BuildContext { + double get width => MediaQuery.of(this).size.width; + double get height => MediaQuery.of(this).size.height; + + // Breakpoints + bool get isSmall => width < 600; + bool get isMedium => width >= 600; + bool get isLarge => width >= 1024; + bool get isExtraLarge => width >= 1440; + bool get isExtraExtraLarge => width >= 2560; +} diff --git a/lib/ui/views/home.dart b/lib/ui/views/home.dart index 419ae4b..5299a75 100644 --- a/lib/ui/views/home.dart +++ b/lib/ui/views/home.dart @@ -1,12 +1,9 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; -import 'package:responsive_builder/responsive_builder.dart'; +import 'package:portfolio/ui/shared/media_query_extension.dart'; import '../../core/utils/constants.dart'; -import '../widgets/custom_cards.dart'; -import '../widgets/footer.dart'; -import '../widgets/header.dart'; -import '../widgets/menu.dart'; +import '../widgets/username.dart'; class HomeView extends StatefulWidget { static const String route = '/'; @@ -20,51 +17,48 @@ class HomeViewState extends State { @override Widget build(BuildContext context) { return Scaffold( - appBar: const PreferredSize( - preferredSize: Size.fromHeight(56.0), - child: MenuWidget(), - ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Expanded( - child: ResponsiveBuilder( - builder: - (BuildContext context, SizingInformation sizingInformation) { - switch (sizingInformation.deviceScreenType) { - case DeviceScreenType.desktop: - return const _LargeContent(); - default: - return SingleChildScrollView( - padding: const EdgeInsets.all(16.0), - child: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - HeaderWidget( - title: - AppLocalizations.of(context)!.homeHeaderTitle, - subtitle: AppLocalizations.of(context)! - .homeHeaderSubtitle, - image: Urls.profile, - key: const Key(Urls.profile), - ), - const GithubWidget(), - const SkillsWidget(), - const LanguagesWidget(), - const ContactWidget(), - ], - ), - ), - ); - } - }, - ), + const Expanded(child: Column(children: [_Header(), _LargeContent()])), + if (context.isSmall) + const Align(alignment: Alignment.bottomCenter, child: Username()) + ], + ), + ); + } +} + +class _Header extends StatelessWidget { + const _Header(); + + @override + Widget build(BuildContext context) { + final List skills = [ + AppLocalizations.of(context)!.skills_one, + Constants.separator, + AppLocalizations.of(context)!.skills_two, + Constants.separator, + AppLocalizations.of(context)!.skills_three, + Constants.separator, + AppLocalizations.of(context)!.skills_four, + Constants.separator, + AppLocalizations.of(context)!.skills_five, + ]; + return Padding( + padding: const EdgeInsets.all(16), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + if (context.isLarge) + const Align(alignment: Alignment.topRight, child: Username()), + const Name(), + Wrap( + alignment: WrapAlignment.center, + spacing: 4, + runSpacing: 8, + children: skills.map((String skill) => Text(skill)).toList(), ), - const Align( - alignment: Alignment.bottomCenter, - child: Footer(), - ) ], ), ); @@ -76,68 +70,92 @@ class _LargeContent extends StatelessWidget { @override Widget build(BuildContext context) { - return Row( - mainAxisSize: MainAxisSize.min, - children: [ - Flexible( - child: ColumnContent( - title: AppLocalizations.of(context)!.who_title, - content: [ - AppLocalizations.of(context)!.who_is_mobile, - AppLocalizations.of(context)!.who_communities, - AppLocalizations.of(context)!.who_writer, - AppLocalizations.of(context)!.who_podcast, - AppLocalizations.of(context)!.who_football, - AppLocalizations.of(context)!.who_secondary_football, - AppLocalizations.of(context)!.who_nationality, - AppLocalizations.of(context)!.who_secondary_nationality, - AppLocalizations.of(context)!.who_family, - AppLocalizations.of(context)!.who_pets, - ], - ), - ), - Flexible( - child: ColumnContent( - title: AppLocalizations.of(context)!.what_title, - content: [ - AppLocalizations.of(context)!.what_mobile, - AppLocalizations.of(context)!.what_contribute, - AppLocalizations.of(context)!.what_videos, - AppLocalizations.of(context)!.what_writing, - AppLocalizations.of(context)!.what_podcast, - AppLocalizations.of(context)!.what_languages, - AppLocalizations.of(context)!.what_pets, + return context.isMedium + ? Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Flexible( + child: ColumnContent( + title: AppLocalizations.of(context)!.who_title, + content: [ + AppLocalizations.of(context)!.who_is_mobile, + AppLocalizations.of(context)!.who_communities, + AppLocalizations.of(context)!.who_writer, + AppLocalizations.of(context)!.who_podcast, + AppLocalizations.of(context)!.who_football, + AppLocalizations.of(context)!.who_secondary_football, + AppLocalizations.of(context)!.who_nationality, + AppLocalizations.of(context)!.who_secondary_nationality, + AppLocalizations.of(context)!.who_family, + AppLocalizations.of(context)!.who_pets, + ], + ), + ), + Flexible( + child: ColumnContent( + title: AppLocalizations.of(context)!.what_title, + content: [ + AppLocalizations.of(context)!.what_mobile, + AppLocalizations.of(context)!.what_contribute, + AppLocalizations.of(context)!.what_videos, + AppLocalizations.of(context)!.what_writing, + AppLocalizations.of(context)!.what_podcast, + AppLocalizations.of(context)!.what_languages, + AppLocalizations.of(context)!.what_pets, + ], + ), + ), + Flexible( + child: ColumnContent( + title: AppLocalizations.of(context)!.where_title, + content: [ + AppLocalizations.of(context)!.where_live, + AppLocalizations.of(context)!.where_work, + AppLocalizations.of(context)!.where_contribute, + AppLocalizations.of(context)!.where_videos, + AppLocalizations.of(context)!.where_communities, + AppLocalizations.of(context)!.where_writing, + AppLocalizations.of(context)!.where_podcast, + AppLocalizations.of(context)!.where_football, + AppLocalizations.of(context)!.where_family_and_pets, + ], + ), + ), + Flexible( + child: ColumnContent( + title: AppLocalizations.of(context)!.when_title, + content: [ + AppLocalizations.of(context)!.when_age(29), + AppLocalizations.of(context)!.when_work, + AppLocalizations.of(context)!.when_balance, + ], + ), + ), ], - ), - ), - Flexible( - child: ColumnContent( - title: AppLocalizations.of(context)!.where_title, - content: [ - AppLocalizations.of(context)!.where_live, - AppLocalizations.of(context)!.where_work, - AppLocalizations.of(context)!.where_contribute, - AppLocalizations.of(context)!.where_videos, - AppLocalizations.of(context)!.where_communities, - AppLocalizations.of(context)!.where_writing, - AppLocalizations.of(context)!.where_podcast, - AppLocalizations.of(context)!.where_football, - AppLocalizations.of(context)!.where_family_and_pets, - ], - ), - ), - Flexible( - child: ColumnContent( - title: AppLocalizations.of(context)!.when_title, - content: [ - AppLocalizations.of(context)!.when_age(29), - AppLocalizations.of(context)!.when_work, - AppLocalizations.of(context)!.when_balance, - ], - ), - ), - ], - ); + ) + : Column(children: [ + Text( + AppLocalizations.of(context)!.who_title, + textAlign: TextAlign.center, + maxLines: 1, + ), + Text( + AppLocalizations.of(context)!.what_title, + textAlign: TextAlign.center, + maxLines: 1, + ), + Text( + AppLocalizations.of(context)!.where_title, + textAlign: TextAlign.center, + maxLines: 1, + ), + Text( + AppLocalizations.of(context)!.when_title, + textAlign: TextAlign.center, + maxLines: 1, + ), + ]); } } @@ -153,7 +171,7 @@ class ColumnContent extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( - padding: const EdgeInsets.all(16.0), + padding: const EdgeInsets.all(16), child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, diff --git a/lib/ui/widgets/footer.dart b/lib/ui/widgets/footer.dart deleted file mode 100644 index 703762d..0000000 --- a/lib/ui/widgets/footer.dart +++ /dev/null @@ -1,43 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_gen/gen_l10n/app_localizations.dart'; - -import '../../core/utils/navigate_links.dart'; -import '../shared/portfolio_icons.dart'; - -class Footer extends StatelessWidget { - const Footer({super.key}); - @override - Widget build(BuildContext context) { - return Column( - children: [ - const SizedBox(height: 8.0), - Text(AppLocalizations.of(context)!.footerLocale), - Row( - mainAxisSize: MainAxisSize.min, - children: [ - IconButton( - icon: const Icon(CustomIcons.linkedin), - tooltip: AppLocalizations.of(context)!.linkedin, - onPressed: () => openLink(Uri.parse( - 'https://www.linkedin.com/in/deandreamatias/?locale=en_US')), - ), - const SizedBox(width: 16.0), - IconButton( - icon: const Icon(CustomIcons.github), - tooltip: AppLocalizations.of(context)!.github, - onPressed: () => - openLink(Uri.parse('https://github.com/deandreamatias')), - ), - const SizedBox(width: 16.0), - IconButton( - icon: const Icon(CustomIcons.behance), - tooltip: AppLocalizations.of(context)!.behance, - onPressed: () => - openLink(Uri.parse('https://www.behance.net/deandreamatias')), - ), - ], - ) - ], - ); - } -} diff --git a/lib/ui/widgets/username.dart b/lib/ui/widgets/username.dart new file mode 100644 index 0000000..f565a37 --- /dev/null +++ b/lib/ui/widgets/username.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import 'package:portfolio/core/utils/constants.dart'; + +class Username extends StatelessWidget { + const Username({super.key}); + @override + Widget build(BuildContext context) { + return const Padding( + padding: EdgeInsets.all(16), + child: Text(Constants.username), + ); + } +} + +class Name extends StatelessWidget { + const Name({super.key}); + + @override + Widget build(BuildContext context) { + return const Padding( + padding: EdgeInsets.all(16), + child: Text(Constants.name, textAlign: TextAlign.center), + ); + } +}