diff --git a/lib/components/nav_bar.dart b/lib/components/nav_bar.dart index 5634462f..81497d43 100644 --- a/lib/components/nav_bar.dart +++ b/lib/components/nav_bar.dart @@ -9,9 +9,9 @@ class NavBar extends StatelessComponent { Iterable 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, ), ]; } diff --git a/lib/jaspr_options.dart b/lib/jaspr_options.dart index ee466517..adf320ec 100644 --- a/lib/jaspr_options.dart +++ b/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('app'), + prefix4.App: ClientTarget('app'), prefix0.AppButton: ClientTarget('components/app_button', params: _prefix0AppButton), }, styles: () => [ ...prefix0.AppButton.styles, ...prefix1.NavBar.styles, ...prefix2.Home.styles, - ...prefix3.AppState.styles, + ...prefix3.BasicInfoSectionState.styles, + ...prefix4.AppState.styles, ], ); diff --git a/lib/main.dart b/lib/main.dart index 80f7e4e0..abb2778e 100644 --- a/lib/main.dart +++ b/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(), )); diff --git a/lib/pages/home.dart b/lib/pages/home.dart index fcb20f8c..09818e7c 100644 --- a/lib/pages/home.dart +++ b/lib/pages/home.dart @@ -1,4 +1,5 @@ import 'package:devfolio/components/nav_bar.dart'; +import 'package:devfolio/sections/basic_info.dart'; import 'package:jaspr/jaspr.dart'; class Home extends StatelessComponent { @@ -6,12 +7,10 @@ class Home extends StatelessComponent { @override Iterable build(BuildContext context) sync* { - yield div( - classes: 'home-body', - [ - NavBar(), - ], - ); + yield div(classes: 'home-body', [ + NavBar(), + BasicInfoSection(), + ]); } @css diff --git a/lib/sections/basic_info.dart b/lib/sections/basic_info.dart new file mode 100644 index 00000000..491c873f --- /dev/null +++ b/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 { + @override + Iterable 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 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, + ), + ]; +} diff --git a/lib/utils/assets.dart b/lib/utils/assets.dart new file mode 100644 index 00000000..661a1365 --- /dev/null +++ b/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 +} diff --git a/web/fonts/poppins/Poppins-Bold.ttf b/web/fonts/poppins/Poppins-Bold.ttf new file mode 100644 index 00000000..b94d47f3 Binary files /dev/null and b/web/fonts/poppins/Poppins-Bold.ttf differ diff --git a/web/icons/play-solid.svg b/web/icons/play-solid.svg new file mode 100644 index 00000000..36054df9 --- /dev/null +++ b/web/icons/play-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file