From e7c89e8db92a7b8ed3ff350d76cd0a5cb04c000e Mon Sep 17 00:00:00 2001
From: Tushar Nikam <champ96k@gmail.com>
Date: Tue, 1 Dec 2020 02:35:27 +0530
Subject: [PATCH] some changes with new update

---
 index.html                       |   7 +-
 lib/UI/About.dart                |  12 +-
 lib/UI/Home.dart                 |   2 +-
 lib/UI/HomePage.dart             |  88 +++++----
 lib/UI/Work.dart                 | 312 +++++++++++--------------------
 lib/Widget/MobileWork.dart       | 206 ++++++++------------
 lib/Widget/MobileWorkBox.dart    |  45 +++++
 lib/Widget/Workbox.dart          |  45 +++++
 lib/Widget/work_custom_data.dart |  53 ++++++
 lib/main.dart                    |  14 +-
 10 files changed, 392 insertions(+), 392 deletions(-)
 create mode 100644 lib/Widget/MobileWorkBox.dart
 create mode 100644 lib/Widget/Workbox.dart
 create mode 100644 lib/Widget/work_custom_data.dart
diff --git a/index.html b/index.html
index 2b47406..c1e7d15 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
+<head> 
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
   <meta name="description" content="A new Flutter project.">
@@ -11,6 +11,9 @@
   <meta name="apple-mobile-web-app-title" content="potrtfolio">
   <link rel="apple-touch-icon" href="icons/Icon-192.png">
 
+
+  
+
   <!-- Favicon -->
   <link rel="shortcut icon" type="image/png" href="favicon.png"/>
 
@@ -22,7 +25,7 @@
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
   <script>
