fa library added

lib/main.dart

@@ -24,6 +24,13 @@ void main() {
   // with the provided parameters and components.
   runApp(Document(
     title: 'Hamza',
+    head: <Component>[
+      link(
+        href:
+            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css',
+        rel: 'stylesheet',
+      ),
+    ],
     styles: [
       // Special import rule to include to another css file.
       css.import('https://fonts.googleapis.com/css?family=Montserrat'),

lib/pages/home.dart

@@ -22,6 +22,7 @@ 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

@@ -82,7 +82,7 @@ class AboutMeSection extends StatelessComponent {
           div(classes: 'tech-stack', [
             for (final t in tech)
               span([
-                img(src: StaticAssets.playIcon, height: 10),
+                i(classes: 'fa-solid fa-play play-icon', []),
                 span(classes: 'tech-item', [
                   text(t),
                 ]),
@@ -158,8 +158,9 @@ class AboutMeSection extends StatelessComponent {
           justifyContent: JustifyContent.start,
         )
         .box(
-          padding: EdgeInsets.only(top: 5.vh, right: 5.vw),
+          padding: EdgeInsets.only(top: 5.vh),
         ),
+    css('.play-icon').text(color: primaryColor),
     css('.title').text(
       fontFamily: FontFamily('Montserrat'),
       fontWeight: FontWeight.w100,

lib/sections/basic_info.dart

@@ -1,3 +1,4 @@
+import 'package:devfolio/constants/theme.dart';
 import 'package:devfolio/utils/assets.dart';
 import 'package:jaspr/jaspr.dart';
 
@@ -21,7 +22,7 @@ class BasicInfoSection extends StatelessComponent {
         h1(classes: 'first-name', [text('Muhammad')]),
         h1(classes: 'last-name', [text('Hamza')]),
         span(classes: 'subtitle', [
-          img(classes: 'play-icon', src: StaticAssets.playIcon, height: 20),
+          i(classes: 'fa-solid fa-play play-icon', []),
           span(classes: 'dynamic-subtitles', [
             text('Flutter Enthusiast'),
           ])
@@ -72,6 +73,7 @@ class BasicInfoSection extends StatelessComponent {
           image: ImageStyle.url(StaticAssets.bwImage),
           size: BackgroundSize.cover,
         ),
+    css('.play-icon').text(color: primaryColor),
     css('.subtitle')
         .flexbox(direction: FlexDirection.row, alignItems: AlignItems.center),
     css('.dynamic-subtitles')

lib/sections/services.dart

@@ -56,7 +56,7 @@ class ServicesSection extends StatelessComponent {
           justifyContent: JustifyContent.start,
         )
         .box(
-          padding: EdgeInsets.only(top: 5.vh, right: 5.vw),
+          padding: EdgeInsets.symmetric(vertical: 5.vh),
         ),
     css('.title').text(
       fontFamily: FontFamily('Montserrat'),
@@ -72,7 +72,6 @@ class ServicesSection extends StatelessComponent {
         )
         .box(
           margin: EdgeInsets.only(top: 50.px),
-          width: 100.percent,
         ),
   ];
 }