feat: add header

deandreamatias · Jul 26, 2024 · f50e333 · f50e333
1 parent 3e28692
commit f50e333
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 151 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<HomeView> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: const PreferredSize(
-        preferredSize: Size.fromHeight(56.0),
-        child: MenuWidget(),
-      ),
       body: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
-          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: <Widget>[
-                            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<String> 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: <Widget>[
+          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: <Widget>[
-        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: <Widget>[
+              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: <Widget>[
+            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
diff --git a/lib/ui/widgets/username.dart 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),
+    );
+  }
+}