-    if ('serviceWorker' in navigator) {
+    if ('serviceWorker' in navigator) { 
       window.addEventListener('load', function () {
         navigator.serviceWorker.register('flutter_service_worker.js?v=3217070650');
       });
diff --git a/lib/UI/About.dart b/lib/UI/About.dart
index 293cdab..ea50cff 100644
--- a/lib/UI/About.dart
+++ b/lib/UI/About.dart
@@ -28,15 +28,14 @@ class About extends StatelessWidget {
   Widget build(BuildContext context) {
     var size = MediaQuery.of(context).size;
     return Container(
-      height: MediaQuery.of(context).size.height,
-      width: MediaQuery.of(context).size.width - 100,
+      height: size.height,
+      width:size.width - 100,
       child: Row(
         children: [
           //About me
           Container(
             height: size.height * 0.9,
             width: size.width / 2 - 100,
-            //color: Colors.purple,
             child: Column(
               children: [
                 //About me title
@@ -59,7 +58,7 @@ class About extends StatelessWidget {
                       fontWeight: FontWeight.w700,
                     ),
                     SizedBox(
-                      width: MediaQuery.of(context).size.width * 0.01,
+                      width: size.width * 0.01,
                     ),
                     Container(
                       width: size.width / 4,
@@ -104,7 +103,7 @@ class About extends StatelessWidget {
                 Container(
                   height: size.height * 0.15,
                   width: size.width,
-                  child: Row(
+                  child: Wrap(  
                     children: [
                       Container(
                         width: size.width * 0.20,
@@ -126,6 +125,7 @@ class About extends StatelessWidget {
                             technology(context, "C/C++, Java."),
                             technology(context, "HTML & (S)CSS"),
                             technology(context, "MYSQL"),
+                            technology(context, "Git - Github"),
                           ],
                         ),
                       )
@@ -178,7 +178,9 @@ class CustomImageAnimation extends StatefulWidget {
 
 class _CustomImageAnimationState extends State<CustomImageAnimation> {
   Color customImageColor = Color(0xff61F9D5).withOpacity(0.5);
+  // ignore: unused_field
   int _enterCounter = 0;
+  // ignore: unused_field
   int _exitCounter = 0;
   double x = 0.0;
   double y = 0.0;
diff --git a/lib/UI/Home.dart b/lib/UI/Home.dart
index 84dd678..93d9d48 100644
--- a/lib/UI/Home.dart
+++ b/lib/UI/Home.dart
@@ -12,7 +12,7 @@ class _HomeState extends State<Home> {
   Widget build(BuildContext context) {
     return LayoutBuilder(
       builder: (context, constraints) {
-        if (constraints.maxWidth >= 1100) {
+        if (constraints.maxWidth >= 1000) {
           return HomePage();
         } else {
           return MobileHome();
diff --git a/lib/UI/HomePage.dart b/lib/UI/HomePage.dart
index f29cc2d..ed85356 100644
--- a/lib/UI/HomePage.dart
+++ b/lib/UI/HomePage.dart
@@ -71,16 +71,19 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
-    var size = MediaQuery.of(context).size;
+    final Size size = MediaQuery.of(context).size;
     return Scaffold(
         backgroundColor: Color(0xff0A192F),
-        body: Container(
+        body: SingleChildScrollView(
+          physics: ScrollPhysics(),
+          primary: true,
+          scrollDirection: Axis.vertical,
           child: Column(
             children: [
               //Mavigation Bar
               Container(
-                height: 82,
-                width: MediaQuery.of(context).size.width,
+                height: size.height * 0.14,
+                width: size.width,
                 child: Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 16.0),
                   child: Row(
@@ -116,12 +119,12 @@ class _HomePageState extends State<HomePage> {
                                 ),
                                 Tab(
                                   child: AppBarTitle(
-                                    text: 'Work',
+                                    text: 'Project',
                                   ),
                                 ),
                                 Tab(
                                   child: AppBarTitle(
-                                    text: 'About',
+                                    text: 'Contact Us',
                                   ),
                                 ),
                               ],
@@ -139,8 +142,8 @@ class _HomePageState extends State<HomePage> {
                           ),
                           child: Container(
                             margin: EdgeInsets.all(0.85),
-                            height: 100,
-                            width: 100,
+                            height: size.height * 0.07,
+                            width: size.height * 0.20,
                             alignment: Alignment.center,
                             decoration: BoxDecoration(
                               color: Color(0xff0A192F),
@@ -178,7 +181,6 @@ class _HomePageState extends State<HomePage> {
                   Container(
                     width: size.width * 0.09,
                     height: size.height - 82,
-                    // color: Colors.pinkAccent,
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.end,
                       children: [
@@ -222,7 +224,7 @@ class _HomePageState extends State<HomePage> {
                         Padding(
                           padding: const EdgeInsets.only(top: 16.0),
                           child: Container(
-                            height: 100,
+                            height: size.height * 0.20,
                             width: 2,
                             color: Colors.grey.withOpacity(0.4),
                           ),
@@ -244,7 +246,7 @@ class _HomePageState extends State<HomePage> {
                                 crossAxisAlignment: CrossAxisAlignment.start,
                                 children: [
                                   SizedBox(
-                                    height: 92.0,
+                                    height: size.height * .06,
                                   ),
                                   CustomText(
                                     text: "Hi, my name is",
@@ -272,7 +274,7 @@ class _HomePageState extends State<HomePage> {
                                     fontWeight: FontWeight.w700,
                                   ),
                                   SizedBox(
-                                    height: 16.0,
+                                    height: size.height * .04,
                                   ),
                                   Wrap(
                                     children: [
@@ -288,68 +290,67 @@ class _HomePageState extends State<HomePage> {
                                     ],
                                   ),
                                   SizedBox(
-                                    height: 92.0,
+                                    height: size.height * .12,
                                   ),
-                                  Card(
-                                    shape: RoundedRectangleBorder(
-                                      borderRadius: BorderRadius.circular(4.0),
-                                    ),
-                                    color: Color(0xff64FFDA),
+
+                                  //get in tuch text
+                                  InkWell(
+                                    onTap: () {
+                                      method.launchEmail();
+                                    },
+                                    hoverColor:
+                                        Color(0xff64FFDA).withOpacity(0.2),
+                                    borderRadius: BorderRadius.circular(4.0),
                                     child: Container(
                                       alignment: Alignment.center,
-                                      margin: EdgeInsets.all(0.75),
-                                      height: 56.0,
-                                      width: 160.0,
+                                      height: size.height * 0.09,
+                                      width: size.width * 0.14,
                                       decoration: BoxDecoration(
+                                        border: Border.all(
+                                          color: Color(0xff64FFDA),
+                                        ),
                                         borderRadius:
                                             BorderRadius.circular(4.0),
-                                        color: Color(0xff0A192F),
                                       ),
-                                      child: MaterialButton(
-                                        onPressed: () {
-                                          method.launchEmail();
-                                        },
-                                        hoverColor: Colors.green,
-                                        child: Text(
-                                          "Get In Touch",
-                                          style: TextStyle(
-                                            color: Color(0xff64FFDA),
-                                            letterSpacing: 2.75,
-                                            wordSpacing: 1.0,
-                                            fontSize: 15.0,
-                                          ),
+                                      child: Text(
+                                        "Get In Touch",
+                                        style: TextStyle(
+                                          color: Color(0xff64FFDA),
+                                          letterSpacing: 2.75,
+                                          wordSpacing: 1.0,
+                                          fontSize: 15.0,
                                         ),
                                       ),
                                     ),
                                   ),
+
                                   SizedBox(
-                                    height: 150.0,
+                                    height: size.height * 0.20,
                                   ),
                                 ],
                               ),
 
-                              //About Me
+                              
 
+                              //About Me
                               _wrapScrollTag(
                                 index: 0,
                                 child: About(),
                               ),
                               SizedBox(
-                                height: 6.0,
+                                height: size.height * 0.02,
                               ),
 
                               //Where I've Worked
-
                               _wrapScrollTag(
                                 index: 1,
-                                child: Work(),
+                                child:Work()
                               ),
                               SizedBox(
-                                height: 6.0,
+                                height: size.height * 0.10,
                               ),
 
                               //Some Things I've Built Main Project
-
                               _wrapScrollTag(
                                   index: 2,
                                   child: Column(
@@ -515,7 +516,6 @@ class _HomePageState extends State<HomePage> {
                                       Container(
                                         height: size.height * 0.86,
                                         width: size.width - 100,
-                                        //color: Colors.deepOrangeAccent,
                                         child: Column(
                                           children: [
                                             Row(
@@ -585,7 +585,6 @@ class _HomePageState extends State<HomePage> {
                                       Container(
                                         height: size.height * 0.86,
                                         width: size.width - 100,
-                                        // color: Colors.indigo,
                                         child: Column(
                                           children: [
                                             Row(
@@ -655,7 +654,6 @@ class _HomePageState extends State<HomePage> {
                                       Container(
                                         height: size.height * 0.86,
                                         width: size.width - 100,
-                                        //color: Colors.deepOrangeAccent,
                                         child: Column(
                                           children: [
                                             Row(
diff --git a/lib/UI/Work.dart b/lib/UI/Work.dart
index e2dd7d6..b5014ba 100644
--- a/lib/UI/Work.dart
+++ b/lib/UI/Work.dart
@@ -1,219 +1,119 @@
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:potrtfolio/Widget/CustomText.dart';
-import 'package:steps/steps.dart';
+import 'package:potrtfolio/Widget/Workbox.dart';
 
-class Work extends StatelessWidget {
+class Work extends StatefulWidget {
   @override
-  Widget build(BuildContext context) {
-    var size = MediaQuery.of(context).size;
-    return Container(
-      height: MediaQuery.of(context).size.height * 1.45,   
-      width: MediaQuery.of(context).size.width - 100,
-      //color: Colors.tealAccent,
-      child:  Column( 
-          verticalDirection: VerticalDirection.down,
-          children: [
-            Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: [
-                CustomText(
-                  text: "02.",
-                  textsize: 20.0,
-                  color: Color(0xff61F9D5),
-                  fontWeight: FontWeight.w700,
-                ),
-                SizedBox(
-                  width: 12.0,
-                ),
-                CustomText(
-                  text: "Where I've Worked",
-                  textsize: 26.0,
-                  color: Color(0xffCCD6F6),
-                  fontWeight: FontWeight.w700,
-                ),
-                SizedBox(
-                  width: 26.0,
-                ),
-                Container(
-                  width: size.width / 4,
-                  height: 0.75,
-                  color: Color(0xff303C55),
-                ),
-              ],
-            ),
-            SizedBox(
-              height: size.height * 0.07,
-            ),
-            Container(
-              height: MediaQuery.of(context).size.height,
-              width: MediaQuery.of(context).size.width - 100,
-              alignment: Alignment.topCenter,
-              child: Steps(
-                direction: Axis.vertical,
-                size: 20.0,
-                path: {'color': Colors.lightBlue.shade200, 'width': 2.75},
-                steps: [
-                  {
-                    'color': Color(0xff64FFDA),
-                    'background': Colors.indigo,
-                    'label': '❒',
-                    'content': Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: <Widget>[
-                        Text(
-                          "Sandip Institute Of Engineering & Management Nashik",
-                          style: TextStyle(
-                            fontSize: 22.0,
-                            color: Color(0xffCCD6F6),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        SizedBox(
-                          height: 6.0,
-                        ),
-                        Text(
-                          "I am currently pursuing Bachelor's Degree in Computer Science and Engineering \nat Savitribai Phule Pune University",
-                          style: TextStyle(
-                            fontSize: 13.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        Text(
-                          "2016 - Present ",
-                          style: TextStyle(
-                            fontSize: 12.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                      ],
-                    ),
-                  },
-                  {
-                    'color': Color(0xff64FFDA),
-                    'background': Colors.indigo,
-                    'label': '❒',
-                    'content': Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: <Widget>[
-                        Text(
-                          "Flutter + Dart Development Winter Bootcamp",
-                          style: TextStyle(
-                            fontSize: 22.0,
-                            color: Color(0xffCCD6F6),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        SizedBox(
-                          height: 6.0,
-                        ),
-                        Text(
-                          "The Complete 2020 Flutter + Dart Winter Development Bootcamp at LCO Training Center,\nJaipur, Rajasthan (302017), Covering all the fundamental concepts for Flutter development",
-                          style: TextStyle(
-                            fontSize: 13.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        Text(
-                          "Dec - 2019 to Feb - 2020 ",
-                          style: TextStyle(
-                            fontSize: 12.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                      ],
-                    ),
-                  },
-                  {
-                    'color': Color(0xff64FFDA),
-                    'background': Colors.indigo,
-                    'label': '❒',
-                    'content': Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: <Widget>[
-                        Text(
-                          "Freelancer - Flutter | Dart Mobile App Developer | UI - UX Designer",
-                          style: TextStyle(
-                            fontSize: 22.0,
-                            color: Color(0xffCCD6F6),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        SizedBox(
-                          height: 6.0,
-                        ),
-                        Text(
-                          "Flutter Developer and experienced programmer with an extensive history of designing and coding \nsolutions. Skilled in Google’s Flutter/Dart, Firebase App and Web development on a global scale. If you \nare looking for someone that you can trust that will complete your app on time and on budget, then \nplease contact me. I have been developing software for 1+ years and take pride in everything I do.",
-                          style: TextStyle(
-                            fontSize: 13.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        Text(
-                          "Oct 2019 - Present ",
-                          style: TextStyle(
-                            fontSize: 12.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                      ],
-                    ),
-                  },
+  _WorkState createState() => _WorkState();
+}
 
-                  //Haking code
-                  {
-                    'color': Color(0xff64FFDA),
-                    'background': Colors.indigo,
-                    'label': '❒',
-                    'content': Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      mainAxisAlignment: MainAxisAlignment.start,
-                      children: <Widget>[
-                        Text(
-                          "Mentor at Contributor's Hack, 2020",
-                          style: TextStyle(
-                            fontSize: 22.0,
-                            color: Color(0xffCCD6F6),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        SizedBox(
-                          height: 6.0,
-                        ),
-                        Text(
-                          "Working as a mentor in HakinCode organization for Flutter CodeAsylums application \n where I can utilize my skills and be an asset to the organization",
-                          style: TextStyle(
-                            fontSize: 13.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
-                          ),
-                        ),
-                        Text(
-                          "Sep 2020 - Oct 2020 ",
-                          style: TextStyle(
-                            fontSize: 12.0,
-                            color: Color(0xffCCD6F6).withOpacity(0.5),
-                            fontWeight: FontWeight.w700,
+class _WorkState extends State<Work> {
+  @override
+  Widget build(BuildContext context) {
+    final Size size = MediaQuery.of(context).size;
+    return ConstrainedBox(
+      constraints: BoxConstraints.tightFor(
+        width: size.width,
+        height: size.height * 1.4,
+      ),
+      child: Column(
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              CustomText(
+                text: "02.",
+                textsize: 20.0,
+                color: Color(0xff61F9D5),
+                fontWeight: FontWeight.w700,
+              ),
+              SizedBox(
+                width: 12.0,
+              ),
+              CustomText(
+                text: "Where I've Worked",
+                textsize: 26.0,
+                color: Color(0xffCCD6F6),
+                fontWeight: FontWeight.w700,
+              ),
+              SizedBox(
+                width: size.width * 0.01,
+              ),
+              Container(
+                width: size.width / 4,
+                height: 1.10,
+                color: Color(0xff303C55),
+              ),
+            ],
+          ),
+          SizedBox(
+            height: size.height * 0.07,
+          ),
+          Row(
+            children: [
+              Expanded(
+                flex: 1,
+                child: Container(
+                    height: size.height * 1.2,
+                    //color: Colors.indigo,
+                    child: Stack(
+                      children: [
+                        Center(
+                          child: VerticalDivider(
+                            color: Color(0xff64FFDA),
+                            thickness: 1.75,
+                            width: 10,
+                            indent: 10,
+                            endIndent: 10,
                           ),
                         ),
+                        Container(
+                          child: Center(
+                              child: Column(
+                            mainAxisAlignment: MainAxisAlignment.spaceAround,
+                            children: [
+                              CircleAvatar(
+                                backgroundColor: Colors.pink,
+                                child: FaIcon(FontAwesomeIcons.laptopHouse,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.red,
+                                child: FaIcon(FontAwesomeIcons.freeCodeCamp,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.brown,
+                                child: FaIcon(FontAwesomeIcons.laptopCode,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.deepOrange,
+                                child: FaIcon(FontAwesomeIcons.coffee,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.deepPurple,
+                                child: FaIcon(FontAwesomeIcons.dev,
+                                    color: Colors.white),
+                              ),
+                            ],
+                          )),
+                        )
                       ],
-                    ),
-                  },
-                ],
+                    )),
               ),
-            )
-          ],
-        
+              Expanded(
+                  flex: 4,
+                  child: Container(
+                    height: size.height * 1.2,
+                    child: WorkBox(),
+                  ))
+            ],
+          )
+        ],
       ),
     );
   }
 }
- 
\ No newline at end of file
diff --git a/lib/Widget/MobileWork.dart b/lib/Widget/MobileWork.dart
index 5d6c76c..64d41fa 100644
--- a/lib/Widget/MobileWork.dart
+++ b/lib/Widget/MobileWork.dart
@@ -1,133 +1,87 @@
 import 'package:flutter/material.dart';
-import 'package:steps/steps.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 
-class MobileWork extends StatelessWidget {
+class MobileWork extends StatefulWidget {
+  @override
+  _MobileWorkState createState() => _MobileWorkState();
+}
+
+class _MobileWorkState extends State<MobileWork> {
   @override
   Widget build(BuildContext context) {
-    var size = MediaQuery.of(context).size;
-    return Container(
-      height: size.height,
-      width: size.width - 100,
-      alignment: Alignment.topCenter,
-      child: Steps(
-        direction: Axis.vertical,
-        size: 20.0,
-        path: {'color': Colors.lightBlue.shade200, 'width': 2.75},
-        steps: [
-          {
-            'color': Color(0xff64FFDA),
-            'background': Colors.indigo,
-            'label': '*',
-            'content': Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
-              children: <Widget>[
-                Text(
-                  "Sandip Institute Of Engineering & Management Nashik",
-                  style: TextStyle(
-                    fontSize: 20.0,
-                    color: Color(0xffCCD6F6),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                SizedBox(
-                  height: 6.0,
-                ),
-                Text(
-                  "I am currently pursuing Bachelor's Degree in Computer Science and Engineering \nat Savitribai Phule Pune University",
-                  style: TextStyle(
-                    fontSize: 13.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                Text(
-                  "2016 - Present ",
-                  style: TextStyle(
-                    fontSize: 12.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-              ],
-            ),
-          },
-          {
-            'color': Color(0xff64FFDA),
-            'background': Colors.indigo,
-            'label': '*',
-            'content': Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
-              children: <Widget>[
-                Text(
-                  "Flutter + Dart Development Winter Bootcamp",
-                  style: TextStyle(
-                    fontSize: 20.0,
-                    color: Color(0xffCCD6F6),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                SizedBox(
-                  height: 6.0,
-                ),
-                Text(
-                  "The Complete 2020 Flutter + Dart Winter Development Bootcamp at LCO Training Center,\nJaipur, Rajasthan (302017), Covering all the fundamental concepts for Flutter development",
-                  style: TextStyle(
-                    fontSize: 13.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                Text(
-                  "Dec - 2019 to Feb - 2020 ",
-                  style: TextStyle(
-                    fontSize: 12.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-              ],
-            ),
-          },
-          {
-            'color': Color(0xff64FFDA),
-            'background': Colors.indigo,
-            'label': '*',
-            'content': Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
-              children: <Widget>[
-                Text(
-                  "Freelancer - Flutter | Dart Mobile App Developer | UI - UX Designer",
-                  style: TextStyle(
-                    fontSize: 20.0,
-                    color: Color(0xffCCD6F6),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                SizedBox(
-                  height: 6.0,
-                ),
-                Text(
-                  "Flutter Developer and experienced programmer with an extensive history of designing and coding \nsolutions. Skilled in Google’s Flutter/Dart, Firebase App and Web development on a global scale. If you \nare looking for someone that you can trust that will complete your app on time and on budget, then \nplease contact me. I have been developing software for 1+ years and take pride in everything I do.",
-                  style: TextStyle(
-                    fontSize: 13.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-                Text(
-                  "Oct 2019 - Present ",
-                  style: TextStyle(
-                    fontSize: 12.0,
-                    color: Color(0xffCCD6F6).withOpacity(0.5),
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-              ],
-            ),
-          },
+    final Size size = MediaQuery.of(context).size;
+    return ConstrainedBox(
+      constraints: BoxConstraints.tightFor(
+        width: size.width,
+        height: size.height * 1.7,
+      ),
+      child: Column(
+        children: [
+          SizedBox(
+            height: size.height * 0.07,
+          ),
+          Row(
+            children: [
+              Expanded(
+                flex: 1,
+                child: Container(
+                    height: size.height * 1.2,
+                    //color: Colors.indigo,
+                    child: Stack(
+                      children: [
+                        Center(
+                          child: VerticalDivider(
+                            color: Color(0xff64FFDA),
+                            thickness: 1.75,
+                            width: 10,
+                            indent: 10,
+                            endIndent: 10,
+                          ),
+                        ),
+                        Container(
+                          child: Center(
+                              child: Column(
+                            mainAxisAlignment: MainAxisAlignment.spaceAround,
+                            children: [
+                              CircleAvatar(
+                                backgroundColor: Colors.pink,
+                                child: FaIcon(FontAwesomeIcons.laptopHouse,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.red,
+                                child: FaIcon(FontAwesomeIcons.freeCodeCamp,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.brown,
+                                child: FaIcon(FontAwesomeIcons.laptopCode,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.deepOrange,
+                                child: FaIcon(FontAwesomeIcons.coffee,
+                                    color: Colors.white),
+                              ),
+                              CircleAvatar(
+                                backgroundColor: Colors.deepPurple,
+                                child: FaIcon(FontAwesomeIcons.dev,
+                                    color: Colors.white),
+                              ),
+                            ],
+                          )),
+                        )
+                      ],
+                    )),
+              ),
+              Expanded(
+                  flex: 4,
+                  child: Container(
+                    height: size.height * 1.7,
+                    child: MobileWork(),
+                  ))
+            ],
+          )
         ],
       ),
     );
diff --git a/lib/Widget/MobileWorkBox.dart b/lib/Widget/MobileWorkBox.dart
new file mode 100644
index 0000000..b485d8f
--- /dev/null
+++ b/lib/Widget/MobileWorkBox.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:potrtfolio/Widget/work_custom_data.dart';
+
+class MobileWork extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        WorkCustomData(
+          title: "Sandip Institute Of Engineering & Management Nashik",
+          subTitle:
+              "I am currently pursuing Bachelor's Degree in Computer Science and Engineering \nat Savitribai Phule Pune University",
+          duration: "2016 - Present",
+        ),
+        WorkCustomData(
+          title: "Flutter + Dart Development Winter Bootcamp",
+          subTitle:
+              "The Complete 2020 Flutter + Dart Winter Development Bootcamp at LCO Training Center,\nJaipur, Rajasthan (302017), Covering all the fundamental concepts for Flutter development",
+          duration: "Dec - 2019 to Feb - 2020",
+        ),
+        WorkCustomData(
+          title:
+              "Freelancer - Flutter | Dart Mobile App Developer | UI - UX Designer",
+          subTitle:
+              "Flutter Developer and experienced programmer with an extensive history of designing and coding \nsolutions. Skilled in Google’s Flutter/Dart, Firebase App and Web development on a global scale. If you \nare looking for someone that you can trust that will complete your app on time and on budget, then \nplease contact me. I have been developing software for 1+ years and take pride in everything I do.",
+          duration: "Oct - 2019 to Nov - 2020",
+        ),
+        WorkCustomData(
+          title: "Mentor at Contributor's Hack, 2020",
+          subTitle:
+              "Working as a mentor in HakinCode organization for Flutter CodeAsylums application \n where I can utilize my skills and be an asset to the organization",
+          duration: "Sep 2020 - Oct 2020",
+        ),
+        WorkCustomData(
+          title: "Flutter Intern at Mind Sports League | Gurgaon In",
+          subTitle:
+              "Building world class Poker Learning platform. Poker Sports League is India’s first poker league is to sportify the game of poker through a unique, team based format",
+          duration: "Nov - 2020 Present",
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/Widget/Workbox.dart b/lib/Widget/Workbox.dart
new file mode 100644
index 0000000..954564a
--- /dev/null
+++ b/lib/Widget/Workbox.dart
@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:potrtfolio/Widget/work_custom_data.dart';
+
+class WorkBox extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceAround,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        WorkCustomData(
+          title: "Sandip Institute Of Engineering & Management Nashik",
+          subTitle:
+              "I am currently pursuing Bachelor's Degree in Computer Science and Engineering \nat Savitribai Phule Pune University",
+          duration: "2016 - Present",
+        ),
+        WorkCustomData(
+          title: "Flutter + Dart Development Winter Bootcamp",
+          subTitle:
+              "The Complete 2020 Flutter + Dart Winter Development Bootcamp at LCO Training Center,\nJaipur, Rajasthan (302017), Covering all the fundamental concepts for Flutter development",
+          duration: "Dec - 2019 to Feb - 2020",
+        ),
+        WorkCustomData(
+          title:
+              "Freelancer - Flutter | Dart Mobile App Developer | UI - UX Designer",
+          subTitle:
+              "Flutter Developer and experienced programmer with an extensive history of designing and coding \nsolutions. Skilled in Google’s Flutter/Dart, Firebase App and Web development on a global scale. If you \nare looking for someone that you can trust that will complete your app on time and on budget, then \nplease contact me. I have been developing software for 1+ years and take pride in everything I do.",
+          duration: "Oct - 2019 to Nov - 2020",
+        ),
+        WorkCustomData(
+          title: "Mentor at Contributor's Hack, 2020",
+          subTitle:
+              "Working as a mentor in HakinCode organization for Flutter CodeAsylums application \n where I can utilize my skills and be an asset to the organization",
+          duration: "Sep 2020 - Oct 2020",
+        ),
+        WorkCustomData(
+          title: "Flutter Intern at Mind Sports League | Gurgaon In",
+          subTitle:
+              "Building world class Poker Learning platform. Poker Sports League is India’s first poker league is to sportify the game of poker through a unique, team based format",
+          duration: "Nov - 2020 Present",
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/Widget/work_custom_data.dart b/lib/Widget/work_custom_data.dart
new file mode 100644
index 0000000..5fd84d9
--- /dev/null
+++ b/lib/Widget/work_custom_data.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+class WorkCustomData extends StatelessWidget {
+  final String title;
+  final String subTitle;
+  final String duration;
+
+  const WorkCustomData(
+      {Key key,
+      @required this.title,
+      @required this.subTitle,
+      @required this.duration})
+      : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: <Widget>[
+        Text(
+          title,
+          style: TextStyle(
+            fontSize: 22.0,
+            color: Color(0xffCCD6F6),
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+        SizedBox(
+          height: 6.0,
+        ),
+        Text(
+          subTitle,
+          style: TextStyle(
+            fontSize: 13.0,
+            color: Color(0xffCCD6F6).withOpacity(0.5),
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+        SizedBox(
+          height: 6.0,
+        ),
+        Text(
+          duration,
+          style: TextStyle(
+            fontSize: 12.0,
+            color: Color(0xffCCD6F6).withOpacity(0.5),
+            fontWeight: FontWeight.w700,
+          ),
+        ),
+      ],
+    );
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
index 7b42888..553729e 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,17 +1,17 @@
 import 'package:flutter/material.dart';
 import 'package:potrtfolio/UI/Home.dart';
+
 void main() {
   runApp(MyApp());
 }
+
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-        return MaterialApp(
-            title: 'Tushar Nikam',
-            debugShowCheckedModeBanner: false,
-        home: Home(),
-      );
+    return MaterialApp(
+      title: 'Tushar Nikam',
+      debugShowCheckedModeBanner: false,
+      home: Home(),
+    );
   }
 }
-
-  
