Day 1 Portfolio Page- based off http://www.jonathanpatterson.com/product-design-portfolio.html

main.dart

import 'package:flutter/material.dart';

String intr="Delightful product design is like light traveling through a prism. The catalyst, raw project requirements. I filter them through my creative process, twisting… as ideas take shape. Turning… as core design principles intersect with today’s best practices. The result? High-fidelity UI design that performs from every angle. Take a look.";



void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
    theme: ThemeData(

    textTheme: TextTheme(
      headline1:TextStyle(fontSize: 260.0,color: Colors.white,),
      headline2: TextStyle( color:Colors.white, fontSize:30.0,fontWeight: FontWeight.bold),
      bodyText1: TextStyle(fontSize: 16.0,color:Colors.white,letterSpacing: 1.5 ),
      bodyText2: TextStyle(fontSize: 12.0,color:Colors.white),
  )),
      home: Scaffold(
     
      body:  PortfolioPage()
     
    ));
  }
}


class PortfolioPage extends StatefulWidget {

  const PortfolioPage({Key key,}) : super(key: key);
  @override
  _PortfolioPageState createState() => _PortfolioPageState();
}

class _PortfolioPageState extends State<PortfolioPage> {
  bool _up=true;
  
  final nonHoverTransform = Matrix4.identity()..translate(0, 0, 0);
  final hoverTransform = Matrix4.identity()..translate(0, -50, 0);
  @override
  void initState() {
   
    super.initState();
    Future.delayed(Duration(seconds: 1)).then((value){
      setState(() {
        _up=!_up;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    //_up=!_up;
    print("up");
    Size s= MediaQuery.of(context).size;
    return Container(
      height: double.infinity,width: double.infinity,
      color: Color.fromRGBO(234,67,53,1.0),
      child:ListView(
        children:[
        HeaderWidget(),
        Container(
          width:double.infinity,
          height:2500.0,
          child: Padding(
            padding:  EdgeInsets.symmetric(horizontal:50.0),
            child: Stack(
              children: [
                Padding(
                  padding: EdgeInsets.all(5.0),
                  child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    decoration: BoxDecoration(border:Border.all(color:Colors.white)),),
                ),
               ...corners(),
              mainContent(s),
              VisionText(),
               Positioned(
                 top: 200.0,
                 left: s.width/2 - 200.0,
                 child:  AnimatedContainer(
        duration: const Duration(seconds: 4),
       // curve: Curves.decelerate,
        child: Image.network("http://www.jonathanpatterson.com/images/prism-color-2.png"),
        height: 360,//200.0,
        width:  360 ,
        onEnd: (){
          setState(() {
            _up=!_up;
          });
        },
        transform: _up?hoverTransform:nonHoverTransform,
      )
                 ),
              ],
            ),
          ),
        ),
         FooterWidget()
        ]
      ),
    );
  }

Widget mainContent(Size s)=> Padding(
                 padding: const EdgeInsets.all(100.0),
                 child: Container(
                   height: double.infinity,width: double.infinity,
                   //color:Colors.white.withOpacity(0.2),
                   child:Column(children: [
                     SizedBox(height: 450.0,),
                     Text("(It’s kinda my thing.)", style: Theme.of(context).textTheme.headline2,),
                     SizedBox(height: 50.0,),
                     Padding(
                       padding: EdgeInsets.symmetric(horizontal:100.0),
                       child: Text(intr, textAlign: TextAlign.center,
                       
                       style: Theme.of(context).textTheme.bodyText1,),
                     ),
                      SizedBox(height: 100.0,),
                     Container(
                       height: 300.0,
                       width: s.width,
                       child: StyledContainer()),
                       SizedBox(height: 40.0,),
                     Container(
                       height: 300.0,
                       width: s.width,
                       child: StyledContainer()),
                       SizedBox(height:40.0,),
                     Container(
                       height: 300.0,
                       width: s.width,
                       child: StyledContainer()),
                       SizedBox(height: 40.0,),
                     Container(
                       height: 300.0,
                       width: s.width,
                       child: StyledContainer()),
                   ],)
                   ,),
               );
List<Widget> corners()=>[
 Align(
                  alignment: Alignment.topLeft,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
                 Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
                 Align(
                  alignment: Alignment.topRight,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
                 Align(
                  alignment: Alignment.bottomLeft,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
                 Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
                 Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    decoration: BoxDecoration(color: Color.fromRGBO(234,67,53,1.0),
                      border:Border.all(color:Colors.white)),),
                ),
];
}


class VisionText extends StatefulWidget {
  @override
  _VisionTextState createState() => _VisionTextState();
}

class _VisionTextState extends State<VisionText> with SingleTickerProviderStateMixin{

  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    //currentIndex = null;

    controller = 
      AnimationController(duration: const Duration(seconds: 1), vsync: this);            
      animation = Tween<double>(begin: 0, end:1.0).animate(
          new CurvedAnimation(
              parent:  controller,
              curve: new Interval(0.0, 1.0, curve: Curves.easeIn)))
                 
    ..addListener(() {            
      setState(() {               
      });            
    });           
    controller.forward(from:0.0);

  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {   
    Size s= MediaQuery.of(context).size;
    return  Positioned(top: 100.0,
                 left: s.width/2 - 350.0,
               //  child: FractionalTranslation(
                  // translation: Offset(0.5, 0.5),
                   child: Container(
                     height: 400,
                     width:  900,
                     
                     child: Transform(
                       origin: Offset(350.0, 200.0),
            transform: Matrix4.skewX(-animation.value*0.5 + 0.5)..rotateZ(-animation.value*0.5 + 0.5)..scale(animation.value*0.5 + 0.5),//..setRotationZ(-animation.value*0.5 + 0.5),
            child: Text("VISION", style: Theme.of(context).textTheme.headline1.copyWith(color:Colors.white.withOpacity(animation.value )),),
          ),
                   ),
               //  )
                 );
  }
}







class StyledContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Padding(
                  padding: EdgeInsets.all(2.0),
                  child: Container(
                    width: double.infinity,
                    height: double.infinity,
                    decoration: BoxDecoration(border:Border.all(color:Colors.white)),),
                ),
                ...corners()
      ],
    );
  }


List<Widget> corners()=>[
 Align(
                  alignment: Alignment.topLeft,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                 Align(
                  alignment: Alignment.topCenter,
                  child:Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                 Align(
                  alignment: Alignment.topRight,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                 Align(
                  alignment: Alignment.bottomLeft,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                 Align(
                  alignment: Alignment.bottomCenter,
                  child:Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                 Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                Positioned(
                 left: 0.0,
                 top:60.0,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                Positioned(
                 right: 0.0,
                 top:60.0,
                  child: Container(
                    width: 5.0,
                    height: 5.0,
                   color:Colors.white),
                ),
                Align(
                 alignment: Alignment.topCenter,
                  child: Transform.translate(
                    offset: Offset(0, 60),
                    child: Container(
                      width: 5.0,
                      height: 5.0,
                     color:Colors.white),
                  ),
                ),
                Align(
                 alignment: Alignment.topCenter,
                  child: Transform.translate(
                    offset: Offset(0, 62.5),
                    child: Container(
                      width: double.infinity,
                      height: 1.0,
                     color:Colors.white),
                  ),
                ),
                
];
}




class FooterWidget extends StatefulWidget {
  @override
  _FooterWidgetState createState() => _FooterWidgetState();
}

class _FooterWidgetState extends State<FooterWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical:100.0, horizontal: 50.0),
      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
        Text("©2005–2020 Jonathan Patterson | Iteration V4",style: Theme.of(context).textTheme.bodyText2,),
        FooterCenter(),
        FooterRight()

      ],),
    );
  }
}


class FooterCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 150.0,
      height: 50.0,
    //  color: Colors.grey,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children:[
        Container(child: Image.network("http://www.jonathanpatterson.com/images/icon-mail.svg"),),
        Container(width:1, height:50.0, color:Colors.white),
        Container(child: Image.network("http://www.jonathanpatterson.com/images/icon-twitter.svg"),),
        Container(width:1, height:50.0, color:Colors.white),
        Container(child: Image.network("http://www.jonathanpatterson.com/images/icon-footer-linkedin.svg"),)
        ]
      ),
    );
  }
}

class FooterRight extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 220.0,
      height: 60.0,
    //  color: Colors.grey,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:[
        Container(child: Image.network("http://www.jonathanpatterson.com/images/jp-logo.svg"),),
        Container(width:1, height:50.0, color:Colors.white),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children:[
          Text("JONATHAN PATTERSON"),
           Text("Freelance Product Designer")
        ]

        )
        ]
      ),
    );
  }
}



class HeaderWidget extends StatefulWidget {

  const HeaderWidget({Key key}) : super(key: key);

  @override
  _HeaderWidgetState createState() => _HeaderWidgetState();
}

class _HeaderWidgetState extends State<HeaderWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical:30.0, horizontal: 50.0),
      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          HeaderLeft(),
        HeaderRight()
        
      ],),
    );
  }
}


class HeaderRight extends StatelessWidget {
  

  const HeaderRight({Key key,}) : super(key: key);

  @override

  Widget build(BuildContext context) {
    return Container(
      width: 500.0,
      height: 50.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children:["HOME","ABOUT", "PORTFOLIO", "CLIENTS", "'SUP", "CONTACT"].map((e) => GestureDetector(onTap: ()=>{},
          child: Text(e, style: TextStyle(fontSize:14.0),))).toList()
      ),
    );
  }
}

class HeaderLeft extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 220.0,
      height: 60.0,
    //  color: Colors.grey,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children:[
        Container(child: Image.network("http://www.jonathanpatterson.com/images/jp-logo.svg"),),
        Container(width:1, height:50.0, color:Colors.white),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children:[
          Text("JONATHAN PATTERSON"),
           Text("Freelance Product Designer")
        ]

        )
        ]
      ),
    );
  }
}