Home section with basic info setup

lib/components/nav_bar.dart

@@ -9,9 +9,9 @@ class NavBar extends StatelessComponent {
   Iterable<Component> build(BuildContext context) sync* {
     yield section(classes: 'navbar', [
       div([
-        span([text('<')]),
+        span([text('< ')]),
         span(classes: 'brand', [text('Hamza')]),
-        span([text('/>')]),
+        span([text(' />')]),
       ]),
       div(classes: 'labels', [
         a(
@@ -89,11 +89,9 @@ class NavBar extends StatelessComponent {
       direction: FlexDirection.row,
       justifyContent: JustifyContent.end,
     ),
-    css.import(
-      'fonts/agustina/agustina.otf',
-    ),
     css('.brand').text(
-      fontFamily: FontFamily('fonts/agustina/agustina.otf'),
+      fontFamily: FontFamily('Agustina'),
+      fontSize: 24.px,
     ),
   ];
 }

lib/jaspr_options.dart

@@ -5,7 +5,8 @@ import 'package:jaspr/jaspr.dart';
 import 'package:devfolio/components/app_button.dart' as prefix0;
 import 'package:devfolio/components/nav_bar.dart' as prefix1;
 import 'package:devfolio/pages/home.dart' as prefix2;
-import 'package:devfolio/app.dart' as prefix3;
+import 'package:devfolio/sections/basic_info.dart' as prefix3;
+import 'package:devfolio/app.dart' as prefix4;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -25,14 +26,15 @@ import 'package:devfolio/app.dart' as prefix3;
 /// ```
 final defaultJasprOptions = JasprOptions(
   clients: {
-    prefix3.App: ClientTarget<prefix3.App>('app'),
+    prefix4.App: ClientTarget<prefix4.App>('app'),
     prefix0.AppButton: ClientTarget<prefix0.AppButton>('components/app_button', params: _prefix0AppButton),
   },
   styles: () => [
     ...prefix0.AppButton.styles,
     ...prefix1.NavBar.styles,
     ...prefix2.Home.styles,
-    ...prefix3.AppState.styles,
+    ...prefix3.BasicInfoSectionState.styles,
+    ...prefix4.AppState.styles,
   ],
 );
 

lib/main.dart

@@ -36,6 +36,14 @@ void main() {
           .box(width: 100.percent, minHeight: 100.vh)
           .box(margin: EdgeInsets.zero, padding: EdgeInsets.zero),
       css('h1').text(fontSize: 4.rem).box(margin: EdgeInsets.unset),
+      css.fontFace(
+        family: 'Agustina',
+        url: '/fonts/agustina/agustina.otf',
+      ),
+      css.fontFace(
+        family: 'Montserrat',
+        url: '/fonts/montserrat/montserrat.ttf',
+      ),
     ],
     body: App(),
   ));

lib/pages/home.dart

@@ -1,17 +1,16 @@
 import 'package:devfolio/components/nav_bar.dart';
+import 'package:devfolio/sections/basic_info.dart';
 import 'package:jaspr/jaspr.dart';
 
 class Home extends StatelessComponent {
   const Home({super.key});
 
   @override
   Iterable<Component> build(BuildContext context) sync* {
-    yield div(
-      classes: 'home-body',
-      [
-        NavBar(),
-      ],
-    );
+    yield div(classes: 'home-body', [
+      NavBar(),
+      BasicInfoSection(),
+    ]);
   }
 
   @css

lib/sections/basic_info.dart

@@ -0,0 +1,94 @@
+import 'package:devfolio/utils/assets.dart';
+import 'package:jaspr/jaspr.dart';
+
+class BasicInfoSection extends StatefulComponent {
+  const BasicInfoSection({super.key});
+
+  @override
+  State createState() => BasicInfoSectionState();
+}
+
+class BasicInfoSectionState extends State<BasicInfoSection> {
+  @override
+  Iterable<Component> build(BuildContext context) sync* {
+    yield section(classes: 'info-section', [
+      div([
+        div(classes: 'welcome', [
+          span(classes: 'welcome-text', [
+            text('WELCOME TO MY PORTFOLIO'),
+          ]),
+          img(
+            classes: 'wave',
+            src: StaticAssets.waveGif,
+            height: 35,
+          )
+        ]),
+        h1(classes: 'first-name', [text('Muhammad')]),
+        h1(classes: 'last-name', [text('Hamza')]),
+        span(classes: 'subtitle', [
+          img(src: StaticAssets.playIcon, height: 20),
+          span(classes: 'dynamic-subtitles', [
+            text('Flutter Enthusiast'),
+          ])
+        ]),
+        div(classes: 'socials', []),
+      ]),
+      div(
+        classes: 'main-image',
+        [img(src: StaticAssets.bwImage)],
+      ),
+    ]);
+  }
+
+  @css
+  static final List<StyleRule> styles = [
+    css('.info-section')
+        .flexbox(
+          direction: FlexDirection.row,
+          alignItems: AlignItems.center,
+          justifyContent: JustifyContent.spaceBetween,
+        )
+        .box(
+            padding: EdgeInsets.only(
+          left: 10.vw,
+        )),
+    css('.welcome').box(margin: EdgeInsets.only(bottom: 2.5.vh)).flexbox(
+          alignItems: AlignItems.end,
+        ),
+    css('.welcome-text')
+        .box(
+          padding: EdgeInsets.only(right: 12.px, bottom: 2.px),
+        )
+        .text(
+          fontFamily: FontFamily('Montserrat'),
+          fontSize: 20.px,
+        ),
+    css('.first-name').box(padding: EdgeInsets.only(top: 3.vh)).text(
+          fontFamily: FontFamily('Montserrat'),
+          fontWeight: FontWeight.w100,
+          lineHeight: 3.vh,
+        ),
+    css.fontFace(
+      family: 'PoppinsBold',
+      url: '/fonts/poppins/Poppins-Bold.ttf',
+    ),
+    css('.last-name').text(
+      fontFamily: FontFamily('PoppinsBold'),
+      fontWeight: FontWeight.bolder,
+    ),
+    css('.subtitle')
+        .flexbox(direction: FlexDirection.row, alignItems: AlignItems.center),
+    css('.dynamic-subtitles')
+        .box(margin: EdgeInsets.only(left: 15.px))
+        .text(fontSize: 18.px),
+    css('.socials')
+        .box(
+          padding: EdgeInsets.only(top: 2.vh),
+        )
+        .flexbox(
+          direction: FlexDirection.row,
+          alignItems: AlignItems.center,
+          justifyContent: JustifyContent.spaceBetween,
+        ),
+  ];
+}

lib/utils/assets.dart

@@ -0,0 +1,18 @@
+abstract class StaticAssets {
+  static const String waveGif = '/images/hi.gif';
+
+  /// Icons (SVG)
+  static const String playIcon = '/icons/play-solid.svg';
+
+  /// Profile Images
+  /// Three variants are required
+  /// 1. Black and white
+  /// 2. Colored image of same size
+  /// 3. Mobile image (Preferred with border and circular avatar)
+  ///
+  static const String bwImage = '/images/photos/black-white.png';
+  static const String coloredImage = '/images/photos/colored.png';
+  static const String mobileImage = '/images/photos/mobile.png';
+
+  /// Project Images
+}