spaces adjustments

Author: mhmzdev

lib/pages/home.dart

@@ -22,7 +22,6 @@ class Home extends StatelessComponent {
     css('.home-body')
         .box(
           width: 100.vw,
-          padding: EdgeInsets.symmetric(horizontal: 50.px),
         )
         .background(
           color: Colors.black,

lib/sections/about_me.dart

@@ -159,6 +159,7 @@ class AboutMeSection extends StatelessComponent {
         )
         .box(
           padding: EdgeInsets.only(top: 5.vh),
+          width: 100.percent,
         ),
     css('.play-icon').text(color: primaryColor),
     css('.title').text(
@@ -169,12 +170,12 @@ class AboutMeSection extends StatelessComponent {
     css('.section-body')
         .flexbox(
           direction: FlexDirection.row,
-          alignItems: AlignItems.center,
-          justifyContent: JustifyContent.center,
+          // alignItems: AlignItems.center,
+          // justifyContent: JustifyContent.center,
         )
         .box(
           margin: EdgeInsets.only(top: 50.px),
-          width: 100.percent,
+          // width: 100.percent,
         ),
     css('.profile-picture')
         .background(

lib/sections/basic_info.dart

@@ -7,6 +7,33 @@ class BasicInfoSection extends StatelessComponent {
 
   @override
   Iterable<Component> build(BuildContext context) sync* {
+    final List<Map<String, dynamic>> socials = [
+      {
+        'icon': 'fa-brands fa-square-facebook',
+        'url': 'https://www.facebook.com/mhmzdev',
+      },
+      {
+        'icon': 'fa-brands fa-linkedin',
+        'url': 'https://www.linkedin.com/in/mhmzdev/',
+      },
+      {
+        'icon': 'fa-brands fa-github',
+        'url': 'https://github.com/mhmzdev',
+      },
+      {
+        'icon': 'fa-brands fa-x-twitter',
+        'url': 'https://twitter.com/mhmzdev',
+      },
+      {
+        'icon': 'fa-brands fa-instagram',
+        'url': 'https://www.instagram.com/mhmzdev/',
+      },
+      {
+        'icon': 'fa-brands fa-medium',
+        'url': 'https://mhmzdev.medium.com',
+      },
+    ];
+
     yield section(classes: 'info-section', [
       div(classes: 'info', [
         div(classes: 'welcome', [
@@ -27,7 +54,15 @@ class BasicInfoSection extends StatelessComponent {
             text('Flutter Enthusiast'),
           ])
         ]),
-        div(classes: 'socials', []),
+        div(classes: 'socials', [
+          for (final social in socials)
+            a(
+              classes: 'social-icon',
+              href: social['url'],
+              target: Target.blank,
+              [i(classes: social['icon'], [])],
+            ),
+        ]),
       ]),
       div(classes: 'main-image', []),
     ]);
@@ -86,8 +121,18 @@ class BasicInfoSection extends StatelessComponent {
         .flexbox(
           direction: FlexDirection.row,
           alignItems: AlignItems.center,
-          justifyContent: JustifyContent.spaceBetween,
         ),
+    css('.social-icon')
+        .text(
+          fontSize: 25.px,
+          color: Colors.white,
+        )
+        .box(
+          padding: EdgeInsets.only(right: 25.px),
+        ),
+    css('.social-icon:hover').text(
+      color: primaryColor,
+    ),
 
     /// MEDIA QUERY 1100px
     css.media(MediaQuery.screen(maxWidth: 1100.px), [

lib/sections/services.dart

@@ -72,6 +72,7 @@ class ServicesSection extends StatelessComponent {
         )
         .box(
           margin: EdgeInsets.only(top: 50.px),
+          width: 100.percent,
         ),
   ];
 }