add about-me page and notfound page

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Pages/NotFound_.elm

@@ -0,0 +1,20 @@
+module Pages.NotFound_ exposing (page)
+
+import Html exposing (Html)
+import Html.Attributes exposing (class, href)
+import Utils.Utils exposing (errorView)
+import View exposing (View)
+
+
+page : View msg
+page =
+    { title = "Not Found"
+    , body =
+        [ Html.div [ class "min-h-screen flex flex-col justify-center relative overflow-hidden" ]
+            [ Html.div [ class "relative w-full bg-neutral  md:max-w-3xl md:mx-auto lg:max-w-4xl lg:pb-28 space-2" ]
+                [ errorView "Couldn't find what you are looking for. Please check back later"
+                , Html.a [ class "float-right bg-transparent mr-auto hover:bg-pink-600 text-cyan-500 hover:text-white rounded border py-2 px-4 border-cyan-500 mt-2", href "https://avinal.space" ] [ Html.text "Return to Home!" ]
+                ]
+            ]
+        ]
+    }

src/Pages/Pages/AboutMe.elm

@@ -1,8 +1,64 @@
 module Pages.Pages.AboutMe exposing (page)
 
+import Html exposing (Html)
+import Html.Attributes exposing (class, datetime, href)
+import Utils.Constants exposing (Job, jobList)
+import Utils.Utils exposing (getFormattedDate)
 import View exposing (View)
+import Components.Footer exposing (footerLinksToSide)
 
 
 page : View msg
 page =
-    View.fromString "Pages.Pages.AboutMe"
+    { title = "About Me"
+    , body =
+        [ Html.section []
+            [ Html.div [ class "text-white py-8" ]
+                [ Html.div [ class "container mx-auto flex flex-col items-start md:flex-row my-12 md:my-24" ]
+                    [ Html.div [ class "flex flex-col w-full sticky md:top-36 lg:w-1/3 mt-2 md:mt-12 px-8" ]
+                        [ Html.p [ class "text-lg ml-2 text-cyan-500 uppercase tracking-lppse" ] [ Html.text "Software Engineer" ]
+                        , Html.p [ class "text-3xl md:text-6xl leading-normal md:leading-relaxed mb-2" ] [ Html.text "Avinal Kumar" ]
+                        , Html.p [ class "md:text-base text-gray-50 mb-4 text-xl " ] [ Html.text description ]
+                        , Html.a
+                            [ class "bg-transparent mr-auto hover:bg-pink-600 text-cyan-500 hover:text-white rounded border py-2 px-4 border-cyan-500"
+                            , href "https://docs.google.com/document/d/1uoCxH9UvWwzFRtuJQ40MJ4kNxVT0tDnHguY7OQOKkN4/edit?usp=sharing"
+                            ]
+                            [ Html.text "Download CV" ]
+                        ]
+                    , Html.div [ class "ml-0 md:ml-12 lg:w-2/3 sticky" ]
+                        [ Html.div [ class "container mx-auto w-full h-full" ]
+                            [ Html.div [ class "relative wrap overflow-hidden p-10 h-full" ]
+                                [ Html.ol [ class "relative border-l border-cyan-700" ]
+                                    (List.map jobListing jobList)
+                                ]
+                            ]
+                        ]
+                    ]
+                ]
+            ]
+            , footerLinksToSide
+        ]
+    }
+
+
+description : String
+description =
+    """
+    I am a Software Engineer Associate at Red Hat, specialising in hybrid cloud engineering.
+    I have been involved with Google's Summer of Code and Google Season of Docs programmes as a mentor and contributor to Open Source for many years.
+    For fun, I like to play around with cutting-edge areas of computer science; at the moment, I'm learning about Elm.
+    GNU/Linux and free/open-source software are two of my favourite things
+    """
+
+
+jobListing : Job msg -> Html msg
+jobListing job =
+    Html.li [ class "mb-10 ml-6" ]
+        [ Html.span [ class "absolute flex items-center justify-center w-6 h-6 bg-pink-600 ring-pink-900 rounded-full -left-3 ring-8" ]
+            [ Html.text <| String.left 1 job.company
+            ]
+        , Html.h3 [ class "flex items-center mb-1 text-xl font-semibold" ] [ Html.text <| job.title ++ " at " ++ job.company ]
+        , Html.time [ class "block mb-2 text font-normal leading-none text-gray-500", datetime job.from ]
+            [ Html.text <| getFormattedDate job.from False ++ " - " ++ getFormattedDate job.to False ]
+        , job.body
+        ]

src/Pages/Pages/Projects.elm

@@ -1,8 +1,12 @@
 module Pages.Pages.Projects exposing (Model, Msg, page)
 
