initial start page

lib/pages/landing_page.dart

@@ -1,11 +1,42 @@
 import 'package:flutter/material.dart';
+import 'package:resume/services/breakpoints.dart';
+import 'package:resume/services/content_provider.dart';
+import 'package:resume/widgets/content_widget.dart';
 
-class LandingPage extends StatelessWidget {
+class LandingPage extends StatefulWidget {
   const LandingPage({super.key});
+
   static const String routeName = '/';
 
+  @override
+  State<LandingPage> createState() => _LandingPageState();
+}
+
+class _LandingPageState extends State<LandingPage> {
+  bool loadingDone = false;
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      await ContentProvider.init();
+      setState(() => loadingDone = true);
+    });
+  }
+
+  double _getPageWidth() {
+    final width = MediaQuery.of(context).size.width;
+    // if (width < Breakpoints.sm) return width;
+    if (width < Breakpoints.md) return width * 0.95;
+    if (width < Breakpoints.lg) return width * 0.8;
+    if (width < Breakpoints.xl) return width * 0.7;
+    if (width < Breakpoints.xl2) return width * 0.6;
+    return width * 0.5;
+  }
+
   @override
   Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
     return Scaffold(
       appBar: AppBar(
         title: const Text('Landing'),
@@ -13,6 +44,65 @@ class LandingPage extends StatelessWidget {
           TextButton(onPressed: () {}, child: const Text('Source Code')),
         ],
       ),
+      body: !loadingDone
+          // While the content is being loaded from JSON, show a LoadingIndicator
+          ? const Center(
+              child: Column(
+                mainAxisSize: MainAxisSize.max,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  CircularProgressIndicator(),
+                  Padding(padding: EdgeInsets.symmetric(vertical: 10)),
+                  Text('Loading...')
+                ],
+              ),
+            )
+          : SingleChildScrollView(
+              child: Stack(
+                children: [
+                  Align(
+                    alignment: Alignment.topRight,
+                    child: SizedBox(
+                      width: (MediaQuery.of(context).size.width -
+                              _getPageWidth()) /
+                          2,
+                      child: screenWidth >= Breakpoints.xl2
+                          ? Padding(
+                              padding:
+                                  const EdgeInsets.symmetric(horizontal: 50),
+                              child: ContentBox(
+                                title: 'Fähigkeiten',
+                                content: ContentProvider.skills,
+                                contentType: ContentType.skills,
+                              ),
+                            )
+                          : null,
+                    ),
+                  ),
+                  Center(
+                    child: SizedBox(
+                      width: _getPageWidth(),
+                      child: Column(
+                        children: [
+                          ContentBox(
+                            title: 'Arbeitserfahrung',
+                            content: ContentProvider.experience,
+                            contentType: ContentType.experience,
+                          ),
+                          const Padding(
+                              padding: EdgeInsets.symmetric(vertical: 15)),
+                          ContentBox(
+                            title: 'Bildungsweg',
+                            content: ContentProvider.education,
+                            contentType: ContentType.education,
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
     );
   }
 }

lib/widgets/content_list_tile.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:resume/services/breakpoints.dart';
 
 class ContentListTile extends StatelessWidget {
   const ContentListTile(
@@ -19,14 +20,22 @@ class ContentListTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final width = MediaQuery.of(context).size.width;
+
     return ListTile(
       contentPadding: const EdgeInsets.all(0),
-      title: Row(
+      title: Column(
-        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          if (name != null) Text(name!),
+          Row(
-          if (location != null) Text(', $location'),
+            mainAxisAlignment: MainAxisAlignment.start,
-          if (title != null) Text(' - $title'),
+            children: [
+              if (name != null) Text(name!),
+              if (location != null) Text(', $location'),
+              if (title != null && Breakpoints.xl < width) Text(' - $title'),
+            ],
+          ),
+          if (title != null && Breakpoints.xl >= width) Text('$title'),
         ],
       ),
       titleAlignment: ListTileTitleAlignment.titleHeight,

lib/widgets/content_widget.dart

@@ -16,20 +16,25 @@ class ContentBox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Card(
-      mainAxisSize: MainAxisSize.max,
+      child: Padding(
-      crossAxisAlignment: CrossAxisAlignment.start,
+        padding: EdgeInsets.all(20),
-      children: [
+        child: Column(
-        Text(
+          mainAxisSize: MainAxisSize.max,
-          title,
+          crossAxisAlignment: CrossAxisAlignment.start,
-          style: Theme.of(context).textTheme.headlineMedium,
+          children: [
+            Text(
+              title,
+              style: Theme.of(context).textTheme.headlineMedium,
+            ),
+            ListView.builder(
+              shrinkWrap: true,
+              itemCount: content.length,
+              itemBuilder: (context, index) => _buildListTile(content[index]),
+            ),
+          ],
         ),
-        ListView.builder(
+      ),
-          shrinkWrap: true,
-          itemCount: content.length,
-          itemBuilder: (context, index) => _buildListTile(content[index]),
-        ),
-      ],
     );
   }