Compare commits

...

2 Commits

Author SHA1 Message Date
fc1823aec0 Refactoring 2024-12-03 01:06:58 +01:00
634ecce4d9 Implemented breaking points for varios screen sizes 2024-12-03 00:54:49 +01:00
5 changed files with 196 additions and 93 deletions

View File

@@ -26,7 +26,7 @@ class _LandingPageState extends State<LandingPage> {
}); });
} }
double _getPageWidth() { double _getMainContentWidth() {
final width = MediaQuery.of(context).size.width; final width = MediaQuery.of(context).size.width;
// if (width < Breakpoints.sm) return width; // if (width < Breakpoints.sm) return width;
if (width < Breakpoints.md) return width * 0.95; if (width < Breakpoints.md) return width * 0.95;
@@ -36,9 +36,136 @@ class _LandingPageState extends State<LandingPage> {
return width * 0.5; return width * 0.5;
} }
double _getSidebarWidth() =>
(MediaQuery.of(context).size.width - _getMainContentWidth()) / 2;
Widget _getSideBar() {
return ContentBox(
title: 'Fähigkeiten',
content: ContentProvider.skills,
contentType: ContentType.skills,
);
}
Widget _getMainContent() {
return Column(
children: [
ContentBox(
title: 'Arbeitserfahrung',
content: ContentProvider.experience,
contentType: ContentType.experience,
),
const Padding(padding: EdgeInsets.only(bottom: 25)),
ContentBox(
title: 'Bildungsweg',
content: ContentProvider.education,
contentType: ContentType.education,
),
],
);
}
Widget _buildLayout(BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > Breakpoints.xl2) {
return Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: _getSidebarWidth(),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: _getSidebarWidth(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: _getSideBar(),
),
),
),
Center(
child: SizedBox(
width: _getMainContentWidth(),
child: _getMainContent(),
),
),
],
);
} else if (constraints.maxWidth > Breakpoints.xl) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Column(
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: _getSideBar(),
),
],
),
),
SizedBox(
width: 900,
child: _getMainContent(),
),
const Padding(padding: EdgeInsets.only(right: 50)),
],
);
} else if (constraints.maxWidth > Breakpoints.lg) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
const Profile(),
_getSideBar(),
],
),
),
),
SizedBox(
width: 650,
child: _getMainContent(),
),
const Padding(padding: EdgeInsets.only(right: 25)),
],
);
} else {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column(
children: [
const Profile(),
const Padding(padding: EdgeInsets.only(bottom: 25)),
_getMainContent(),
const Padding(padding: EdgeInsets.only(bottom: 25)),
_getSideBar(),
],
),
);
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: const Text('Landing'), title: const Text('Landing'),
@@ -47,7 +174,6 @@ class _LandingPageState extends State<LandingPage> {
], ],
), ),
body: !loadingDone body: !loadingDone
// While the content is being loaded from JSON, show a LoadingIndicator
? const Center( ? const Center(
child: Column( child: Column(
mainAxisSize: MainAxisSize.max, mainAxisSize: MainAxisSize.max,
@@ -60,70 +186,15 @@ class _LandingPageState extends State<LandingPage> {
), ),
) )
: SingleChildScrollView( : SingleChildScrollView(
child: Stack( child: LayoutBuilder(
children: [ builder: _buildLayout,
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: (MediaQuery.of(context).size.width -
_getPageWidth()) /
2,
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 50),
child: Profile(),
),
),
),
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,
),
],
),
),
),
],
), ),
), ),
); );
} }
} }
_launchURL() async { void _launchURL() async {
final Uri url = Uri.parse('https://git.skup.in/marco/resume'); final Uri url = Uri.parse('https://git.skup.in/marco/resume');
if (await launchUrl(url)) { await launchUrl(url);
throw Exception('Could not launch $url');
}
} }

View File

@@ -30,7 +30,10 @@ class ContentListTile extends StatelessWidget {
Row( Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
if (name != null) Text(name!), if (name != null)
Text(
name!,
),
if (location != null) Text(', $location'), if (location != null) Text(', $location'),
if (title != null && Breakpoints.xl < width) Text(' - $title'), if (title != null && Breakpoints.xl < width) Text(' - $title'),
], ],
@@ -39,8 +42,26 @@ class ContentListTile extends StatelessWidget {
], ],
), ),
titleAlignment: ListTileTitleAlignment.titleHeight, titleAlignment: ListTileTitleAlignment.titleHeight,
subtitle: description != null ? Text(description!) : null, subtitle: description != null
trailing: startDate != null && endDate != null ? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(padding: EdgeInsets.only(top: 8)),
if (startDate != null &&
endDate != null &&
Breakpoints.sm >= width)
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
_getTimeString(startDate!, endDate!),
style: Theme.of(context).textTheme.labelSmall,
),
),
Text(description!),
],
)
: null,
trailing: startDate != null && endDate != null && Breakpoints.sm < width
? Text(_getTimeString(startDate!, endDate!)) ? Text(_getTimeString(startDate!, endDate!))
: null, : null,
); );

View File

@@ -27,6 +27,7 @@ class ContentBox extends StatelessWidget {
title, title,
style: Theme.of(context).textTheme.headlineMedium, style: Theme.of(context).textTheme.headlineMedium,
), ),
const Padding(padding: EdgeInsets.only(bottom: 8)),
ListView.builder( ListView.builder(
shrinkWrap: true, shrinkWrap: true,
itemCount: content.length, itemCount: content.length,

View File

@@ -6,33 +6,39 @@ class Profile extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Card( return Card(
child: Padding( child: SizedBox(
padding: const EdgeInsets.all(20), width: double.infinity,
child: Column( child: Padding(
children: [ padding: const EdgeInsets.all(20),
Container( child: Column(
constraints: const BoxConstraints(maxWidth: 200), children: [
child: ClipRRect( Container(
borderRadius: BorderRadius.circular(180), constraints: const BoxConstraints(maxWidth: 200),
child: Image.asset('assets/profile.jpg'), child: ClipRRect(
borderRadius: BorderRadius.circular(180),
child: Image.asset('assets/profile.jpg'),
),
), ),
), const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), Text(
Text( 'Marco Skupin',
'Marco Skupin', textAlign: TextAlign.center,
style: Theme.of(context).textTheme.displayMedium, style: Theme.of(context).textTheme.displayMedium,
), ),
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
Text( Text(
'Master of Science', 'Master of Science',
style: Theme.of(context).textTheme.titleLarge, textAlign: TextAlign.center,
), style: Theme.of(context).textTheme.titleLarge,
const Padding(padding: EdgeInsets.symmetric(vertical: 5)), ),
Text( const Padding(padding: EdgeInsets.symmetric(vertical: 5)),
'marco@skup.in', Text(
style: Theme.of(context).textTheme.bodyMedium, 'marco@skup.in',
), textAlign: TextAlign.center,
], style: Theme.of(context).textTheme.bodyMedium,
),
],
),
), ),
), ),
); );

View File

@@ -17,11 +17,15 @@ class SkillListTile extends StatelessWidget {
title: Row( title: Row(
children: [ children: [
Expanded(flex: 2, child: Text(name)), Expanded(flex: 2, child: Text(name)),
const Padding(padding: EdgeInsets.only(bottom: 8)),
if (percentage != null) if (percentage != null)
Expanded( Expanded(
flex: 5, flex: 5,
child: LinearProgressIndicator( child: Padding(
value: double.parse(percentage!) / 100, padding: const EdgeInsets.only(left: 8.0),
child: LinearProgressIndicator(
value: double.parse(percentage!) / 100,
),
), ),
), ),
], ],