+import Dict exposing (Dict)
 import Effect exposing (Effect)
-import Route exposing (Route)
+import Html exposing (div, img, section)
+import Html.Attributes exposing (class, src)
 import Page exposing (Page)
+import Route exposing (Route)
+import Route.Path
 import Shared
 import View exposing (View)
 
@@ -28,7 +32,7 @@ type alias Model =
 init : () -> ( Model, Effect Msg )
 init () =
     ( {}
-    , Effect.none
+    , Effect.pushRoute { path = Route.Path.NotFound_, query = Dict.empty, hash = Nothing }
     )
 
 
@@ -64,4 +68,28 @@ subscriptions _ =
 
 view : Model -> View Msg
 view _ =
-    View.fromString "Pages.Pages.Projects"
+    { title = "My Projects"
+    , body =
+        [ section [ class "overflow-hidden" ]
+            [ div
+                [ class "px-5 py-2 mx-auto lg:pt-24 lg:px-32" ]
+                [ div [ class "flex flex-wrap -m-1 md:-m-2" ]
+                    (List.repeat 8
+                        (div [ class "flex flex-wrap w-1/2" ]
+                            (List.repeat 2
+                                (div
+                                    [ class "w-full p-1 md:p-2" ]
+                                    [ img
+                                        [ src "https://opengraph.githubassets.com/string/avinal/blowfish"
+                                        , class "block object-cover object-center w-full h-full rounded-lg"
+                                        ]
+                                        []
+                                    ]
+                                )
+                            )
+                        )
+                    )
+                ]
+            ]
+        ]
+    }

src/Utils/Constants.elm

@@ -1,6 +1,8 @@
 module Utils.Constants exposing (..)
 
 import Array exposing (Array)
+import Html exposing (Html)
+import Html.Attributes exposing (class)
 
 
 type alias Link =
@@ -15,6 +17,15 @@ type alias IconLink =
     }
 
 
+type alias Job msg =
+    { title : String
+    , company : String
+    , from : String
+    , to : String
+    , body : Html msg
+    }
+
+
 footerLinks : List Link
 footerLinks =
     [ { text = "About", url = "https://avinal.space/pages/about-me" }
@@ -35,6 +46,71 @@ iconLinks =
     ]
 
 
+jobList : List (Job msg)
+jobList =
+    [ { title = "Associate Software Engineer"
+      , company = "Red Hat"
+      , from = "2022-07-01 10:10"
+      , to = "Present"
+      , body = Html.div [] [ Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Working on Tekton Results and Pipeline Service." ] ]
+      }
+    , { title = "Google Summer of Code Mentor"
+      , company = "FOSSology"
+      , from = "2022-05-01 10:10"
+      , to = "Present"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Mentoring Google Summer of Code contributors for The FOSSology Project." ]
+      }
+    , { title = "Software Engineering Intern"
+      , company = "Red Hat"
+      , from = "2022-01-05 10:10"
+      , to = "2022-06-30 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Worked on Pipeline Service and Minimal Tekton Server." ]
+      }
+    , { title = "Technical Writer"
+      , company = "API7.ai"
+      , from = "2022-02-01 10:10"
+      , to = "2022-07-31 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Created Katacoda tutorials for Apache APISIX, a cloud-native API gateway." ]
+      }
+    , { title = "Open Source Contributor"
+      , company = "FOSSology"
+      , from = "2021-05-15 10:10"
+      , to = "2021-09-23 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Upgraded old build system to CMake and improved tests and CI/CD for FOSSology." ]
+      }
+    , { title = "Java Developer Intern"
+      , company = "XResearch"
+      , from = "2021-03-01 10:10"
+      , to = "2021-05-15 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "" ]
+      }
+    , { title = "Technical Writer"
+      , company = "VideoLAN"
+      , from = "2020-09-15 10:10"
+      , to = "2020-11-30 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] [ Html.text "Created Mobile App user documentation for VLC Media Player." ]
+      }
+    , { title = "Hindi Editor"
+      , company = "SRIJAN, NIT Hamirpur"
+      , from = "2018-11-01 10:10"
+      , to = "2022-09-30 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] []
+      }
+    , { title = "Member"
+      , company = "Computer Science Engineers' Society, NIT Hamirpur"
+      , from = "2019-01-07 10:10"
+      , to = "2022-06-30 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] []
+      }
+    , { title = "Computer Science and Engineering"
+      , company = "National Institute of Technology Hamirpur"
+      , from = "2018-06-20 10:10"
+      , to = "2022-05-31 10:10"
+      , body = Html.p [ class "mb-4 text-base font-normal text-gray-400" ] []
+      }
+    ]
+
+
 months : Array String
 months =
     Array.fromList