Add snapping header in mobile view

thecodepapaya · Aug 30, 2021 · 7cfbea4 · 7cfbea4
1 parent 797525b
commit 7cfbea4
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 47 deletions.
diff --git a/lib/404.dart b/lib/404.dart
@@ -43,10 +43,6 @@ class _NotFound404State extends State<NotFound404> {
                     S.of(context).notFoundDespise,
                 style: textStyle,
               ),
-              // Text(
-              //   S.of(context).notFoundDespise,
-              //   style: textStyle,
-              // ),
               MouseRegion(
                 onEnter: (e) {
                   setState(() {

diff --git a/lib/about/about.dart b/lib/about/about.dart
@@ -113,6 +113,7 @@ class About extends StatelessWidget {
         Constants.aboutTabletBottomPadding,
       ),
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,

diff --git a/lib/blogs/blog_card.dart b/lib/blogs/blog_card.dart
@@ -65,7 +65,7 @@ class BlogCard extends StatelessWidget {
                 ),
                 SizedBox(width: 8),
                 Text("${data.read} "),
-                Text(S.of(context).blogMin),
+                Text(S.of(context).blogMinutes),
               ],
             ),
           ],

diff --git a/lib/generated/intl/messages_en.dart b/lib/generated/intl/messages_en.dart
@@ -33,7 +33,7 @@ class MessageLookup extends MessageLookupByLibrary {
         "aboutDesc": MessageLookupByLibrary.simpleMessage(
             "I am Ashutosh Singh, also known by the username thecodepapaya, currently pursuing my bachelor\'s degree majoring in computer science from Indian Institiute of Information Technology, Vadodara."),
         "aboutGreeting": m0,
-        "blogMin": MessageLookupByLibrary.simpleMessage("Min"),
+        "blogMinutes": MessageLookupByLibrary.simpleMessage("Min"),
         "footerCredit": MessageLookupByLibrary.simpleMessage(
             "Based on designs by Nicolas Meuzard"),
         "notFoundDespise": MessageLookupByLibrary.simpleMessage(

diff --git a/lib/generated/l10n.dart b/lib/generated/l10n.dart
diff --git a/lib/homepage.dart b/lib/homepage.dart
@@ -3,11 +3,13 @@ import 'package:portfolio/about/about.dart';
 import 'package:portfolio/about/tabs.dart';
 import 'package:portfolio/blogs/blogs.dart';
 import 'package:portfolio/components/footer.dart';
+import 'package:portfolio/style/colours.dart';
 import 'package:portfolio/utils/constants.dart';
 import 'package:portfolio/experience/experience.dart';
 import 'package:portfolio/generated/l10n.dart';
 import 'package:portfolio/projects/projects.dart';
 import 'package:responsive_builder/responsive_builder.dart';
+import 'package:sticky_headers/sticky_headers.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
 class HomePage extends StatefulWidget {
@@ -148,48 +150,74 @@ class _HomePageState extends State<HomePage> {
   }
 
   Widget mobileView(BuildContext context) {
-    return SingleChildScrollView(
+    List<Widget> mobileWidgets = [
+      About(tabData: tabData),
+      SizedBox(height: 50),
+      projectHeader(),
+      experienceHeader(),
+      blogHeader(),
+      Footer(),
+    ];
+    return ListView.builder(
+      itemCount: mobileWidgets.length,
       physics: BouncingScrollPhysics(),
-      child: Column(
-        children: [
-          About(tabData: tabData),
-          SizedBox(height: 50),
-          Align(
-            alignment: Alignment.centerLeft,
-            child: Padding(
-              padding: const EdgeInsets.all(Constants.cardMargin),
-              child: Text(
-                S.of(context).tabProjects,
-                style: Theme.of(context).textTheme.headline5,
-              ),
-            ),
+      itemBuilder: (context, index) {
+        return mobileWidgets[index];
+      },
+    );
+  }
+
+  Widget projectHeader() {
+    return StickyHeader(
+      header: Container(
+        padding: EdgeInsets.only(bottom: 8),
+        width: double.infinity,
+        color: ColorPalette.background,
+        child: Padding(
+          padding: const EdgeInsets.all(Constants.cardMargin),
+          child: Text(
+            S.of(context).tabProjects.split("  ")[1],
+            style: Theme.of(context).textTheme.headline5,
           ),
-          Projects(),
-          Align(
-            alignment: Alignment.centerLeft,
-            child: Padding(
-              padding: const EdgeInsets.all(Constants.cardMargin),
-              child: Text(
-                S.of(context).tabExperience,
-                style: Theme.of(context).textTheme.headline5,
-              ),
-            ),
+        ),
+      ),
+      content: Projects(),
+    );
+  }
+
+  Widget experienceHeader() {
+    return StickyHeader(
+      header: Container(
+        padding: EdgeInsets.only(bottom: 8),
+        width: double.infinity,
+        color: ColorPalette.background,
+        child: Padding(
+          padding: const EdgeInsets.all(Constants.cardMargin),
+          child: Text(
+            S.of(context).tabExperience.split("  ")[1],
+            style: Theme.of(context).textTheme.headline5,
           ),
-          Experience(),
-          Align(
-            alignment: Alignment.centerLeft,
-            child: Padding(
-              padding: const EdgeInsets.all(Constants.cardMargin),
-              child: Text(
-                S.of(context).tabBlog,
-                style: Theme.of(context).textTheme.headline5,
-              ),
-            ),
+        ),
+      ),
+      content: Experience(),
+    );
+  }
+
+  Widget blogHeader() {
+    return StickyHeader(
+      header: Container(
+        padding: EdgeInsets.only(bottom: 8),
+        width: double.infinity,
+        color: ColorPalette.background,
+        child: Padding(
+          padding: const EdgeInsets.all(Constants.cardMargin),
+          child: Text(
+            S.of(context).tabBlog.split("  ")[1],
+            style: Theme.of(context).textTheme.headline5,
           ),
-          Blogs(),
-          Footer(),
-        ],
+        ),
       ),
+      content: Blogs(),
     );
   }
 

diff --git a/lib/l10n/intl_en.arb b/lib/l10n/intl_en.arb
@@ -1,7 +1,7 @@
 {
     "aboutDesc": "I am Ashutosh Singh, also known by the username thecodepapaya, currently pursuing my bachelor's degree majoring in computer science from Indian Institiute of Information Technology, Vadodara.",
     "aboutGreeting": "{greeting, select, em {Good morning, early bird} m {Good Morning} a {Good Afternoon} e {Good Evening} n {Hi there, night owl} other {Hello}}. I'm ",
-    "blogMin": "Min",
+    "blogMinutes": "Min",
     "footerCredit": "Based on designs by Nicolas Meuzard",
     "notFoundDespise": "Looks like you are lost ... on a single page application, duh!",
     "notFoundHome": "Take me back to 127.0.0.1",

diff --git a/web/index.html b/web/index.html
@@ -21,7 +21,7 @@
   <meta property="og:title" content="Ashutosh Singh">
   <meta property="og:image"
     content="https://user-images.githubusercontent.com/42690541/131256227-917d692e-78d5-41a4-b803-a93da50d72da.png">
-  <meta property="og:description" content="Portfolio website Ashutosh Singh">
+  <meta property="og:description" content="Ashutosh Singh is a full stack engineer from IIITV">
   <meta property="og:url" content="https://thecodepapaya.me">
   <meta property="og:type" content="website" />
   <meta name="twitter:card" content="summary_large_image">