abuanwar072 · septiannuriyanto · Oct 22, 2023 · Oct 22, 2023
diff --git a/README.md b/README.md
@@ -6,8 +6,18 @@
 
 A nice clean Portfolio Website for Designer or developers. Which includes almost everything that you want to show. At first, your name and a big picture. Then the About section shows more info about you with a cool experience card. Then the list of Services that you offer. It also has a hire me card then it also has a section where it shows some recent work, then what your clients say about you. At the bottom contact me form.
 
-### Protfolio Website Final UI
+
+
+
 
 ![App UI](/intro.gif)
 <br>
 <img src="/Portfolio.png" alt="portfolio" width="600">
+
+
+### Portfolio Website Final UI
+### Update at 23 Oct 2023
+This UI is now Responsible!<br>
+Updated and committed by Septian Nuriyanto<br>
+https://github.com/septiannuriyanto <br>
+https://linkedin.com/in/septian-n
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -6,7 +6,7 @@
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
     <application
-        android:name="io.flutter.app.FlutterApplication"
+        android:name="${applicationName}"
         android:label="web_app"
         android:icon="@mipmap/ic_launcher">
         <activity

diff --git a/android/build.gradle b/android/build.gradle
@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.3.50'
+    ext.kotlin_version = '1.9.10'
     repositories {
         google()
         jcenter()
@@ -26,6 +26,6 @@ subprojects {
     project.evaluationDependsOn(':app')
 }
 
-task clean(type: Delete) {
+tasks.register("clean", Delete) {
     delete rootProject.buildDir
 }
diff --git a/lib/components/default_button.dart b/lib/components/default_button.dart
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 import '../constants.dart';
 
-class DefaultButton extends StatelessWidget {
-  const DefaultButton({
+class DefaultButton extends GetResponsiveView {
+  DefaultButton({
     Key? key,
     required this.imageSrc,
     required this.text,
@@ -14,7 +15,7 @@ class DefaultButton extends StatelessWidget {
   final Function()? press;
 
   @override
-  Widget build(BuildContext context) {
+  Widget builder() {
     return TextButton(
       style: TextButton.styleFrom(
         foregroundColor: Color(0xFFE8F0F9),
@@ -25,13 +26,27 @@ class DefaultButton extends StatelessWidget {
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
       ),
       onPressed: press,
-      child: Row(
-        children: [
-          Image.asset(imageSrc, height: 40),
-          SizedBox(width: kDefaultPadding),
-          Text(text),
-        ],
-      ),
+      child: screen.isPhone
+          ? Column(
+              children: [
+                Image.asset(imageSrc, height: 40),
+                SizedBox(width: kDefaultPadding),
+                Text(
+                  text,
+                  style: TextStyle(color: Colors.blue),
+                ),
+              ],
+            )
+          : Row(
+              children: [
+                Image.asset(imageSrc, height: 40),
+                SizedBox(width: kDefaultPadding),
+                Text(
+                  text,
+                  style: TextStyle(color: Colors.blue),
+                ),
+              ],
+            ),
     );
   }
 }
diff --git a/lib/components/hireme_card.dart b/lib/components/hireme_card.dart
@@ -1,58 +1,126 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 import '../constants.dart';
 import 'default_button.dart';
 
-class HireMeCard extends StatelessWidget {
-  const HireMeCard({
+class HireMeCard extends GetResponsiveView {
+  HireMeCard({
     Key? key,
   }) : super(key: key);
 
+  @override
+  Widget builder() {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Container(
+          padding: EdgeInsets.all(kDefaultPadding * 2),
+          // constraints: BoxConstraints(maxWidth: 1110),
+          decoration: BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.circular(20),
+            boxShadow: [kDefaultShadow],
+          ),
+          child: screen.isDesktop ? HireMeDesktop() : HireMeMobile()),
+    );
+  }
+}
+
+class HireMeDesktop extends StatelessWidget {
+  const HireMeDesktop({super.key});
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-      padding: EdgeInsets.all(kDefaultPadding * 2),
-      constraints: BoxConstraints(maxWidth: 1110),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(20),
-        boxShadow: [kDefaultShadow],
-      ),
-      child: Row(
-        children: [
-          Image.asset(
-            "assets/images/email.png",
+    return Row(
+      children: [
+        Image.asset(
+          "assets/images/email.png",
+          height: 80,
+          width: 80,
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
+          child: SizedBox(
             height: 80,
-            width: 80,
+            child: VerticalDivider(),
           ),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
-            child: SizedBox(
-              height: 80,
-              child: VerticalDivider(),
+        ),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              "Starting New Project?",
+              style: TextStyle(fontSize: 42, fontWeight: FontWeight.bold),
             ),
+            SizedBox(height: kDefaultPadding / 2),
+            Text(
+              "Get an estimate for the new project",
+              style: TextStyle(fontWeight: FontWeight.w200),
+            )
+          ],
+        ),
+        Expanded(child: Container()),
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: DefaultButton(
+            text: "Hire Me!",
+            imageSrc: "assets/images/hand.png",
+            press: () {},
           ),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  "Starting New Project?",
-                  style: TextStyle(fontSize: 42, fontWeight: FontWeight.bold),
+        )
+      ],
+    );
+  }
+}
+
+class HireMeMobile extends StatelessWidget {
+  const HireMeMobile({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: Get.width,
+      height: 140,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Row(
+            children: [
+              Expanded(
+                flex: 0,
+                child: Image.asset(
+                  "assets/images/email.png",
+                  height: 40,
+                  width: 40,
                 ),
-                SizedBox(height: kDefaultPadding / 2),
-                Text(
-                  "Get an estimate for the new project",
-                  style: TextStyle(fontWeight: FontWeight.w200),
-                )
-              ],
-            ),
+              ),
+              Expanded(
+                flex: 2,
+                child: Padding(
+                  padding: const EdgeInsets.only(left: 20.0),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        "Starting New Project?",
+                        style: TextStyle(fontWeight: FontWeight.bold),
+                      ),
+                      Text(
+                        "Get an estimate for the new project",
+                        style: TextStyle(fontWeight: FontWeight.w200),
+                      )
+                    ],
+                  ),
+                ),
+              ),
+            ],
           ),
           DefaultButton(
             text: "Hire Me!",
             imageSrc: "assets/images/hand.png",
             press: () {},
-          )
+          ),
         ],
       ),
     );

diff --git a/lib/components/my_outline_button.dart b/lib/components/my_outline_button.dart
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 import '../constants.dart';
 
-class MyOutlineButton extends StatelessWidget {
-  const MyOutlineButton({
+class MyOutlineButton extends GetResponsiveView {
+  MyOutlineButton({
     Key? key,
     required this.imageSrc,
     required this.text,
@@ -14,7 +15,7 @@ class MyOutlineButton extends StatelessWidget {
   final Function()? press;
 
   @override
-  Widget build(BuildContext context) {
+  Widget builder() {
     return FittedBox(
       child: OutlinedButton(
         style: OutlinedButton.styleFrom(
@@ -23,21 +24,32 @@ class MyOutlineButton extends StatelessWidget {
             horizontal: kDefaultPadding * 2.5,
           ),
           shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(50),
+            borderRadius: BorderRadius.circular(12),
           ),
           // borderSide: BorderSide(color: Color(0xFFEDEDED)),
         ),
         onPressed: press,
-        child: Row(
-          children: [
-            Image.asset(
-              imageSrc,
-              height: 40,
-            ),
-            SizedBox(width: kDefaultPadding),
-            Text(text)
-          ],
-        ),
+        child: screen.isPhone
+            ? Column(
+                children: [
+                  Image.asset(
+                    imageSrc,
+                    height: 40,
+                  ),
+                  SizedBox(width: kDefaultPadding),
+                  Text(text)
+                ],
+              )
+            : Row(
+                children: [
+                  Image.asset(
+                    imageSrc,
+                    height: 40,
+                  ),
+                  SizedBox(width: kDefaultPadding),
+                  Text(text)
+                ],
+              ),
       ),
     );
   }

diff --git a/lib/components/section_title.dart b/lib/components/section_title.dart
@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 import '../constants.dart';
 
-class SectionTitle extends StatelessWidget {
-  const SectionTitle({
+class SectionTitle extends GetResponsiveView {
+  SectionTitle({
     Key? key,
     required this.title,
     required this.subTitle,
@@ -14,7 +15,7 @@ class SectionTitle extends StatelessWidget {
   final Color color;
 
   @override
-  Widget build(BuildContext context) {
+  Widget builder() {
     return Container(
       margin: EdgeInsets.symmetric(vertical: kDefaultPadding),
       constraints: BoxConstraints(maxWidth: 1110),
@@ -44,10 +45,11 @@ class SectionTitle extends StatelessWidget {
               ),
               Text(
                 title,
-                style: Theme.of(context)
-                    .textTheme
-                    .displayMedium!
-                    .copyWith(fontWeight: FontWeight.bold, color: Colors.black),
+                style: screen.isDesktop
+                    ? Theme.of(Get.context!).textTheme.displayMedium!.copyWith(
+                        fontWeight: FontWeight.bold, color: Colors.black)
+                    : Theme.of(Get.context!).textTheme.titleLarge!.copyWith(
+                        fontWeight: FontWeight.bold, color: Colors.black),
               )
             ],
           )

diff --git a/lib/constants/menus.dart b/lib/constants/menus.dart
@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+List<String> menuItems = [
+  "Home",
+  "About",
+  "Services",
+  "Portfolio",
+  "Testimonial",
+  "Contact"
+];
+
+List<IconData> menuIcons = [
+  Icons.home,
+  Icons.info_outline,
+  Icons.store_mall_directory_sharp,
+  Icons.library_books,
+  Icons.chat_bubble_rounded,
+  Icons.phone_outlined
+];
diff --git a/lib/constants/theme.dart b/lib/constants/theme.dart
@@ -0,0 +1,3 @@
+import 'package:flutter/material.dart';
+
+Color navbarColor = Color.fromRGBO(128, 179, 194, 100);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import 'package:flutter/material.dart';

		Color navbarColor = Color.fromRGBO(128, 179, 194, 100);