diff --git a/images/adobe animate.svg b/images/adobe animate.svg
new file mode 100644
index 0000000..1d6ae51
--- /dev/null
+++ b/images/adobe animate.svg	
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695.83 406.28"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="An"><path id="path2242" class="cls-1" d="M258.79,309.11H115.27l-29.35,91a6.69,6.69,0,0,1-7.25,5.44H4.74c-4.35,0-5.43-2.18-4.35-6.89l125-357.31c1.09-4,2.17-6.88,4-12a141.56,141.56,0,0,0,2.17-25A4,4,0,0,1,134.84,0H235.59c3.26,0,4.71,1.09,5.07,3.26l141,396.09c1.09,4.35,0,6.16-4,6.16H296.83a5.79,5.79,0,0,1-6.15-4.35Zm-121-77.18H236c-2.18-8-5.45-17.76-9.07-27.91-3.62-10.51-6.88-21.74-10.52-33.34-4-12-7.24-23.55-11.23-35.51S197.9,112,194.63,100.74c-3.25-10.87-5.79-21-8.69-30.07h-.73a505.68,505.68,0,0,1-13,50c-5.8,18.48-11.6,38.06-17.76,57.26C149.33,197.5,143.54,215.62,137.74,231.93Z"/><path id="path2244" class="cls-1" d="M425.48,399.71V169.6c0-6.89,0-15.22-.36-23.56-.36-9.06-.36-17-.72-24.64s-.72-15.22-1.09-19.57a4.24,4.24,0,0,1,.72-4,6.48,6.48,0,0,1,4-1.09h62.35a16.76,16.76,0,0,1,6.14,1.09,7,7,0,0,1,3.27,4.35,88.73,88.73,0,0,1,2.54,8.69,85.28,85.28,0,0,1,2.17,12.68,129.43,129.43,0,0,1,41-23.91,146.75,146.75,0,0,1,46.75-7.61,111.54,111.54,0,0,1,36.25,5.8,92.33,92.33,0,0,1,58.71,57.25c6.15,15.94,8.68,36.6,8.68,62v183c0,4-1.45,5.44-5.06,5.44l-72.84.72c-3.28.37-5.81-1.45-6.18-4.71v-175c-.36-11.61-2.53-23.2-7.23-33.71-3.64-7.61-9.06-14.86-16-19.21a45.25,45.25,0,0,0-26.44-6.88c-10.16,0-20.31,1.44-29.36,5.43A82.17,82.17,0,0,0,509.56,187V400.8c0,4-1.45,5.43-5.07,5.43H430.93a4.87,4.87,0,0,1-5.45-4.34c-.36-1.46-.36-1.82,0-2.18Z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/images/adobe-xd.svg b/images/adobe-xd.svg
new file mode 100644
index 0000000..c71599f
--- /dev/null
+++ b/images/adobe-xd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.14 115.72"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M91.24,10.22l-30,49.5,32,52.5a1.72,1.72,0,0,1,.2,1.2c-.1.4-.5.1-1.1.2H69.44c-1.6,0-2.7-.1-3.4-1.1-2.1-4.2-4.3-8.3-6.4-12.5s-4.4-8.3-6.8-12.6-4.8-8.6-7.2-13h-.2c-2.1,4.3-4.4,8.6-6.7,12.9s-4.6,8.6-6.8,12.8-4.6,8.5-6.9,12.6c-.4,1-1.2,1.1-2.3,1.1H.74c-.4,0-.7.2-.7-.3a1.39,1.39,0,0,1,.2-1.1l31.1-51L1,10.12c-.3-.4-.4-.8-.2-1a1.16,1.16,0,0,1,1-.4h22.7a5.9,5.9,0,0,1,1.4.2,2.84,2.84,0,0,1,1,.9c1.9,4.3,4.1,8.6,6.4,12.9s4.7,8.5,7.2,12.7,4.6,8.4,6.7,12.7h.2c2.1-4.4,4.3-8.7,6.5-12.9s4.5-8.4,6.8-12.6,4.5-8.5,6.7-12.6A1.7,1.7,0,0,1,68,9a1.91,1.91,0,0,1,1.3-.2h21.1a.92.92,0,0,1,1.1.7c.1.1-.1.5-.3.7Z"/><path class="cls-1" d="M137.44,115.72a49.72,49.72,0,0,1-21.5-4.5,34.86,34.86,0,0,1-15.1-13.6c-3.7-6.1-5.5-13.7-5.5-22.8a41.07,41.07,0,0,1,5.5-21.1,41.53,41.53,0,0,1,15.9-15.5c7-3.9,15.4-5.8,25.3-5.8a17.86,17.86,0,0,1,2.1.1c.9.1,1.9.1,3.1.2V1.12c0-.7.3-1.1,1-1.1h20.3a.9.9,0,0,1,1,.7v95.4c0,1.8.1,3.8.2,6s.3,4.1.4,5.8a1.62,1.62,0,0,1-1,1.6,76.37,76.37,0,0,1-16.3,4.8A88.21,88.21,0,0,1,137.44,115.72Zm9.8-20v-44a25.58,25.58,0,0,0-2.7-.5c-1.1-.1-2.2-.2-3.3-.2a24.65,24.65,0,0,0-11.3,2.6,22.42,22.42,0,0,0-8.5,7.4c-2.2,3.2-3.3,7.5-3.3,12.7a27.87,27.87,0,0,0,1.7,10.3,19.54,19.54,0,0,0,4.5,7.1,17.28,17.28,0,0,0,6.8,4,26.18,26.18,0,0,0,8.3,1.3c1.5,0,2.9-.1,4.2-.2a8.75,8.75,0,0,0,3.6-.5Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/affinity.svg b/images/affinity.svg
new file mode 100644
index 0000000..6942611
--- /dev/null
+++ b/images/affinity.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.67 110.67"><defs><style>.cls-1{fill:#fff;fill-rule:evenodd;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M3.06,110.67H0L0,83.38,24.07,41.69H42.88ZM110.67,72.82v37.85H72.19L50.34,72.82ZM67.21,110.67H8L37.63,59.42ZM110.67,68.5H67.8L107.35,0h3.32ZM60.09,41.61a4.84,4.84,0,0,1,4,2.4l0,0,5,8.62,0,.07a4.79,4.79,0,0,1,0,4.67c-1.67,2.91-3.36,5.82-5,8.73a4.83,4.83,0,0,1-4.05,2.36c-3.17,0-9.52,0-9.53,0a4.79,4.79,0,0,1-4.08-2.31l-.06-.09-5-8.64a4.82,4.82,0,0,1,0-4.71l0-.06,5-8.67a4.88,4.88,0,0,1,4.05-2.41h9.53ZM48.14,0h54.23L73,50.8l-27.11-47ZM60.31,37.38H26.56L43.44,8.15Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/aftereffects.svg b/images/aftereffects.svg
new file mode 100644
index 0000000..2c3dad1
--- /dev/null
+++ b/images/aftereffects.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.09 145.59"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Outlined_Mnemonics_Logos" data-name="Outlined Mnemonics Logos"><g id="Ae"><path id="path2199" class="cls-1" d="M90.93,108.77H40.22L29.86,140.94a2.39,2.39,0,0,1-2.58,1.91H1.65c-1.5,0-1.91-.82-1.5-2.46L44,14.58c.41-1.36.82-2.59,1.36-4.22a47.18,47.18,0,0,0,.82-8.86A1.36,1.36,0,0,1,47.31,0H82.62c.95,0,1.63.41,1.77,1.09L134.14,140.8c.41,1.5,0,2.18-1.37,2.18H104.29a2,2,0,0,1-2.18-1.5ZM48.13,81.64H82.75c-2-6.72-4.73-14.27-6.81-21.53-3.72-11.55-7.53-23.86-10.64-35.3H65c-2.65,12.8-7.05,25-10.9,37.75-1.78,7-4,13.36-6,19.08Z"/><path id="path2201" class="cls-1" d="M215,96.23H171.76A29.93,29.93,0,0,0,176,108.36a21.62,21.62,0,0,0,10,8.18c9.86,4.4,21.23,3.93,31.62,1.91a51.25,51.25,0,0,0,12.13-3.14c.69-.54,1.09-.27,1.09,1.09-.08.39.25,23-.27,22.49a3.11,3.11,0,0,1-.95,1,58.8,58.8,0,0,1-13.63,4.09,92.3,92.3,0,0,1-19.36,1.63c-25.3.5-45.68-11.72-52.74-35.57-10.65-35.21,8.53-79.1,50-77.42,13.11-.25,27.08,4.59,35.44,15.13,9.32,11.74,11.78,26.41,10.49,40.89-.27,2.59-.41,4.49-.54,5.72a2,2,0,0,1-1.91,1.77c-.82,0-2.32.14-4.5.28-5.33.82-11.91.11-17.85-.14Zm-43.21-19.9c5.42-.07,31.91.16,36.52-.14a6.58,6.58,0,0,0,3.14-1.09c.7-10.28-8.23-19.44-18.54-18.94C181.1,55.45,172.83,65.13,171.76,76.33Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/images/css3.svg b/images/css3.svg
new file mode 100644
index 0000000..090782a
--- /dev/null
+++ b/images/css3.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1766.7 2003.6" style="enable-background:new 0 0 1766.7 2003.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#1730C6;enable-background:new    ;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<path class="st0" d="M1468,1688.2l137.5-1540.8H883.3v1702.9L1468,1688.2z"/>
+		<path class="st1" d="M0,0l160.8,1803.3l721.5,200.3l0,0l723.5-200.6l161-1803L0,0z M1396.7,816.3L1396.7,816.3l-5.4,59.4
+			l-52,582.3l-3.3,37.4l-452.6,125.4l0,0l-1,0.3l-453.1-125.7l-31-347.3h222l15.8,176.4l246.4,66.5h0.2l0,0l246.7-66.6l25.7-286.9
+			H388.4l-19.8-221.2h805.5l20.1-226.5H348.9l-20.1-221.2h1107.9L1396.7,816.3z"/>
+	</g>
+</g>
+</svg>
diff --git a/images/down-arrow.svg b/images/down-arrow.svg
new file mode 100644
index 0000000..084b25c
--- /dev/null
+++ b/images/down-arrow.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1C3766;}
+</style>
+<g>
+	<path class="st0" d="M28.6,13.4l-11,9.4c-0.7,0.6-1.7,0.9-2.6,0.9c-0.9,0-1.8-0.3-2.6-0.9l-11-9.4C-0.3,12-0.5,9.4,1,7.7
+		C2.4,6,5,5.8,6.6,7.2l8.4,7.2l8.4-7.2C25.1,5.8,27.6,6,29,7.7C30.5,9.4,30.3,12,28.6,13.4z"/>
+</g>
+</svg>
diff --git a/images/dreamweaver.svg b/images/dreamweaver.svg
new file mode 100644
index 0000000..9f85532
--- /dev/null
+++ b/images/dreamweaver.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.17 106.1"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Outlined_Mnemonics_Logos" data-name="Outlined Mnemonics Logos"><g id="Dw"><path class="cls-1" d="M0,104.2V1.8A1.2,1.2,0,0,1,1,.5h.1C2.61.4,4.91.3,7.81.3s6.4-.1,10.4-.2,8.2-.1,12.7-.1c12.2,0,22.4,2.2,30.4,6.6a43.85,43.85,0,0,1,18.1,18.1c4,7.7,6,16.5,6,26.5a61.83,61.83,0,0,1-3.1,20.5,48.72,48.72,0,0,1-8.6,15.4,52.35,52.35,0,0,1-12.3,10.7,54.86,54.86,0,0,1-14.7,6.3,61.38,61.38,0,0,1-15.4,2H20c-4,0-7.8,0-11.2-.1s-6.1-.1-7.8-.2C.31,105.8,0,105.2,0,104.2Zm21.1-84.4V86.5c1.1,0,2.1,0,3.1.1s1.9.1,2.8.2,2.1.1,3.3.1a37.42,37.42,0,0,0,13.6-2.3,26.84,26.84,0,0,0,10.5-6.8,30.88,30.88,0,0,0,6.7-11.1,47.57,47.57,0,0,0,2.4-15,39.74,39.74,0,0,0-2.3-14.1,26.08,26.08,0,0,0-17.1-16.2,42.18,42.18,0,0,0-13.2-1.9c-2,0-3.7,0-5.1.1s-3,.1-4.7.2Z"/><path class="cls-1" d="M175,105.8h-18.7a1.37,1.37,0,0,1-1.2-.4,3.38,3.38,0,0,1-.6-1.2c-1.9-8-3.5-15.2-4.8-21.3s-2.4-11.4-3.2-15.7-1.5-7.9-2.1-10.9-1-5.5-1.3-7.6H143c-1,4.4-1.9,8.7-2.8,12.8s-1.8,8.3-2.8,12.5-2.1,8.8-3.4,13.8-2.6,10.5-4.1,16.4c-.2,1.1-.7,1.6-1.6,1.6h-18.7a2.23,2.23,0,0,1-1.4-.3,4.13,4.13,0,0,1-.7-1.1L88,27.1c-.3-.9.1-1.3,1.2-1.3h18.9c.9,0,1.4.3,1.5,1,2,8.8,3.7,16.4,5,22.8s2.4,11.8,3.1,16.3,1.4,8.2,1.9,11,.9,5.2,1.2,7h.3c.2-1.6.4-3.1.7-4.7q.6-2.85,1.5-7.5c.6-3.1,1.3-6.7,2.2-10.9s1.9-9,3.1-14.6,2.7-11.8,4.6-18.9a3.26,3.26,0,0,1,.4-1.3c.1-.2.5-.3,1.1-.3h19.6c.6,0,.9.4,1,1.1,1.7,7.3,3.1,13.7,4.3,19.2s2.1,10.4,3,14.7,1.5,7.9,1.9,10.9.9,5.6,1.3,7.7a44.62,44.62,0,0,1,.7,5.1h.3c.5-2,.9-4.4,1.3-7.1s.9-5.7,1.6-9.1,1.3-7.1,2.1-11.2,1.7-8.6,2.8-13.7,2.3-10.5,3.7-16.4c.2-.9.6-1.3,1.3-1.3h17.5c.9,0,1.2.5,1,1.4l-21.6,77.1a2.38,2.38,0,0,1-.6,1.1C175.91,105.7,175.51,105.9,175,105.8Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/images/figma.svg b/images/figma.svg
new file mode 100644
index 0000000..40c6892
--- /dev/null
+++ b/images/figma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1666.67 2500"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path id="path0_fill" data-name="path0 fill" class="cls-1" d="M416.67,2500c230,0,416.66-186.67,416.66-416.67V1666.67H416.67C186.67,1666.67,0,1853.33,0,2083.33S186.67,2500,416.67,2500Z"/><path id="path1_fill" data-name="path1 fill" class="cls-1" d="M0,1250c0-230,186.67-416.67,416.67-416.67H833.33v833.34H416.67C186.67,1666.67,0,1480,0,1250Z"/><path id="path1_fill-2" data-name="path1 fill" class="cls-1" d="M0,416.67C0,186.67,186.67,0,416.67,0H833.33V833.33H416.67C186.67,833.33,0,646.67,0,416.67Z"/><path id="path2_fill" data-name="path2 fill" class="cls-1" d="M833.33,0H1250c230,0,416.67,186.67,416.67,416.67S1480,833.33,1250,833.33H833.33Z"/><path id="path3_fill" data-name="path3 fill" class="cls-1" d="M1666.67,1250c0,230-186.67,416.67-416.67,416.67S833.33,1480,833.33,1250,1020,833.33,1250,833.33,1666.67,1020,1666.67,1250Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/git-version-control.svg b/images/git-version-control.svg
new file mode 100644
index 0000000..5e15a58
--- /dev/null
+++ b/images/git-version-control.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M251.17,116.59,139.4,4.83a16.49,16.49,0,0,0-23.32,0L92.87,28l29.45,29.44a19.57,19.57,0,0,1,24.79,25l28.38,28.38a19.59,19.59,0,1,1-11.75,11.06L137.27,95.41v69.64a19.94,19.94,0,0,1,5.19,3.71,19.6,19.6,0,1,1-21.32-4.28V94.2a19.4,19.4,0,0,1-6.42-4.29,19.6,19.6,0,0,1-4.23-21.44l-29-29L4.83,116.08a16.49,16.49,0,0,0,0,23.32L116.6,251.17a16.51,16.51,0,0,0,23.32,0L251.17,139.92a16.5,16.5,0,0,0,0-23.33"/></g></g></svg>
\ No newline at end of file
diff --git a/images/html5.svg b/images/html5.svg
new file mode 100644
index 0000000..4bf9cbe
--- /dev/null
+++ b/images/html5.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 433.6 491.7" style="enable-background:new 0 0 433.6 491.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.1;fill:#2236C6;enable-background:new    ;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<polygon class="st0" points="216.8,454.1 360.3,414.3 394,36.2 216.8,36.2 		"/>
+		<path class="st1" d="M0,0l39.5,442.6l177.1,49.2l177.6-49.2L433.6,0L0,0z M351.3,105l-2.5,27.5l-1.1,12.2H140l5,55.6h197.8
+			l-1.3,14.6l-12.8,142.9l-0.8,9.2l-111.1,30.8l0,0l-0.2,0.1L105.3,367l-7.6-85.2h54.5l3.9,43.3l60.4,16.3l0,0l0,0l60.5-16.3
+			l6.3-70.4H95.3L82,105l-1.3-14.6h271.9L351.3,105z"/>
+	</g>
+</g>
+</svg>
diff --git a/images/illustrator.svg b/images/illustrator.svg
new file mode 100644
index 0000000..36f7595
--- /dev/null
+++ b/images/illustrator.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.82 113.5"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Outlined_Mnemonics_Logos" data-name="Outlined Mnemonics Logos"><g id="Ai"><path class="cls-1" d="M66.71,88.5H29.51L21.91,112a1.75,1.75,0,0,1-1.9,1.4H1.21c-1.1,0-1.4-.6-1.1-1.8l32.2-92.7c.3-1,.6-2.1,1-3.3a34.93,34.93,0,0,0,.6-6.5,1,1,0,0,1,.8-1.1h25.9c.8,0,1.2.3,1.3.8l36.5,103c.3,1.1,0,1.6-1,1.6H76.51a1.51,1.51,0,0,1-1.6-1.1ZM35.31,68.2h25.4c-.6-2.1-1.4-4.6-2.3-7.2s-1.8-5.6-2.7-8.6-1.9-6.1-2.9-9.2-1.9-6-2.7-8.9-1.5-5.4-2.2-7.8h-.2a122.78,122.78,0,0,1-3.4,12.9c-1.5,4.8-3,9.8-4.6,14.8-1.4,5.1-2.9,9.8-4.4,14Z"/><path class="cls-1" d="M120.21,25.1a12.38,12.38,0,0,1-8.9-3.5,13,13,0,0,1-3.4-9.2,11.77,11.77,0,0,1,3.6-8.9,12.81,12.81,0,0,1,8.9-3.5c3.9,0,6.9,1.2,9.1,3.5a12.62,12.62,0,0,1,3.3,8.9,12.65,12.65,0,0,1-3.5,9.2A11.76,11.76,0,0,1,120.21,25.1ZM109,111.9v-77c0-1,.4-1.4,1.3-1.4h19.8c.9,0,1.3.5,1.3,1.4v77c0,1.1-.4,1.6-1.3,1.6h-19.6A1.4,1.4,0,0,1,109,111.9Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/images/javascript.svg b/images/javascript.svg
new file mode 100644
index 0000000..58cd55d
--- /dev/null
+++ b/images/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.76 119.77"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,97.78,19.59,85.92c3.78,6.7,7.22,12.37,15.47,12.37,7.9,0,12.88-3.09,12.88-15.12V1.38H72V83.51c0,24.92-14.6,36.26-35.91,36.26-19.25,0-30.42-10-36.09-22"/><path class="cls-1" d="M85.07,95.2l19.59-11.34c5.15,8.42,11.86,14.61,23.71,14.61,10,0,16.33-5,16.33-11.86,0-8.25-6.53-11.17-17.53-16l-6-2.58C103.8,60.66,92.29,51.38,92.29,31.79,92.29,13.75,106,0,127.51,0c15.3,0,26.3,5.33,34.2,19.25L143,31.28C138.85,23.89,134.39,21,127.51,21c-7,0-11.51,4.46-11.51,10.31,0,7.21,4.47,10.14,14.78,14.6l6,2.58c20.45,8.77,32,17.7,32,37.81,0,21.65-17,33.5-39.87,33.5-22.34,0-36.78-10.65-43.82-24.57"/></g></g></svg>
\ No newline at end of file
diff --git a/images/linkedin.svg b/images/linkedin.svg
new file mode 100644
index 0000000..d4a77d5
--- /dev/null
+++ b/images/linkedin.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 310 310" style="enable-background:new 0 0 310 310;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g id="XMLID_801_">
+	<path id="XMLID_802_" class="st0" d="M72.2,99.7H9.9c-2.8,0-5,2.2-5,5v199.9c0,2.8,2.2,5,5,5h62.2c2.8,0,5-2.2,5-5V104.7
+		C77.2,102,74.9,99.7,72.2,99.7z"/>
+	<path id="XMLID_803_" class="st0" d="M41.1,0.3C18.4,0.3,0,18.7,0,41.4c0,22.6,18.4,41,41.1,41c22.6,0,41-18.4,41-41
+		C82.1,18.7,63.7,0.3,41.1,0.3z"/>
+	<path id="XMLID_804_" class="st0" d="M230.5,94.8c-25,0-43.5,10.7-54.7,23v-13c0-2.8-2.2-5-5-5h-59.6c-2.8,0-5,2.2-5,5v199.9
+		c0,2.8,2.2,5,5,5h62.1c2.8,0,5-2.2,5-5v-98.9c0-33.3,9.1-46.3,32.3-46.3c25.3,0,27.3,20.8,27.3,48v97.2c0,2.8,2.2,5,5,5H305
+		c2.8,0,5-2.2,5-5V195C310,145.4,300.5,94.8,230.5,94.8z"/>
+</g>
+</svg>
diff --git a/images/photoshop.svg b/images/photoshop.svg
new file mode 100644
index 0000000..6c4bff4
--- /dev/null
+++ b/images/photoshop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.41 108"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Outlined_Mnemonics_Logos" data-name="Outlined Mnemonics Logos"><g id="Ps"><path class="cls-1" d="M0,104.6V1.7C0,1,.3.6,1,.6,2.7.6,4.3.6,6.6.5S11.5.4,14.2.3,19.8.2,22.9.1,29,0,32,0c8.2,0,15,1,20.6,3.1A35.71,35.71,0,0,1,66,11.3a31.84,31.84,0,0,1,7.3,11.4,38.28,38.28,0,0,1,2.3,13q0,12.9-6,21.3A34.26,34.26,0,0,1,53.5,69.2c-6.8,2.5-14.3,3.4-22.5,3.4-2.4,0-4,0-5-.1s-2.4-.1-4.3-.1v32.1a1.24,1.24,0,0,1-1.1,1.4H1.2C.4,105.9,0,105.5,0,104.6ZM21.8,19.9V53.5c1.4.1,2.7.2,3.9.2H31a37.35,37.35,0,0,0,11.5-1.8,17.2,17.2,0,0,0,8.2-5.3c2.1-2.5,3.1-5.9,3.1-10.3a16.46,16.46,0,0,0-2.3-8.9,14.5,14.5,0,0,0-7-5.7,29.34,29.34,0,0,0-11.8-2c-2.6,0-4.9,0-6.8.1a22.9,22.9,0,0,0-4.1.1Z"/><path class="cls-1" d="M138,47.4a35.39,35.39,0,0,0-9.6-3.4,52.71,52.71,0,0,0-11.2-1.3,20.13,20.13,0,0,0-6,.7,5.13,5.13,0,0,0-3.1,2,5.3,5.3,0,0,0-.8,2.7,4.45,4.45,0,0,0,1,2.6,11.28,11.28,0,0,0,3.4,2.7c2.3,1.2,4.7,2.3,7.1,3.3A72.43,72.43,0,0,1,134.2,64a23.27,23.27,0,0,1,7.9,8.3,21.59,21.59,0,0,1,2.3,10.3,23.27,23.27,0,0,1-3.9,13.3,25.06,25.06,0,0,1-11.2,8.9c-4.9,2.1-10.9,3.2-18.1,3.2a68.88,68.88,0,0,1-13.6-1.3,40.34,40.34,0,0,1-10.2-3.2,2,2,0,0,1-1.1-1.9V84.2a1.09,1.09,0,0,1,.4-.9.76.76,0,0,1,.9.1A42.81,42.81,0,0,0,100,88.3a46.55,46.55,0,0,0,11.8,1.5c3.8,0,6.5-.5,8.3-1.4a4.65,4.65,0,0,0,2.7-4.2c0-1.4-.8-2.7-2.4-4s-4.9-2.8-9.8-4.7a61.18,61.18,0,0,1-14.2-7.2,25.89,25.89,0,0,1-7.6-8.5,21.46,21.46,0,0,1-2.3-10.2,23.52,23.52,0,0,1,3.4-12.1,24.65,24.65,0,0,1,10.5-9.2c4.7-2.4,10.6-3.5,17.7-3.5a86.21,86.21,0,0,1,12.4.9,35.19,35.19,0,0,1,8.6,2.3,1.76,1.76,0,0,1,1,.9,5,5,0,0,1,.2,1.2V46.4a1.23,1.23,0,0,1-.5,1A2.66,2.66,0,0,1,138,47.4Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/images/rotating-text.svg b/images/rotating-text.svg
new file mode 100644
index 0000000..73de370
--- /dev/null
+++ b/images/rotating-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 521.35 539.01"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M218.35,37.82c-2.31,7-11.92,9.64-18.62,8.26a12.48,12.48,0,0,1-9.83-9l8.52-1.75a6.49,6.49,0,0,0,11.15,2.25c2.14-3.45-.39-7.4-4.21-8-2.87-.65-8.87-1.12-11.54-2C186.56,26,183.25,16,188.16,10.26c3.81-5,14.63-7.1,20-4a11.8,11.8,0,0,1,6,7.3l-8.63,1.77c-1.35-4.38-7.38-5.2-10.21-1.84-1.4,1.63-.88,5.11,1,6.37,2.38,1.63,4.51,1.62,7.8,2.1,4.94.85,8.15.82,11.66,4C218.52,28.47,219.8,34,218.35,37.82Z"/><path d="M244.33,6.79l.19,10.61,14.5-.26.12,6.26-14.5.27.2,11,16.24-.29.12,6.55-24.42.45L236,.44,260.45,0l.12,6.5Z"/><path d="M290.51,9.4l-1.66,10.48,14.32,2.27-1,6.18-14.32-2.26L286.15,37l16,2.54-1,6.47-24.12-3.81L283.44,1.7l24.12,3.82-1,6.41Z"/><path d="M385,76.49c-4.26,2.18-9,1.36-13.39-1.33-6.61-3.78-10.71-11.5-7-18.56l7.43,4.52a6.49,6.49,0,0,0,6.64,9.24,5.17,5.17,0,0,0,3.69-5.57c-.63-2.94-2.25-4.32-4.4-7.05-4.45-5.14-8-10.44-3.93-16.86,4-6.57,11.4-6.44,17.76-2.5,6.71,4,9.9,10.54,6.61,17.47L391,51.27c2-4.13-1.87-8.84-6.22-8.3-2.14.24-4.13,3.14-3.62,5.33.62,2.82,2.19,4.26,4.28,6.85,3,4,5.41,6.15,5.81,10.87C391.52,69.76,388.67,74.7,385,76.49Z"/><path d="M444.46,83.44c4.67,14.51-10.61,30.44-25.29,26.45-15.54-4.15-21.28-22.86-9.66-34.59C420.68,63.19,439.64,68.15,444.46,83.44Zm-16.58-6.87c-8.84-2-18.72,8.28-16.28,17,3.26,9.8,14.43,12.07,21.47,4.24C440.57,90.45,437.81,79.38,427.88,76.57Z"/><path d="M492.42,146.46,458,167.81l-4.28-6.89,24-14.9-29.48,6.07-3.73-6L463,122.43l-23.9,14.83-4.32-6.95L469.14,109l5.23,8.43L455,143.9l32.24-5.81Z"/><path d="M499.47,180l-10,3.47,4.75,13.71-5.92,2.05-4.75-13.7-10.41,3.6,5.32,15.35-6.2,2.15-8-23.08,38.69-13.41,8,23.08-6.13,2.12Z"/><path d="M517.76,300.54c-8.35,12.8-30.21,11.06-36.49-2.85-6.61-14.66,4.24-30.94,20.68-29.37C518.39,269.31,526.55,287.13,517.76,300.54Zm-5.18-17.19c-4-8.14-18.25-9.26-23.47-1.83-5.52,8.74-.23,18.78,10.3,19.3C509.89,301.94,516.68,292.84,512.58,283.35Z"/><path d="M506.5,358.87,500.27,357l4.9-16.51-10.51-3.12-3.92,13.24-6-1.79,3.93-13.23-16.52-4.9,2.33-7.84,39.26,11.65Z"/><path d="M440.86,461.75l-30.57-26.54,5.33-6.14,21.32,18.52-14.52-26.36,4.64-5.34,28.05,10.6-21.24-18.44,5.36-6.17,30.57,26.54-6.5,7.49-31.06-10.68,15.09,29.07Z"/><path d="M394.3,498.43l-4.23-29.72-8.34-11.65,6.7-4.79,8.34,11.65,26.81,13.54-7.64,5.47-17.5-9.51,3.36,19.64Z"/><path d="M269.28,539l3.22-42,9.95-1.65,12.4,28.05,2.77-30.56,9.9-1.63,16.58,38.76-8.76,1.45L304,501.11l-2.84,32.62-8.87,1.47-13.24-30-1,32.33Z"/><path d="M214.38,533.49c-12.59-8.67-10.29-30.48,3.77-36.4,14.83-6.24,30.83,5,28.83,21.41C245.58,534.92,227.56,542.62,214.38,533.49Zm17.31-4.73c8.25-3.8,9.72-18,2.43-23.43-8.6-5.74-18.77-.7-19.56,9.81C213.17,525.6,222.1,532.61,231.69,528.76Z"/><path d="M173,483l4,18.16,3.41,1.15,5.09-15.12,7.75,2.61-13,38.81-14.79-5q-6.76-2.28-9.2-6.77c-3-5.07-.79-13.41,4.3-16.42a12.69,12.69,0,0,1,8.39-1.58l-4.46-18.76Zm5.6,24.64c-5.44-1.56-12.47-6-15,1.5-1.33,4.08.46,6.79,4.66,8.18l6.37,2.14Z"/><path d="M126.61,483.79l-4.48-26.72,8.57,5,3.62,23.81,9.45-16.18,7.06,4.12-20.64,35.37-7.07-4.13,9.27-15.88L110,497.4l-8.51-5Z"/><path d="M45.85,413.79l5.41-4.1,14.89,19.65-5.41,4.1Z"/><path d="M23.67,375.35l6-3.08,11.21,22-6,3.09Z"/><path d="M8.6,333.6l6.49-2,7.17,23.59-6.49,2Z"/><path d="M1.12,289.84l6.74-.8,2.91,24.48-6.74.8Z"/><path d="M1.38,245.48l6.77.38L6.78,270.47,0,270.09Z"/><path d="M9.37,201.81,16,203.37l-5.68,24L3.7,225.8Z"/><path d="M25,160.22l6.22,2.7-9.81,22.61-6.23-2.7Z"/><path d="M47.59,122l5.66,3.75L39.61,146.33,34,142.57Z"/><path d="M76.56,88.41l4.91,4.68-17,17.84-4.91-4.68Z"/><path d="M110.91,60.37l4,5.47L95.07,80.44l-4-5.47Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/vs-code.svg b/images/vs-code.svg
new file mode 100644
index 0000000..ccd8d30
--- /dev/null
+++ b/images/vs-code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2429.78 2403.79"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M2429.29,2014.45V359.37c0-72.74-74.47-97.9-74.47-97.9l-487.49-235C1760.8-39.36,1691,38.32,1691,38.32a102.29,102.29,0,0,1,23.37-11.69A144.53,144.53,0,0,0,1691,38.32L730.91,912.15l-433.1-327.9c-50.05-43.39-97.4,6.42-97.4,6.42L35,738.62c-71,57-11.83,99.62-11.83,99.62l393.52,357.33L23.12,1553.33s-40.44,30.09,0,83.84l182.72,166.2s43.4,46.61,107.51-6.41l417.2-316.35,977.92,888,3.75,4.15c41.92,42.9,92.72,28.85,92.72,28.85l562.46-277.17C2439.4,2075.35,2429.29,2014.45,2429.29,2014.45ZM1824.67,651V1740.24l-716.32-542.32Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/webflow.svg b/images/webflow.svg
new file mode 100644
index 0000000..efc15be
--- /dev/null
+++ b/images/webflow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75.12 52.09"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M55.73,15.23S49.63,34.37,49.16,36C49,34.37,44.53,0,44.53,0c-10.4,0-16,7.38-18.88,15.23,0,0-7.42,19.18-8,20.79,0-1.5-1.14-20.6-1.14-20.6C15.86,5.83,7.1,0,0,0L8.54,52.09c10.9,0,16.73-7.41,19.81-15.24,0,0,6.53-16.92,6.8-17.69.07.73,4.69,32.93,4.69,32.93,10.91,0,16.8-6.9,20-14.45L75.12,0C64.33,0,58.66,7.39,55.73,15.23Z"/></g></g></svg>
\ No newline at end of file
diff --git a/images/wordpress.svg b/images/wordpress.svg
new file mode 100644
index 0000000..d1d90ca
--- /dev/null
+++ b/images/wordpress.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 602.1 602.25"><defs><style>.cls-1{fill:#fdfdfd;fill-rule:evenodd;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M490.94,356.69c20-56.31,19-107.5-13.86-158.36-9.39-14.83-18.91-29.66-24.1-46.65-11.2-37.6,11-70.5,50.14-73C370.91-46,147.28-19.07,50.74,135.17c3.74,1.45,7.66,1.21,11.63,1.21,28,0,55.74-1.69,83.58-3.5,10.13-.72,15.85,3.5,16.21,11.45.31,7.23-4.94,11.81-14.58,12.9-7,.6-13.86,1.33-20.85,1.81-10.54.72-10.6.48-7.23,10.48,35.55,105.16,70.13,210.26,106.3,315.16,1.32-1.57,1.87-2.05,2-2.41q31.54-94.72,63-189.34a12,12,0,0,0,0-8.67Q269,224.59,247.43,164.82c-1.38-4-3.55-5.54-7.77-5.78-8.49-.37-17-1.09-25.31-2-9.4-1.21-14-8.93-10.61-17,3.08-7.47,9.35-7.59,16-7.11,32,1.93,64.06,4.58,96.24,2.78,19-1,38.15-2,57.19-2.9,9-.48,14.28,3.62,14.88,11,.66,7.11-4.64,12.29-13.13,13.37-7.24.73-14.47,1.46-21.82,1.94-11,.72-11.09.48-7.65,10.72,35.4,105,70.1,208.64,105.75,314C465,441.13,475.78,398.6,490.94,356.69Z"/><path class="cls-1" d="M333.67,401.4c-8.74-24.1-17.66-48.2-27.36-74.84C276.18,414.06,246.89,499,217.49,584c-1.7,4.94-.25,6.51,4.51,7.83,58,15.07,115.58,14,172.83-4.45,4.64-1.57,6-2.66,4-7.84Q366.07,490.6,333.67,401.4Z"/><path class="cls-1" d="M169.94,571.7c-47.79-131-95.33-261.17-143.42-393C-38,317.28,17.3,499,169.94,571.7Z"/><path class="cls-1" d="M601.58,283.41a284.93,284.93,0,0,0-33.14-120.64c-4.34.72-2.23,3.37-1.93,5.66,2.23,38.33-3.91,75.33-16.63,111.49C517,374.28,484.35,466.82,452,561.57,551.36,504,608.15,397.58,601.58,283.41Z"/></g></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index aee988d..4e94eb6 100644
--- a/index.html
+++ b/index.html
@@ -12,10 +12,11 @@
     <meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
     <link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon4.ico"
         type="image/x-icon">
-    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700,800|Material+Icons"
+        rel="stylesheet">
 
 
-    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="main.min.css">
 
 </head>
 
@@ -45,12 +46,21 @@
                 <a href="#about-me" id="about-me-link" class="nav-link">About Me</a>
                 <a href="#my-specialties" id="resume-link" class="nav-link">Resume</a>
                 <a href="#contact-me" id="contact-me-link" class="nav-link">Contact Me</a>
-                <a href="mailto:benoti.san@gmail.com" class="social-media-links material-icons" id="mail">mail</a>
-                <a href="#" class="social-media-links material-icons" id="linkedin">adb</a>
-                <a href="#" class="social-media-links material-icons" id="behance">mouse</a>
+                <div style="display: flex;align-items: center;">
+                    <a href="mailto:benoti.san@gmail.com" class="social-media-links material-icons" id="mail">mail</a>
+                    <a href="#" class="social-media-links material-icons" id="linkedin"><img src="images/linkedin.svg"
+                            alt=""></a>
+                </div>
+
             </nav>
         </div>
 
+        <button class="hamburger-button">
+            <div></div>
+            <div></div>
+            <div></div>
+        </button>
+
     </header>
 
     <div id="header-controller"></div>
@@ -72,25 +82,41 @@
             <div class="main-text-block">
                 Hi. I’m a
                 <h1 class="main-hero-text">
-                    <a href="">UI UX Designer</a>,
-                    <a href="">Web Designer</a>,
-                    <a href="">Frontend Web Developer</a>,
-                    <a href="">Graphic and motion Designer</a>.
-                </h1>
+                    <a href="" class="uiux-designer-link">UI UX Designer</a>,
+                    <a href="" class="web-designer-link">Web Designer</a>,
+                    <a href="" class="frontend-designer-link">Frontend Web Developer</a>,
+                    <a href="" class="graphic-motion-designer-link">Graphic and motion Designer</a>.
+                </h1> <br>
+                <button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button>
             </div>
-            <button class="main-cta-button">Let's Talk</button>
 
-            <div class="hero-scroll-down-block">
+
+            <!-- <div class="hero-scroll-down-block">
                 <a href="#my-work">
                     <div>&lsaquo;</div>
                 </a>
+
+                <img src="images/rotating-text.svg" alt="" class="rotating-text-image">
+            </div> -->
+
+            <div class="hero-text-section-graphic">
+                <a href="#my-work">
+                    <img src="images/down-arrow.svg" alt="">
+                </a>
             </div>
         </div>
 
         <img src="images/clouds.jpg" alt="" id="clouds">
         <img src="images/mountains.png" alt="" id="mountains">
 
-        <div class="benjamin-image-block"></div>
+        <div class="benjamin-image-block-wrapper">
+            <div class="benjamin-image-block">
+                <div class="benjamin-image-block-overlay"></div>
+            </div>
+            <div class="service-display-block">
+
+            </div>
+        </div>
         <div class="benjamin-big-text-block">Benjamin<br>Toby</div>
     </section>
 
@@ -104,13 +130,14 @@
 
     <section class="my-work-section" id="my-work">
         <div>
-            <h2 class="scroll-into-view-content">Some of My Work</h2>
-            <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-                tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
-                commodo viverra maecenas accumsan lacus vel facilisis. </p>
+            <h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2>
+            <p class="scroll-into-view-content" data-delay="400">Lorem ipsum dolor sit amet, consectetur adipiscing
+                elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices
+                gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
         </div>
 
         <div class="scroll-into-view">
+            <div class="portfolio-items-container scroll-into-view-content" data-delay="800"></div>
         </div>
     </section>
 
@@ -153,21 +180,68 @@
             viverra maecenas accumsan lacus vel facilisis. </p>
 
         <div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
+            <div class="scroll-into-view-content" data-delay="0">
+                <div>Adobe Photoshop</div><img src="images/photoshop.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="100">
+                <div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="200">
+                <div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="300">
+                <div>HTML 5</div><img src="images/html5.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="400">
+                <div>CSS3</div><img src="images/css3.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="500">
+                <div>javascript</div><img src="images/javascript.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="600">
+                <div>Git Version Control</div><img src="images/git-version-control.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="700">
+                <div>Figma</div><img src="images/figma.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content" data-delay="800">
+                <div>Wordpress</div><img src="images/wordpress.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="900">
+                <div>Webflow</div><img src="images/webflow.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="1000">
+                <div>Adobe XD</div><img src="images/adobe-xd.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="1100">
+                <div>Visual Studio Code</div><img src="images/vs-code.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="1200">
+                <div>Dreamweaver</div><img src="images/dreamweaver.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="1300">
+                <div>Adobe Animate</div><img src="images/adobe animate.svg" alt="">
+            </div>
+
+            <div class="scroll-into-view-content-2" data-delay="1400">
+                <div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt="">
+            </div>
         </div>
+
+        <button class="scroll-into-view-content-2" data-delay="500">Download My Resume</button>
     </section>
 
 
@@ -186,18 +260,21 @@
 
             <p class="scroll-into-view-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                 tempor incididunt ut labore et dolore magna aliqua. </p>
-            <a href="mailto:benoti.san@gmail.com">Email Address&nbsp;<span class="material-icons">mail</span></a>
+            <a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500">
+                Email Address&nbsp;<span class="material-icons">mail</span>
+            </a>
 
-            <div>
+            <div class="scroll-into-view-content-2" data-delay="700">
                 <div>Copyright 2021 Tben.Design</div>
             </div>
 
         </div>
 
-        <div class="scroll-into-view">
+        <div class="scroll-into-view" id="footer-right-section">
 
-            <div class="scroll-into-view-content">
-                <form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php">
+            <div class="scroll-into-view-content" data-delay="800">
+                <form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php"
+                    autocomplete="on">
                     <input type="text" required placeholder="Enter Full Name">
                     <input type="email" required placeholder="Enter Email Address">
                     <textarea name="Message" rows="3" maxlength="3000" required placeholder="Enter Message"></textarea>
@@ -226,7 +303,7 @@
     <!-- #################################################################################-- Scripts -->
 
     <script src="scripts/anime.min.js"></script>
-    <script src="scripts/main.js"></script>
+    <script src="scripts/main.min.js"></script>
 
 </body>
 
diff --git a/main.css b/main.css
index e9ff088..e5b394d 100644
--- a/main.css
+++ b/main.css
@@ -9,7 +9,7 @@ html {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;	
-	font-family: "Poppins", Helvetica;
+	font-family: "Titillium Web", Helvetica;
 	/* font-display: swap; */
     font-size: 18px;
     line-height: 1.5;
@@ -62,6 +62,11 @@ header * {
 /*    transition: all .5s ease;*/
 }
 
+header > div:nth-of-type(1) {
+    position: relative;
+    transform-style: preserve-3d;
+}
+
 header.scrolled {
     padding: 20px;
     background-color: white;
@@ -78,7 +83,7 @@ header.scrolled {
     background: lightgray;
 }
 
-header img {
+header img:not(#linkedin img) {
     width: 40px;
     margin-right: 10px;
 /*    transition: all .3s ease;*/
@@ -87,7 +92,7 @@ header img {
 }
 
 header > a {
-    font-family: "Poppins";
+    font-family: "Titillium Web";
     border: none;
     color: inherit;
     display: flex;
@@ -96,6 +101,7 @@ header > a {
     position: relative;
     perspective: 500px;
     transform-style: preserve-3d;
+    z-index: 10;
 }
 
 header > a > div {
@@ -113,12 +119,12 @@ nav {
 }
 
 .nav-link {
-    font-size: 16px;
-    font-weight: 500;
+    font-size: 17px;
+    font-weight: 600;
     padding: 10px 15px;
     background-size: 100%;
     background-repeat: no-repeat;
-    background-position: -200px 41px;
+    background-position: -200px 43px;
     background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
     color: inherit;
     transition: background .3s ease;
@@ -126,14 +132,40 @@ nav {
 
 .nav-link:hover {
     color: var(--sec-color-2);
-    background-position: 0px 41px;
+    background-position: 0px 43px;
 }
 
 .active-anchor {
-    color: var(--sec-color-2);
-    background-position: 0px 41px;
+    color: var(--sec-color-1);
+    background-position: 0px 43px;
 }
 
+.hamburger-button {
+    width: 40px;
+    height: 40px;
+    padding: 10px 0;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.hamburger-button div {
+    width: 25px;
+    height: 3px;
+    background-color: white;
+}
+
+
+
+
+
+
+
+
+
+
+
 section {
     display: flex;
     position: relative;
@@ -184,7 +216,7 @@ a:hover {
 }
 
 h1, h2, h3, h4 {
-    font-family: "Poppins";
+    font-family: "Titillium Web";
 	margin-top: 0px;
 	margin-bottom: 15px; 
 	width: 100%;    
@@ -195,12 +227,13 @@ h1, h2, h3, h4 {
 
 h1 {
     
-	font-size: 42px;
+	font-size: 46px;
 }
 
 h2 {
-	font-size: 32px;
+	font-size: 50px;
     width: auto;
+    line-height: 1;
 }
 
 h3 {
@@ -218,6 +251,7 @@ p {
 	margin-bottom: 20px;
 	width: 100%;
 	font-weight: 400;
+    letter-spacing: .5px;
 }
 
 span {
@@ -309,21 +343,39 @@ input:focus {
     color: white;
     font-size: 18px;
     background-color: var(--sec-color-1);
+    padding: 0;
+    overflow: hidden;
 }
 
+#linkedin img {
+    width: 20px;
+    height: 20px;
+}
+
+/* #mail {
+   background-color: var(--sec-color-2); 
+} */
+
 #mail {
-   background-color: var(--sec-color-2); 
-}
-
-#linkedin {
    background-color: var(--main-color); 
 }
 
-#behance {
+#linkedin {
    background-color: var(--dark-color);
-    margin-right: 0;
 }
 
+#linkedin:hover {
+    background-color: var(--main-color);
+}
+
+
+
+
+
+
+
+
+
 .scroll-into-view {
     padding: 0;
     width: 0;
@@ -335,16 +387,17 @@ input:focus {
     padding: 40px;
 }
 
-.scroll-into-view-content {
-    transform: translateY(80px) rotateX(5deg);
-    transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
+.scroll-into-view-content, .scroll-into-view-content-2 {
+    transform: translateY(80px) rotateX(5deg) translateZ(20px);
+    /* transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1); */
     opacity: 0;
+    transform-style: preserve-3d;
 }
 
-.scrolled-into-view-content {
+/* .scrolled-into-view-content {
     transform: none;
     opacity: 1;
-}
+} */
 
 
 
@@ -366,32 +419,75 @@ input:focus {
 
 .hero-section > div:nth-child(2) {
     background-color: white;
-    padding: 25vh 40px 40px 6.2vw;
-    font-size: 2.5vw;
+    padding: 25vh 40px 40px 6.1vw;
+    font-size: 2.8vw;
     display: inline;
     z-index: 100;
+    transform-style: preserve-3d;
+    perspective: 600px;
+    z-index: 100;
 /*    opacity: 0;*/
 }
 
 .main-text-block {
     font-size: inherit;
     max-width: 80%;
+    transform-style: preserve-3d;
+    z-index: 100;
+    transform: translateZ(10px);
+    font-weight: 500;
 }
 
-.main-text-block a {
+.main-text-block h1 a {
     color: var(--main-color);
     background-image: linear-gradient(var(--main-color),var(--main-color));
-    background-position: 0px 3.3vw;
+    background-position: 0px 5vw;
     background-repeat: no-repeat;
-    transition: all .3s ease-out;
+    transition: all .3s ease;
+    /* font-weight: 600; */
 }
-.main-text-block a:hover {
-    color: white;
-    background-position: 0px 0px;
+.main-text-block h1 a:hover {
+    color: var(--dark-color);
+    background-position: 0px 4.8vw;
     background-image: linear-gradient(var(--dark-color),var(--dark-color));
     padding: 5px 10px;
 }
 
+.hero-text-section-graphic {
+    position: absolute;
+    top: 0;
+    right: 5vw;
+    width: 15vw;
+    height: 90%;
+    background-color: rgba(28,55,102,0.05);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    perspective: 600px;
+    padding-bottom: 30px;
+}
+
+.hero-text-section-graphic img,  .hero-text-section-graphic a {
+    position: relative;
+    transform-style: preserve-3d;
+}
+
+.hero-text-section-graphic a {
+    width: 20px;
+    height: 20px;
+}
+
+.hero-text-section-graphic img {
+    width: 100%;
+}
+
+
+
+
+
+/* Hero Left Hand Section */
+
 .main-hero-text {
     font-size: inherit;
     font-weight: 500;
@@ -405,10 +501,10 @@ input:focus {
 }
 
 #clouds {
-    min-width: 100%;
-    min-height: 100vh;
-    left: 0px;
-    top: 0px;
+    min-width: 110%;
+    min-height: 110vh;
+    left: -5%;
+    top: -5%;
     opacity: 0.2;
 }
 
@@ -416,41 +512,72 @@ input:focus {
     width: 100%;
     min-height: 100vh;
     bottom: -20vh;
+    /* transition: all .5s ease-out; */
 }
 
-.benjamin-image-block {
+.benjamin-image-block-wrapper {
     width: 15vw;
     height: 80vh;
     position: absolute;
     bottom: -10px;
-    background-color: var(--sec-color-2);
+    background-color: transparent;
     left: 15vw;
+    background-size: cover;
+    opacity: 1;
+    padding: 0;
+    transform-style: preserve-3d;
+}
+
+.benjamin-image-block {
+    width: 100%;
+    height: 100%;
+    background-color: var(--sec-color-2);
     background-image: url("images/hero-image-ben.jpg");
     background-size: cover;
-    opacity: .2;
-    padding: 0;
+    opacity: .8;
+    transform-style: preserve-3d;
+    transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
+}
+
+.benjamin-image-block-overlay {
+    width: 100%;
+    height: 100%;
+    opacity: 1;
+    transform-style: preserve-3d;
+    z-index: 10;    
+    transition: all 1.5s cubic-bezier(0.1, 0.63, 0.355, 1);
 }
 
 .benjamin-big-text-block {
     position: absolute;
-    font-size: 8.5vw;
-    bottom: -40px;
+    font-size: 10.5vw;
+    bottom: 0px;
     left: 5%;
     font-weight: 900;
-    line-height: 1em;
+    line-height: .8;
     color: white;
     mix-blend-mode: overlay;
     filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
     padding: 40px;
+    transform-style: preserve-3d;
+    /* transition: all .5s ease; */
 }
 
 .main-cta-button {
     font-size: 24px;
-    padding: 15px 40px;
+    padding: 0;
     margin-top: 20px;
     background-color: var(--sec-color-1);
     transition: all .3s ease-out;
     background-image: linear-gradient(var(--dark-color),var(--dark-color));
+    padding: 15px 0px;
+    transform: translateZ(10px);
+}
+
+.main-cta-button a {
+    /* font-size: 24px; */
+    padding: 15px 40px;
+    color: white;
 }
 
 .main-cta-button:hover {
@@ -459,10 +586,15 @@ input:focus {
     background-repeat: no-repeat;
 }
 
+.main-cta-button a:hover {
+    /* font-size: 24px; */
+    padding: 15px 40px;
+}
+
 .hero-scroll-down-block {
     position: absolute;
-    right: 5vw;
-    bottom: 5vh;
+    right: 7vw;
+    bottom: 10vh;
     height: auto;
 }
 
@@ -478,6 +610,31 @@ input:focus {
     font-size: 70px;
 }
 
+.rotating-text-image {
+    position: absolute;
+    width: 120px;
+    height: 120px;
+    opacity: .3;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.service-display-block {
+    width: 300px;
+    height: 200px;
+    position: absolute;
+    background-color: white;
+    border-radius: 20px;
+    z-index: 200;
+    top: -20px;
+    right: -200px;
+    box-shadow: 0px 0px 30px -5px rgba(0,0,0,0.2);
+    transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
+    opacity: 0;
+    transform-style: preserve-3d;
+}
+
 
 
 
@@ -499,6 +656,11 @@ input:focus {
 
 .my-work-section > div:nth-child(2) {
     background-color: var(--sec-color-2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 600px;
+    transform-style: preserve-3d;
 /*    width: 20%;*/
 }
 
@@ -511,6 +673,14 @@ input:focus {
     text-align: right;
 }
 
+.portfolio-items-container {
+    width: 70%;
+    height: 70%;
+    background-color: white;
+    box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.2);
+    transform-style: preserve-3d;
+}
+
 
 
 
@@ -530,6 +700,10 @@ input:focus {
 /*    width: 20%;*/
 }
 
+.about-me-section > div:nth-child(2) p {
+    color: rgba(0,0,0,.7);
+}
+
 
 
 
@@ -542,7 +716,8 @@ input:focus {
     background-color: var(--dark-color);
     color: white;
     text-align: center;
-    padding: 100px;
+    padding: 150px 80px 120px 80px;
+    height: auto;
 }
 
 .my-specialties-section h2 {
@@ -555,23 +730,81 @@ input:focus {
 }
 
 .my-specialties-section > div {
-    max-width: 1140px;
+    max-width: 960px;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
-    padding: 20px 0 0 0;
+    padding: 0;
+    margin-bottom: 30px;
 }
 
 .my-specialties-section > div > div {
-    width: 100px;
-    height: 100px;
+    width: 80px;
+    height: 80px;
     background-color: var(--main-color);
     margin: 10px;
     border-radius: 50%;
     transform-style: preserve-3d;
+    padding: 20px;
+    /* cursor: pointer; */
+    transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1);
+    position: relative;
 }
 
+.my-specialties-section > div > div:hover {
+    background-color: rgba(99,105,176,0.6);
+}
+
+.my-specialties-section > div > div:nth-of-type(4) {
+    /* padding: 10px; */
+}
+
+.my-specialties-section > div img {
+    width: 100%;
+    height: 100%;
+}
+
+.my-specialties-section > div > div > div {
+    padding: 20px;
+    border-radius: 10px;
+    background-color: var(--sec-color-1);
+    color: white;
+    position: absolute;
+    top: -70px;
+    left: 50%;
+    box-shadow: 0px 10px 20px -5px rgba(0,0,0,0.3);
+    white-space: nowrap;
+    transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%);
+}
+
+.my-specialties-section > div > div:hover > div {
+    opacity: 1;
+    top: -80px;
+}
+
+.my-specialties-section > button {
+    background: transparent;
+    border: 2px solid rgba(255,255,255,0.4);
+}
+
+.my-specialties-section > button:hover {
+    background: var(--sec-color-1);
+    border: 2px solid transparent;
+}
+
+/* .my-specialties-section > button::before {
+    content: "";
+    width: 200px;
+    height: 50px;
+    background-color: salmon;
+    position: absolute;
+    top: -200px;
+} */
+
 
 
 
@@ -737,7 +970,48 @@ input:focus {
 
 @media (max-width: 1200px) {
     
-    
+    section {
+        height: auto;
+    }
+
+    section > div {
+        padding: 100px 60px;
+    }
+
+    .hero-section > div:nth-child(2) {
+        padding: 140px 30px 60px 60px;
+        font-size: 36px;
+    }
+
+    .hero-section {
+        height: 600px;
+    }
+
+    .hero-text-section-graphic {
+        height: 100%;
+        width: 40%;
+    }
+
+    .main-text-block h1 a {
+        background-position: 0px 60px;
+    }
+
+    .main-text-block h1 a:hover {
+        background-position: 0px 50px;
+    }
+
+    .benjamin-image-block-wrapper {
+        height: 80%;
+        width: 200px;
+    }
+
+    .contact-section {
+        height: 100vh;
+    }
+
+    section > div p {
+        width: 100%;
+    }
     
 }
 
@@ -746,8 +1020,210 @@ input:focus {
 
 
 @media (max-width: 800px) {
+
+    .hamburger-button {
+        display: flex;
+    }
+
+
+
+
+
+
+
+    section > div p {
+        width: 100%;
+        text-align: center;
+    }
+
+    section {
+        flex-direction: column;
+    }
+
+    section > div {
+        width: 100%;
+        align-items: center;
+    }
+
+    h1,h2,h3,h4,h4 {
+        text-align: center;
+        width: 100%;
+    }
     
+    section {
+        height: auto;
+    }
+
+    section > div {
+        padding: 60px 40px;
+    }
     
+    .scrolled-into-view {
+        width: 100%;
+    }
+
+    header {
+        overflow: visible;
+    }
+
+    nav {
+        /* opacity: .4; */
+        flex-direction: column;
+        width: 100%;
+        position: relative;
+    }
+
+    header > div:nth-of-type(1) {
+        position: fixed;
+        top: 0px;
+        opacity: 0;
+        left: 0;
+        width: 100%;
+        pointer-events: none;
+        overflow: hidden;
+        height: 0px;
+        background-color: white;
+        border-bottom: 2px solid #ddd;
+        z-index: 0;
+        padding-top: 120px;
+        box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
+    }
+
+
+
+
+
+
+
+
+    /* Hero section */
+
+    .hero-section {
+        flex-direction: row;
+        transition: all .5s ease;
+        height: 500px;
+    }
+
+    .hero-section > div:nth-child(2) {
+        
+    }
+
+    .hero-text-section-graphic {
+        height: 100%;
+        width: 50%;
+    }
+
+    .benjamin-image-block-wrapper {
+        
+    }
+
+    #clouds {
+        height: 100%;
+        min-height: auto;
+        top: auto;
+        bottom: 0;
+        min-width: auto;
+        /* width: 1200px; */
+    }
+
+    #mountains {
+        height: auto;
+        min-height: auto;
+        width: 1200px;
+    }
+
+    .hero-section > div:nth-child(1) {
+        width: 20%;
+    }
+
+    .hero-section > div:nth-child(2) {
+        padding: 120px 40px 120px 60px;
+        font-size: 30px;
+    }
+    
+    .main-text-block {
+        padding: 0;
+        max-width: 100%;
+    }
+
+    .benjamin-big-text-block {
+        position: absolute;
+        font-size: 8.5vw;
+        bottom: 0px;
+        left: -25%;
+    }
+
+    .benjamin-image-block-wrapper {
+        height: 70%;
+    }
+
+
+
+
+
+
+
+
+    /* My work section */
+
+    .my-work-section {
+        height: auto;
+        padding: 60px 0;
+    }
+
+    .my-work-section > div:nth-child(2) {
+        width: 100%;
+        height: auto;
+        padding: 80px;
+    }
+
+    .my-work-section h2 {
+        text-align: center;
+    }
+
+    .my-work-section p {
+        text-align: center;
+    }
+
+    .portfolio-items-container {
+        height: 400px;
+    }
+
+
+
+
+
+
+    /* About Me section */
+    .about-me-section {
+        justify-content: flex-start;
+        flex-direction: column-reverse;
+    }
+
+    .about-me-section > div:nth-child(1) {
+        height: 500px;
+    }
+
+    
+
+
+
+
+
+
+    /* Contact Me section */
+    .contact-section {
+        height: auto;
+    }
+
+    .contact-section > div:nth-of-type(1) {
+        align-items: center;
+    }
+
+    .contact-section-controller {
+        height: 0px;
+        display: none;
+    }
     
 }
 
@@ -756,9 +1232,122 @@ input:focus {
 
 
 @media (max-width: 600px) {
+
+    h1 {
+        font-size: 36px;
+    }
+
+    h2 {
+        font-size: 36px;
+    }
+
+    section > div {
+        padding: 60px 20px;
+    }
+
+    header {
+        padding: 20px;
+    }
+
+
+
+
+    /* Hero section */
+
+    .hero-section {
+        flex-direction: column;
+        align-items: center;
+        overflow: visible;
+        z-index: 100;
+        height: auto;
+    }
+
+    .hero-section > div:nth-child(2) {        
+        padding: 40px;
+        width: 100%;
+    }
+
+    .hero-section > div:nth-child(1) {
+        width: 100%;
+        height: 400px;
+    }
+
+    .hero-text-section-graphic {
+        height: 120%;
+        width: 40%;
+    }
+
+    .benjamin-image-block-wrapper {
+        top: 0px;
+        bottom: auto;
+        left: auto;
+        right: auto;
+        margin-left: 80px;
+    }
+
+    #clouds {
+        height: 100%;
+        min-height: auto;
+        top: -100px;
+        bottom: 0;
+        min-width: auto;
+        /* width: 1200px; */
+    }
+
+    #mountains {
+        top: -200px;
+        bottom: auto;
+    }
     
-    
-    
+    .main-text-block {
+        padding: 0;
+    }
+
+    .benjamin-big-text-block {
+        top: 190px;
+        font-size: 100px;
+        bottom: auto;
+        left: 0;
+    }
+
+    .benjamin-image-block-wrapper {
+        height: 70%;
+    }
+
+
+    /* My work section */
+
+    .my-work-section > div:nth-child(2) {
+        padding: 40px;
+    }
+
+    .portfolio-items-container {
+        height: 300px;
+        width: 300px;
+    }    
+
+
+
+    /* Contact Me section */
+    .contact-section {
+        height: auto;
+    }
+
+    .contact-section > div:nth-of-type(1) {
+        align-items: center;
+    }
+
+    .contact-section-controller {
+        height: 0px;
+        display: none;
+    }
+
+
+    /* My Specialties Section */
+
+    .my-specialties-section {
+        padding: 100px 20px;
+    }
     
 }
 
@@ -767,8 +1356,58 @@ input:focus {
 
 
 @media (max-width: 430px) {
+
+    p {
+        font-size: 16px;
+    }
     
-    
+    /* Hero section */
+
+    .hero-section > div:nth-child(2) {        
+        padding: 60px 40PX;
+        font-size: 24PX;
+    }
+
+    .hero-section > div:nth-child(1) {
+        width: 100%;
+        height: 400px;
+    }
+
+    .benjamin-image-block-wrapper {
+        width: 50%;
+        top: 0px;
+        bottom: auto;
+        left: auto;
+        right: 0;
+        margin-left: 0px;
+    }
+
+    #clouds {
+        height: 100%;
+        min-height: auto;
+        top: -100px;
+        bottom: 0;
+        min-width: auto;
+        /* width: 1200px; */
+    }
+
+    #mountains {
+        top: -200px;
+        bottom: auto;
+        left: -500px;
+    }
+
+    .benjamin-big-text-block {
+        top: 235px;
+        font-size: 75px;
+        bottom: auto;
+        left: 0;
+    }
+
+    .benjamin-image-block-wrapper {
+        height: 70%;
+    }
+
     
 
 }
diff --git a/main.min.css b/main.min.css
new file mode 100644
index 0000000..c762c8c
--- /dev/null
+++ b/main.min.css
@@ -0,0 +1 @@
+html{width:100%;overflow-x:hidden;scroll-behavior:smooth}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:"Titillium Web",Helvetica;font-size:18px;line-height:1.5;color:#222;position:relative}:root{--main-color:#747bef;--base-color:#222;--sec-color-1:#ed7d71;--sec-color-2:#faa096;--sec-color-3:#75F0E6;--dark-color:#1c3766}body{width:100%;margin:0;overflow:hidden;display:flex;flex-direction:column;align-items:center}header{position:fixed;left:0;top:0;width:100%;z-index:1000;padding:40px;display:flex;align-items:center;justify-content:space-between;height:140px;overflow:hidden;perspective:500px;transition:all .3s ease}header>div:nth-of-type(1){position:relative;transform-style:preserve-3d}header.scrolled{padding:20px;background-color:#fff;height:80px}#header-controller{position:absolute;width:100%;height:15vh;top:0;left:0;background:lightgray}header img:not(#linkedin img){width:40px;margin-right:10px;position:relative;top:0}header>a{font-family:"Titillium Web";border:none;color:inherit;display:flex;align-items:center;font-weight:900;position:relative;perspective:500px;transform-style:preserve-3d;z-index:10}header>a>div{line-height:16px;font-size:24px;color:var(--dark-color)}nav{display:flex;align-items:center;color:inherit;height:100%}.nav-link{font-size:17px;font-weight:600;padding:10px 15px;background-size:100%;background-repeat:no-repeat;background-position:-200px 43px;background-image:linear-gradient(90deg,var(--main-color),var(--sec-color-1));color:inherit;transition:background .3s ease}.nav-link:hover{color:var(--sec-color-2);background-position:0 43px}.active-anchor{color:var(--sec-color-1);background-position:0 43px}.hamburger-button{width:40px;height:40px;padding:10px 0;display:none;flex-direction:column;align-items:center;justify-content:space-around}.hamburger-button div{width:25px;height:3px;background-color:#fff}section{display:flex;position:relative;width:100%;perspective:500px;padding:0;margin:0;height:100vh;overflow:hidden;align-items:stretch}section>div{width:50%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;perspective:500px;transform-style:preserve-3d;padding:15%;position:relative}section>div p{width:350px;color:inherit}a{text-decoration:none;color:var(--dark-color);border:none;cursor:pointer;font-size:inherit}a:hover{border:none}h1,h2,h3,h4{font-family:"Titillium Web";margin-top:0;margin-bottom:15px;width:100%;line-height:1.2;color:inherit;font-weight:700}h1{font-size:46px}h2{font-size:50px;width:auto;line-height:1}p{font-size:20px;line-height:1.5;margin-top:0;margin-bottom:20px;width:100%;font-weight:400;letter-spacing:.5px}span{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}span>a{font-size:inherit;font-weight:inherit;font-family:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;border:inherit;border-color:inherit}span>a:hover{border:inherit;border-color:inherit}button{border:none;background-color:var(--dark-color);padding:10px 20px;color:#fff;cursor:pointer;background-image:linear-gradient(var(--main-color),var(--main-color));background-repeat:no-repeat;background-position:0 67px;transition:background .3s ease}button:hover{background-position:0 0}input,textarea{padding:15px;border-radius:5px;border:1px solid rgba(0,0,0,.2);margin-bottom:15px;width:100%;font-size:14px}input:focus{border:1px solid blue;box-shadow:0 0 15px 0 rgba(0,0,0,.2)}.social-media-links{width:40px;height:40px;border-radius:50%;margin:5px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;background-color:var(--sec-color-1);padding:0;overflow:hidden}#linkedin img{width:20px;height:20px}#mail{background-color:var(--main-color)}#linkedin{background-color:var(--dark-color)}#linkedin:hover{background-color:var(--main-color)}.scroll-into-view{padding:0;width:0;transition:all .7s cubic-bezier(.93,0,.09,1)}.scrolled-into-view{width:50%;padding:40px}.scroll-into-view-content,.scroll-into-view-content-2{transform:translateY(80px) rotateX(5deg) translateZ(20px);opacity:0;transform-style:preserve-3d}.hero-section{background-color:#1b239b;justify-content:space-between}.hero-section>div:nth-child(2){background-color:#fff;padding:25vh 40px 40px 6.1vw;font-size:2.8vw;display:inline;z-index:100;transform-style:preserve-3d;perspective:600px;z-index:100}.main-text-block{font-size:inherit;max-width:80%;transform-style:preserve-3d;z-index:100;transform:translateZ(10px);font-weight:500}.main-text-block h1 a{color:var(--main-color);background-image:linear-gradient(var(--main-color),var(--main-color));background-position:0 5vw;background-repeat:no-repeat;transition:all .3s ease}.main-text-block h1 a:hover{color:var(--dark-color);background-position:0 4.8vw;background-image:linear-gradient(var(--dark-color),var(--dark-color));padding:5px 10px}.hero-text-section-graphic{position:absolute;top:0;right:5vw;width:15vw;height:90%;background-color:rgba(28,55,102,.05);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;perspective:600px;padding-bottom:30px}.hero-text-section-graphic img,.hero-text-section-graphic a{position:relative;transform-style:preserve-3d}.hero-text-section-graphic a{width:20px;height:20px}.hero-text-section-graphic img{width:100%}.main-hero-text{font-size:inherit;font-weight:500;width:auto;display:inline}.hero-section img{position:absolute;z-index:-1}#clouds{min-width:110%;min-height:110vh;left:-5%;top:-5%;opacity:.2}#mountains{width:100%;min-height:100vh;bottom:-20vh}.benjamin-image-block-wrapper{width:15vw;height:80vh;position:absolute;bottom:-10px;background-color:transparent;left:15vw;background-size:cover;opacity:1;padding:0;transform-style:preserve-3d}.benjamin-image-block{width:100%;height:100%;background-color:var(--sec-color-2);background-image:url(images/hero-image-ben.jpg);background-size:cover;opacity:.8;transform-style:preserve-3d;transition:all 1s cubic-bezier(.1,.63,.355,1)}.benjamin-image-block-overlay{width:100%;height:100%;opacity:1;transform-style:preserve-3d;z-index:10;transition:all 1.5s cubic-bezier(.1,.63,.355,1)}.benjamin-big-text-block{position:absolute;font-size:10.5vw;bottom:0;left:5%;font-weight:900;line-height:.8;color:#fff;mix-blend-mode:overlay;filter:drop-shadow(0 0 20px rgba(0,0,0,.4));padding:40px;transform-style:preserve-3d}.main-cta-button{font-size:24px;padding:0;margin-top:20px;background-color:var(--sec-color-1);transition:all .3s ease-out;background-image:linear-gradient(var(--dark-color),var(--dark-color));padding:15px 0;transform:translateZ(10px)}.main-cta-button a{padding:15px 40px;color:#fff}.main-cta-button:hover{background-image:linear-gradient(var(--dark-color),var(--dark-color));background-position:0 0;background-repeat:no-repeat}.main-cta-button a:hover{padding:15px 40px}.hero-scroll-down-block{position:absolute;right:7vw;bottom:10vh;height:auto}.hero-scroll-down-block>a{display:flex;flex-direction:column;height:auto;align-items:center}.hero-scroll-down-block div{transform:rotate(-90deg);font-size:70px}.rotating-text-image{position:absolute;width:120px;height:120px;opacity:.3;top:50%;left:50%;transform:translate(-50%,-50%)}.service-display-block{width:300px;height:200px;position:absolute;background-color:#fff;border-radius:20px;z-index:200;top:-20px;right:-200px;box-shadow:0 0 30px -5px rgba(0,0,0,.2);transition:all .8s cubic-bezier(.075,.82,.165,1);opacity:0;transform-style:preserve-3d}.my-work-section>div:nth-child(1){color:rgba(0,0,0,.6);align-items:flex-end}.my-work-section>div:nth-child(2){background-color:var(--sec-color-2);display:flex;align-items:center;justify-content:center;perspective:600px;transform-style:preserve-3d}.my-work-section h2{text-align:right;color:rgba(0,0,0,.8)}.my-work-section p{text-align:right}.portfolio-items-container{width:70%;height:70%;background-color:#fff;box-shadow:0 10px 20px -5px rgba(0,0,0,.2);transform-style:preserve-3d}.about-me-section{justify-content:flex-end}.about-me-section>div:nth-child(1){background-color:var(--sec-color-3)}.about-me-section>div:nth-child(2) p{color:rgba(0,0,0,.7)}.my-specialties-section{justify-content:flex-start;align-items:center;flex-direction:column;background-color:var(--dark-color);color:#fff;text-align:center;padding:150px 80px 120px 80px;height:auto}.my-specialties-section p{color:rgba(255,255,255,.7);max-width:800px}.my-specialties-section>div{max-width:960px;width:100%;display:flex;flex-wrap:wrap;flex-direction:row;padding:0;margin-bottom:30px}.my-specialties-section>div>div{width:80px;height:80px;background-color:var(--main-color);margin:10px;border-radius:50%;transform-style:preserve-3d;padding:20px;transition:all .8s cubic-bezier(.075,.82,.165,1);position:relative}.my-specialties-section>div>div:hover{background-color:rgba(99,105,176,.6)}.my-specialties-section>div img{width:100%;height:100%}.my-specialties-section>div>div>div{padding:20px;border-radius:10px;background-color:var(--sec-color-1);color:#fff;position:absolute;top:-70px;left:50%;box-shadow:0 10px 20px -5px rgba(0,0,0,.3);white-space:nowrap;transition:all .4s cubic-bezier(.075,.82,.165,1);opacity:0;pointer-events:none;transform:translateX(-50%)}.my-specialties-section>div>div:hover>div{opacity:1;top:-80px}.my-specialties-section>button{background:transparent;border:2px solid rgba(255,255,255,.4)}.my-specialties-section>button:hover{background:var(--sec-color-1);border:2px solid transparent}.contact-section{position:relative;justify-content:flex-start}.contact-section>div:nth-of-type(1){align-items:flex-end;text-align:right}.contact-section>div:nth-of-type(1) a{color:var(--main-color);border-bottom:1px solid var(--main-color);display:flex;align-items:center}.contact-section>div:nth-of-type(1)>div{display:flex;align-items:center;height:50px;border:1px solid #efefef;padding:10px;color:#777;margin-top:20px}.contact-section>div:nth-of-type(1)>div>div{font-size:14px;color:inherit}.contact-section>div:nth-of-type(2){background-color:var(--sec-color-1);height:100%;display:flex;justify-content:center;align-items:center;transform-style:preserve-3d}.contact-section>div:nth-of-type(2)>div{transform-style:preserve-3d;perspective:600px}.contact-section-controller{width:100%;height:80px;position:absolute;bottom:0;left:0;padding:0}.footer-bar{position:absolute;display:flex;flex-direction:row;align-items:flex-end;width:960px;height:240px;padding:0;bottom:40px;pointer-events:none;left:50%;transform:translateX(-50%)}.main-cta-form{max-width:500px;transform-style:preserve-3d}.main-cta-form input{background-color:transparent;border:none;border-bottom:2px solid #fff;height:50px;color:#fff;border-radius:0;margin-bottom:0;font-size:20px}.main-cta-form input:focus{outline:2px solid #fff;box-shadow:none}.main-cta-form textarea{background-color:transparent;border:none;border-bottom:2px solid #fff;color:#fff;border-radius:0;margin-bottom:20px;font-size:20px}.main-cta-form textarea::placeholder,.main-cta-form input::placeholder{color:rgba(255,255,255,.7)}.main-cta-form textarea:focus{outline:2px solid #fff}.main-cta-form button{width:100%}@media (max-width:1200px){section{height:auto}section>div{padding:100px 60px}.hero-section>div:nth-child(2){padding:140px 30px 60px 60px;font-size:36px}.hero-section{height:600px}.hero-text-section-graphic{height:100%;width:40%}.main-text-block h1 a{background-position:0 60px}.main-text-block h1 a:hover{background-position:0 50px}.benjamin-image-block-wrapper{height:80%;width:200px}.contact-section{height:100vh}section>div p{width:100%}}@media (max-width:800px){.hamburger-button{display:flex}section>div p{width:100%;text-align:center}section{flex-direction:column}section>div{width:100%;align-items:center}h1,h2,h3,h4,h4{text-align:center;width:100%}section{height:auto}section>div{padding:60px 40px}.scrolled-into-view{width:100%}header{overflow:visible}nav{flex-direction:column;width:100%;position:relative}header>div:nth-of-type(1){position:fixed;top:0;opacity:0;left:0;width:100%;pointer-events:none;overflow:hidden;height:0;background-color:#fff;border-bottom:2px solid #ddd;z-index:0;padding-top:120px;box-shadow:0 10px 20px rgba(0,0,0,.5)}.hero-section{flex-direction:row;transition:all .5s ease;height:500px}.hero-text-section-graphic{height:100%;width:50%}#clouds{height:100%;min-height:auto;top:auto;bottom:0;min-width:auto}#mountains{height:auto;min-height:auto;width:1200px}.hero-section>div:nth-child(1){width:20%}.hero-section>div:nth-child(2){padding:120px 40px 120px 60px;font-size:30px}.main-text-block{padding:0;max-width:100%}.benjamin-big-text-block{position:absolute;font-size:8.5vw;bottom:0;left:-25%}.benjamin-image-block-wrapper{height:70%}.my-work-section{height:auto;padding:60px 0}.my-work-section>div:nth-child(2){width:100%;height:auto;padding:80px}.my-work-section h2{text-align:center}.my-work-section p{text-align:center}.portfolio-items-container{height:400px}.about-me-section{justify-content:flex-start;flex-direction:column-reverse}.about-me-section>div:nth-child(1){height:500px}.contact-section{height:auto}.contact-section>div:nth-of-type(1){align-items:center}.contact-section-controller{height:0;display:none}}@media (max-width:600px){h1{font-size:36px}h2{font-size:36px}section>div{padding:60px 20px}header{padding:20px}.hero-section{flex-direction:column;align-items:center;overflow:visible;z-index:100;height:auto}.hero-section>div:nth-child(2){padding:40px;width:100%}.hero-section>div:nth-child(1){width:100%;height:400px}.hero-text-section-graphic{height:120%;width:40%}.benjamin-image-block-wrapper{top:0;bottom:auto;left:auto;right:auto;margin-left:80px}#clouds{height:100%;min-height:auto;top:-100px;bottom:0;min-width:auto}#mountains{top:-200px;bottom:auto}.main-text-block{padding:0}.benjamin-big-text-block{top:190px;font-size:100px;bottom:auto;left:0}.benjamin-image-block-wrapper{height:70%}.my-work-section>div:nth-child(2){padding:40px}.portfolio-items-container{height:300px;width:300px}.contact-section{height:auto}.contact-section>div:nth-of-type(1){align-items:center}.contact-section-controller{height:0;display:none}.my-specialties-section{padding:100px 20px}}@media (max-width:430px){p{font-size:16px}.hero-section>div:nth-child(2){padding:60px 40PX;font-size:24PX}.hero-section>div:nth-child(1){width:100%;height:400px}.benjamin-image-block-wrapper{width:50%;top:0;bottom:auto;left:auto;right:0;margin-left:0}#clouds{height:100%;min-height:auto;top:-100px;bottom:0;min-width:auto}#mountains{top:-200px;bottom:auto;left:-500px}.benjamin-big-text-block{top:235px;font-size:75px;bottom:auto;left:0}.benjamin-image-block-wrapper{height:70%}}
\ No newline at end of file
diff --git a/scripts/anime.js b/scripts/anime.js
new file mode 100644
index 0000000..a99421a
--- /dev/null
+++ b/scripts/anime.js
@@ -0,0 +1,1312 @@
+/*
+ * anime.js v3.2.1
+ * (c) 2020 Julian Garnier
+ * Released under the MIT license
+ * animejs.com
+ */
+
+'use strict';
+
+// Defaults
+
+var defaultInstanceSettings = {
+  update: null,
+  begin: null,
+  loopBegin: null,
+  changeBegin: null,
+  change: null,
+  changeComplete: null,
+  loopComplete: null,
+  complete: null,
+  loop: 1,
+  direction: 'normal',
+  autoplay: true,
+  timelineOffset: 0
+};
+
+var defaultTweenSettings = {
+  duration: 1000,
+  delay: 0,
+  endDelay: 0,
+  easing: 'easeOutElastic(1, .5)',
+  round: 0
+};
+
+var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d'];
+
+// Caching
+
+var cache = {
+  CSS: {},
+  springs: {}
+};
+
+// Utils
+
+function minMax(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+function stringContains(str, text) {
+  return str.indexOf(text) > -1;
+}
+
+function applyArguments(func, args) {
+  return func.apply(null, args);
+}
+
+var is = {
+  arr: function (a) { return Array.isArray(a); },
+  obj: function (a) { return stringContains(Object.prototype.toString.call(a), 'Object'); },
+  pth: function (a) { return is.obj(a) && a.hasOwnProperty('totalLength'); },
+  svg: function (a) { return a instanceof SVGElement; },
+  inp: function (a) { return a instanceof HTMLInputElement; },
+  dom: function (a) { return a.nodeType || is.svg(a); },
+  str: function (a) { return typeof a === 'string'; },
+  fnc: function (a) { return typeof a === 'function'; },
+  und: function (a) { return typeof a === 'undefined'; },
+  nil: function (a) { return is.und(a) || a === null; },
+  hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a); },
+  rgb: function (a) { return /^rgb/.test(a); },
+  hsl: function (a) { return /^hsl/.test(a); },
+  col: function (a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)); },
+  key: function (a) { return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes'; },
+};
+
+// Easings
+
+function parseEasingParameters(string) {
+  var match = /\(([^)]+)\)/.exec(string);
+  return match ? match[1].split(',').map(function (p) { return parseFloat(p); }) : [];
+}
+
+// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js
+
+function spring(string, duration) {
+
+  var params = parseEasingParameters(string);
+  var mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100);
+  var stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100);
+  var damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100);
+  var velocity =  minMax(is.und(params[3]) ? 0 : params[3], .1, 100);
+  var w0 = Math.sqrt(stiffness / mass);
+  var zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
+  var a = 1;
+  var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
+
+  function solver(t) {
+    var progress = duration ? (duration * t) / 1000 : t;
+    if (zeta < 1) {
+      progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress));
+    } else {
+      progress = (a + b * progress) * Math.exp(-progress * w0);
+    }
+    if (t === 0 || t === 1) { return t; }
+    return 1 - progress;
+  }
+
+  function getDuration() {
+    var cached = cache.springs[string];
+    if (cached) { return cached; }
+    var frame = 1/6;
+    var elapsed = 0;
+    var rest = 0;
+    while(true) {
+      elapsed += frame;
+      if (solver(elapsed) === 1) {
+        rest++;
+        if (rest >= 16) { break; }
+      } else {
+        rest = 0;
+      }
+    }
+    var duration = elapsed * frame * 1000;
+    cache.springs[string] = duration;
+    return duration;
+  }
+
+  return duration ? solver : getDuration;
+
+}
+
+// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
+
+function steps(steps) {
+  if ( steps === void 0 ) steps = 10;
+
+  return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); };
+}
+
+// BezierEasing https://github.com/gre/bezier-easing
+
+var bezier = (function () {
+
+  var kSplineTableSize = 11;
+  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+  function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }
+  function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }
+  function C(aA1)      { return 3.0 * aA1 }
+
+  function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }
+  function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }
+
+  function binarySubdivide(aX, aA, aB, mX1, mX2) {
+    var currentX, currentT, i = 0;
+    do {
+      currentT = aA + (aB - aA) / 2.0;
+      currentX = calcBezier(currentT, mX1, mX2) - aX;
+      if (currentX > 0.0) { aB = currentT; } else { aA = currentT; }
+    } while (Math.abs(currentX) > 0.0000001 && ++i < 10);
+    return currentT;
+  }
+
+  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    for (var i = 0; i < 4; ++i) {
+      var currentSlope = getSlope(aGuessT, mX1, mX2);
+      if (currentSlope === 0.0) { return aGuessT; }
+      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+      aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+  }
+
+  function bezier(mX1, mY1, mX2, mY2) {
+
+    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { return; }
+    var sampleValues = new Float32Array(kSplineTableSize);
+
+    if (mX1 !== mY1 || mX2 !== mY2) {
+      for (var i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+      }
+    }
+
+    function getTForX(aX) {
+
+      var intervalStart = 0;
+      var currentSample = 1;
+      var lastSample = kSplineTableSize - 1;
+
+      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+        intervalStart += kSampleStepSize;
+      }
+
+      --currentSample;
+
+      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+      var guessForT = intervalStart + dist * kSampleStepSize;
+      var initialSlope = getSlope(guessForT, mX1, mX2);
+
+      if (initialSlope >= 0.001) {
+        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+      } else if (initialSlope === 0.0) {
+        return guessForT;
+      } else {
+        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+      }
+
+    }
+
+    return function (x) {
+      if (mX1 === mY1 && mX2 === mY2) { return x; }
+      if (x === 0 || x === 1) { return x; }
+      return calcBezier(getTForX(x), mY1, mY2);
+    }
+
+  }
+
+  return bezier;
+
+})();
+
+var penner = (function () {
+
+  // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+  var eases = { linear: function () { return function (t) { return t; }; } };
+
+  var functionEasings = {
+    Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; },
+    Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; },
+    Back: function () { return function (t) { return t * t * (3 * t - 2); }; },
+    Bounce: function () { return function (t) {
+      var pow2, b = 4;
+      while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {}
+      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2)
+    }; },
+    Elastic: function (amplitude, period) {
+      if ( amplitude === void 0 ) amplitude = 1;
+      if ( period === void 0 ) period = .5;
+
+      var a = minMax(amplitude, 1, 10);
+      var p = minMax(period, .1, 2);
+      return function (t) {
+        return (t === 0 || t === 1) ? t : 
+          -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
+      }
+    }
+  };
+
+  var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
+
+  baseEasings.forEach(function (name, i) {
+    functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; };
+  });
+
+  Object.keys(functionEasings).forEach(function (name) {
+    var easeIn = functionEasings[name];
+    eases['easeIn' + name] = easeIn;
+    eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; };
+    eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : 
+      1 - easeIn(a, b)(t * -2 + 2) / 2; }; };
+    eases['easeOutIn' + name] = function (a, b) { return function (t) { return t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : 
+      (easeIn(a, b)(t * 2 - 1) + 1) / 2; }; };
+  });
+
+  return eases;
+
+})();
+
+function parseEasings(easing, duration) {
+  if (is.fnc(easing)) { return easing; }
+  var name = easing.split('(')[0];
+  var ease = penner[name];
+  var args = parseEasingParameters(easing);
+  switch (name) {
+    case 'spring' : return spring(easing, duration);
+    case 'cubicBezier' : return applyArguments(bezier, args);
+    case 'steps' : return applyArguments(steps, args);
+    default : return applyArguments(ease, args);
+  }
+}
+
+// Strings
+
+function selectString(str) {
+  try {
+    var nodes = document.querySelectorAll(str);
+    return nodes;
+  } catch(e) {
+    return;
+  }
+}
+
+// Arrays
+
+function filterArray(arr, callback) {
+  var len = arr.length;
+  var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
+  var result = [];
+  for (var i = 0; i < len; i++) {
+    if (i in arr) {
+      var val = arr[i];
+      if (callback.call(thisArg, val, i, arr)) {
+        result.push(val);
+      }
+    }
+  }
+  return result;
+}
+
+function flattenArray(arr) {
+  return arr.reduce(function (a, b) { return a.concat(is.arr(b) ? flattenArray(b) : b); }, []);
+}
+
+function toArray(o) {
+  if (is.arr(o)) { return o; }
+  if (is.str(o)) { o = selectString(o) || o; }
+  if (o instanceof NodeList || o instanceof HTMLCollection) { return [].slice.call(o); }
+  return [o];
+}
+
+function arrayContains(arr, val) {
+  return arr.some(function (a) { return a === val; });
+}
+
+// Objects
+
+function cloneObject(o) {
+  var clone = {};
+  for (var p in o) { clone[p] = o[p]; }
+  return clone;
+}
+
+function replaceObjectProps(o1, o2) {
+  var o = cloneObject(o1);
+  for (var p in o1) { o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; }
+  return o;
+}
+
+function mergeObjects(o1, o2) {
+  var o = cloneObject(o1);
+  for (var p in o2) { o[p] = is.und(o1[p]) ? o2[p] : o1[p]; }
+  return o;
+}
+
+// Colors
+
+function rgbToRgba(rgbValue) {
+  var rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue);
+  return rgb ? ("rgba(" + (rgb[1]) + ",1)") : rgbValue;
+}
+
+function hexToRgba(hexValue) {
+  var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  var hex = hexValue.replace(rgx, function (m, r, g, b) { return r + r + g + g + b + b; } );
+  var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  var r = parseInt(rgb[1], 16);
+  var g = parseInt(rgb[2], 16);
+  var b = parseInt(rgb[3], 16);
+  return ("rgba(" + r + "," + g + "," + b + ",1)");
+}
+
+function hslToRgba(hslValue) {
+  var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue);
+  var h = parseInt(hsl[1], 10) / 360;
+  var s = parseInt(hsl[2], 10) / 100;
+  var l = parseInt(hsl[3], 10) / 100;
+  var a = hsl[4] || 1;
+  function hue2rgb(p, q, t) {
+    if (t < 0) { t += 1; }
+    if (t > 1) { t -= 1; }
+    if (t < 1/6) { return p + (q - p) * 6 * t; }
+    if (t < 1/2) { return q; }
+    if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; }
+    return p;
+  }
+  var r, g, b;
+  if (s == 0) {
+    r = g = b = l;
+  } else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1/3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1/3);
+  }
+  return ("rgba(" + (r * 255) + "," + (g * 255) + "," + (b * 255) + "," + a + ")");
+}
+
+function colorToRgb(val) {
+  if (is.rgb(val)) { return rgbToRgba(val); }
+  if (is.hex(val)) { return hexToRgba(val); }
+  if (is.hsl(val)) { return hslToRgba(val); }
+}
+
+// Units
+
+function getUnit(val) {
+  var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
+  if (split) { return split[1]; }
+}
+
+function getTransformUnit(propName) {
+  if (stringContains(propName, 'translate') || propName === 'perspective') { return 'px'; }
+  if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) { return 'deg'; }
+}
+
+// Values
+
+function getFunctionValue(val, animatable) {
+  if (!is.fnc(val)) { return val; }
+  return val(animatable.target, animatable.id, animatable.total);
+}
+
+function getAttribute(el, prop) {
+  return el.getAttribute(prop);
+}
+
+function convertPxToUnit(el, value, unit) {
+  var valueUnit = getUnit(value);
+  if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) { return value; }
+  var cached = cache.CSS[value + unit];
+  if (!is.und(cached)) { return cached; }
+  var baseline = 100;
+  var tempEl = document.createElement(el.tagName);
+  var parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body;
+  parentEl.appendChild(tempEl);
+  tempEl.style.position = 'absolute';
+  tempEl.style.width = baseline + unit;
+  var factor = baseline / tempEl.offsetWidth;
+  parentEl.removeChild(tempEl);
+  var convertedUnit = factor * parseFloat(value);
+  cache.CSS[value + unit] = convertedUnit;
+  return convertedUnit;
+}
+
+function getCSSValue(el, prop, unit) {
+  if (prop in el.style) {
+    var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0';
+    return unit ? convertPxToUnit(el, value, unit) : value;
+  }
+}
+
+function getAnimationType(el, prop) {
+  if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) { return 'attribute'; }
+  if (is.dom(el) && arrayContains(validTransforms, prop)) { return 'transform'; }
+  if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) { return 'css'; }
+  if (el[prop] != null) { return 'object'; }
+}
+
+function getElementTransforms(el) {
+  if (!is.dom(el)) { return; }
+  var str = el.style.transform || '';
+  var reg  = /(\w+)\(([^)]*)\)/g;
+  var transforms = new Map();
+  var m; while (m = reg.exec(str)) { transforms.set(m[1], m[2]); }
+  return transforms;
+}
+
+function getTransformValue(el, propName, animatable, unit) {
+  var defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName);
+  var value = getElementTransforms(el).get(propName) || defaultVal;
+  if (animatable) {
+    animatable.transforms.list.set(propName, value);
+    animatable.transforms['last'] = propName;
+  }
+  return unit ? convertPxToUnit(el, value, unit) : value;
+}
+
+function getOriginalTargetValue(target, propName, unit, animatable) {
+  switch (getAnimationType(target, propName)) {
+    case 'transform': return getTransformValue(target, propName, animatable, unit);
+    case 'css': return getCSSValue(target, propName, unit);
+    case 'attribute': return getAttribute(target, propName);
+    default: return target[propName] || 0;
+  }
+}
+
+function getRelativeValue(to, from) {
+  var operator = /^(\*=|\+=|-=)/.exec(to);
+  if (!operator) { return to; }
+  var u = getUnit(to) || 0;
+  var x = parseFloat(from);
+  var y = parseFloat(to.replace(operator[0], ''));
+  switch (operator[0][0]) {
+    case '+': return x + y + u;
+    case '-': return x - y + u;
+    case '*': return x * y + u;
+  }
+}
+
+function validateValue(val, unit) {
+  if (is.col(val)) { return colorToRgb(val); }
+  if (/\s/g.test(val)) { return val; }
+  var originalUnit = getUnit(val);
+  var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
+  if (unit) { return unitLess + unit; }
+  return unitLess;
+}
+
+// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes
+// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744
+
+function getDistance(p1, p2) {
+  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+
+function getCircleLength(el) {
+  return Math.PI * 2 * getAttribute(el, 'r');
+}
+
+function getRectLength(el) {
+  return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2);
+}
+
+function getLineLength(el) {
+  return getDistance(
+    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, 
+    {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')}
+  );
+}
+
+function getPolylineLength(el) {
+  var points = el.points;
+  var totalLength = 0;
+  var previousPos;
+  for (var i = 0 ; i < points.numberOfItems; i++) {
+    var currentPos = points.getItem(i);
+    if (i > 0) { totalLength += getDistance(previousPos, currentPos); }
+    previousPos = currentPos;
+  }
+  return totalLength;
+}
+
+function getPolygonLength(el) {
+  var points = el.points;
+  return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0));
+}
+
+// Path animation
+
+function getTotalLength(el) {
+  if (el.getTotalLength) { return el.getTotalLength(); }
+  switch(el.tagName.toLowerCase()) {
+    case 'circle': return getCircleLength(el);
+    case 'rect': return getRectLength(el);
+    case 'line': return getLineLength(el);
+    case 'polyline': return getPolylineLength(el);
+    case 'polygon': return getPolygonLength(el);
+  }
+}
+
+function setDashoffset(el) {
+  var pathLength = getTotalLength(el);
+  el.setAttribute('stroke-dasharray', pathLength);
+  return pathLength;
+}
+
+// Motion path
+
+function getParentSvgEl(el) {
+  var parentEl = el.parentNode;
+  while (is.svg(parentEl)) {
+    if (!is.svg(parentEl.parentNode)) { break; }
+    parentEl = parentEl.parentNode;
+  }
+  return parentEl;
+}
+
+function getParentSvg(pathEl, svgData) {
+  var svg = svgData || {};
+  var parentSvgEl = svg.el || getParentSvgEl(pathEl);
+  var rect = parentSvgEl.getBoundingClientRect();
+  var viewBoxAttr = getAttribute(parentSvgEl, 'viewBox');
+  var width = rect.width;
+  var height = rect.height;
+  var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]);
+  return {
+    el: parentSvgEl,
+    viewBox: viewBox,
+    x: viewBox[0] / 1,
+    y: viewBox[1] / 1,
+    w: width,
+    h: height,
+    vW: viewBox[2],
+    vH: viewBox[3]
+  }
+}
+
+function getPath(path, percent) {
+  var pathEl = is.str(path) ? selectString(path)[0] : path;
+  var p = percent || 100;
+  return function(property) {
+    return {
+      property: property,
+      el: pathEl,
+      svg: getParentSvg(pathEl),
+      totalLength: getTotalLength(pathEl) * (p / 100)
+    }
+  }
+}
+
+function getPathProgress(path, progress, isPathTargetInsideSVG) {
+  function point(offset) {
+    if ( offset === void 0 ) offset = 0;
+
+    var l = progress + offset >= 1 ? progress + offset : 0;
+    return path.el.getPointAtLength(l);
+  }
+  var svg = getParentSvg(path.el, path.svg);
+  var p = point();
+  var p0 = point(-1);
+  var p1 = point(+1);
+  var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW;
+  var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH;
+  switch (path.property) {
+    case 'x': return (p.x - svg.x) * scaleX;
+    case 'y': return (p.y - svg.y) * scaleY;
+    case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI;
+  }
+}
+
+// Decompose value
+
+function decomposeValue(val, unit) {
+  // const rgx = /-?\d*\.?\d+/g; // handles basic numbers
+  // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
+  var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
+  var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
+  return {
+    original: value,
+    numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0],
+    strings: (is.str(val) || unit) ? value.split(rgx) : []
+  }
+}
+
+// Animatables
+
+function parseTargets(targets) {
+  var targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : [];
+  return filterArray(targetsArray, function (item, pos, self) { return self.indexOf(item) === pos; });
+}
+
+function getAnimatables(targets) {
+  var parsed = parseTargets(targets);
+  return parsed.map(function (t, i) {
+    return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } };
+  });
+}
+
+// Properties
+
+function normalizePropertyTweens(prop, tweenSettings) {
+  var settings = cloneObject(tweenSettings);
+  // Override duration if easing is a spring
+  if (/^spring/.test(settings.easing)) { settings.duration = spring(settings.easing); }
+  if (is.arr(prop)) {
+    var l = prop.length;
+    var isFromTo = (l === 2 && !is.obj(prop[0]));
+    if (!isFromTo) {
+      // Duration divided by the number of tweens
+      if (!is.fnc(tweenSettings.duration)) { settings.duration = tweenSettings.duration / l; }
+    } else {
+      // Transform [from, to] values shorthand to a valid tween value
+      prop = {value: prop};
+    }
+  }
+  var propArray = is.arr(prop) ? prop : [prop];
+  return propArray.map(function (v, i) {
+    var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v};
+    // Default delay value should only be applied to the first tween
+    if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; }
+    // Default endDelay value should only be applied to the last tween
+    if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; }
+    return obj;
+  }).map(function (k) { return mergeObjects(k, settings); });
+}
+
+
+function flattenKeyframes(keyframes) {
+  var propertyNames = filterArray(flattenArray(keyframes.map(function (key) { return Object.keys(key); })), function (p) { return is.key(p); })
+  .reduce(function (a,b) { if (a.indexOf(b) < 0) { a.push(b); } return a; }, []);
+  var properties = {};
+  var loop = function ( i ) {
+    var propName = propertyNames[i];
+    properties[propName] = keyframes.map(function (key) {
+      var newKey = {};
+      for (var p in key) {
+        if (is.key(p)) {
+          if (p == propName) { newKey.value = key[p]; }
+        } else {
+          newKey[p] = key[p];
+        }
+      }
+      return newKey;
+    });
+  };
+
+  for (var i = 0; i < propertyNames.length; i++) loop( i );
+  return properties;
+}
+
+function getProperties(tweenSettings, params) {
+  var properties = [];
+  var keyframes = params.keyframes;
+  if (keyframes) { params = mergeObjects(flattenKeyframes(keyframes), params); }
+  for (var p in params) {
+    if (is.key(p)) {
+      properties.push({
+        name: p,
+        tweens: normalizePropertyTweens(params[p], tweenSettings)
+      });
+    }
+  }
+  return properties;
+}
+
+// Tweens
+
+function normalizeTweenValues(tween, animatable) {
+  var t = {};
+  for (var p in tween) {
+    var value = getFunctionValue(tween[p], animatable);
+    if (is.arr(value)) {
+      value = value.map(function (v) { return getFunctionValue(v, animatable); });
+      if (value.length === 1) { value = value[0]; }
+    }
+    t[p] = value;
+  }
+  t.duration = parseFloat(t.duration);
+  t.delay = parseFloat(t.delay);
+  return t;
+}
+
+function normalizeTweens(prop, animatable) {
+  var previousTween;
+  return prop.tweens.map(function (t) {
+    var tween = normalizeTweenValues(t, animatable);
+    var tweenValue = tween.value;
+    var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue;
+    var toUnit = getUnit(to);
+    var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable);
+    var previousValue = previousTween ? previousTween.to.original : originalValue;
+    var from = is.arr(tweenValue) ? tweenValue[0] : previousValue;
+    var fromUnit = getUnit(from) || getUnit(originalValue);
+    var unit = toUnit || fromUnit;
+    if (is.und(to)) { to = previousValue; }
+    tween.from = decomposeValue(from, unit);
+    tween.to = decomposeValue(getRelativeValue(to, from), unit);
+    tween.start = previousTween ? previousTween.end : 0;
+    tween.end = tween.start + tween.delay + tween.duration + tween.endDelay;
+    tween.easing = parseEasings(tween.easing, tween.duration);
+    tween.isPath = is.pth(tweenValue);
+    tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target);
+    tween.isColor = is.col(tween.from.original);
+    if (tween.isColor) { tween.round = 1; }
+    previousTween = tween;
+    return tween;
+  });
+}
+
+// Tween progress
+
+var setProgressValue = {
+  css: function (t, p, v) { return t.style[p] = v; },
+  attribute: function (t, p, v) { return t.setAttribute(p, v); },
+  object: function (t, p, v) { return t[p] = v; },
+  transform: function (t, p, v, transforms, manual) {
+    transforms.list.set(p, v);
+    if (p === transforms.last || manual) {
+      var str = '';
+      transforms.list.forEach(function (value, prop) { str += prop + "(" + value + ") "; });
+      t.style.transform = str;
+    }
+  }
+};
+
+// Set Value helper
+
+function setTargetsValue(targets, properties) {
+  var animatables = getAnimatables(targets);
+  animatables.forEach(function (animatable) {
+    for (var property in properties) {
+      var value = getFunctionValue(properties[property], animatable);
+      var target = animatable.target;
+      var valueUnit = getUnit(value);
+      var originalValue = getOriginalTargetValue(target, property, valueUnit, animatable);
+      var unit = valueUnit || getUnit(originalValue);
+      var to = getRelativeValue(validateValue(value, unit), originalValue);
+      var animType = getAnimationType(target, property);
+      setProgressValue[animType](target, property, to, animatable.transforms, true);
+    }
+  });
+}
+
+// Animations
+
+function createAnimation(animatable, prop) {
+  var animType = getAnimationType(animatable.target, prop.name);
+  if (animType) {
+    var tweens = normalizeTweens(prop, animatable);
+    var lastTween = tweens[tweens.length - 1];
+    return {
+      type: animType,
+      property: prop.name,
+      animatable: animatable,
+      tweens: tweens,
+      duration: lastTween.end,
+      delay: tweens[0].delay,
+      endDelay: lastTween.endDelay
+    }
+  }
+}
+
+function getAnimations(animatables, properties) {
+  return filterArray(flattenArray(animatables.map(function (animatable) {
+    return properties.map(function (prop) {
+      return createAnimation(animatable, prop);
+    });
+  })), function (a) { return !is.und(a); });
+}
+
+// Create Instance
+
+function getInstanceTimings(animations, tweenSettings) {
+  var animLength = animations.length;
+  var getTlOffset = function (anim) { return anim.timelineOffset ? anim.timelineOffset : 0; };
+  var timings = {};
+  timings.duration = animLength ? Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration; })) : tweenSettings.duration;
+  timings.delay = animLength ? Math.min.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.delay; })) : tweenSettings.delay;
+  timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration - anim.endDelay; })) : tweenSettings.endDelay;
+  return timings;
+}
+
+var instanceID = 0;
+
+function createNewInstance(params) {
+  var instanceSettings = replaceObjectProps(defaultInstanceSettings, params);
+  var tweenSettings = replaceObjectProps(defaultTweenSettings, params);
+  var properties = getProperties(tweenSettings, params);
+  var animatables = getAnimatables(params.targets);
+  var animations = getAnimations(animatables, properties);
+  var timings = getInstanceTimings(animations, tweenSettings);
+  var id = instanceID;
+  instanceID++;
+  return mergeObjects(instanceSettings, {
+    id: id,
+    children: [],
+    animatables: animatables,
+    animations: animations,
+    duration: timings.duration,
+    delay: timings.delay,
+    endDelay: timings.endDelay
+  });
+}
+
+// Core
+
+var activeInstances = [];
+
+var engine = (function () {
+  var raf;
+
+  function play() {
+    if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) {
+      raf = requestAnimationFrame(step);
+    }
+  }
+  function step(t) {
+    // memo on algorithm issue:
+    // dangerous iteration over mutable `activeInstances`
+    // (that collection may be updated from within callbacks of `tick`-ed animation instances)
+    var activeInstancesLength = activeInstances.length;
+    var i = 0;
+    while (i < activeInstancesLength) {
+      var activeInstance = activeInstances[i];
+      if (!activeInstance.paused) {
+        activeInstance.tick(t);
+        i++;
+      } else {
+        activeInstances.splice(i, 1);
+        activeInstancesLength--;
+      }
+    }
+    raf = i > 0 ? requestAnimationFrame(step) : undefined;
+  }
+
+  function handleVisibilityChange() {
+    if (!anime.suspendWhenDocumentHidden) { return; }
+
+    if (isDocumentHidden()) {
+      // suspend ticks
+      raf = cancelAnimationFrame(raf);
+    } else { // is back to active tab
+      // first adjust animations to consider the time that ticks were suspended
+      activeInstances.forEach(
+        function (instance) { return instance ._onDocumentVisibility(); }
+      );
+      engine();
+    }
+  }
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+  }
+
+  return play;
+})();
+
+function isDocumentHidden() {
+  return !!document && document.hidden;
+}
+
+// Public Instance
+
+function anime(params) {
+  if ( params === void 0 ) params = {};
+
+
+  var startTime = 0, lastTime = 0, now = 0;
+  var children, childrenLength = 0;
+  var resolve = null;
+
+  function makePromise(instance) {
+    var promise = window.Promise && new Promise(function (_resolve) { return resolve = _resolve; });
+    instance.finished = promise;
+    return promise;
+  }
+
+  var instance = createNewInstance(params);
+  var promise = makePromise(instance);
+
+  function toggleInstanceDirection() {
+    var direction = instance.direction;
+    if (direction !== 'alternate') {
+      instance.direction = direction !== 'normal' ? 'normal' : 'reverse';
+    }
+    instance.reversed = !instance.reversed;
+    children.forEach(function (child) { return child.reversed = instance.reversed; });
+  }
+
+  function adjustTime(time) {
+    return instance.reversed ? instance.duration - time : time;
+  }
+
+  function resetTime() {
+    startTime = 0;
+    lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);
+  }
+
+  function seekChild(time, child) {
+    if (child) { child.seek(time - child.timelineOffset); }
+  }
+
+  function syncInstanceChildren(time) {
+    if (!instance.reversePlayback) {
+      for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); }
+    } else {
+      for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); }
+    }
+  }
+
+  function setAnimationsProgress(insTime) {
+    var i = 0;
+    var animations = instance.animations;
+    var animationsLength = animations.length;
+    while (i < animationsLength) {
+      var anim = animations[i];
+      var animatable = anim.animatable;
+      var tweens = anim.tweens;
+      var tweenLength = tweens.length - 1;
+      var tween = tweens[tweenLength];
+      // Only check for keyframes if there is more than one tween
+      if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; }
+      var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
+      var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);
+      var strings = tween.to.strings;
+      var round = tween.round;
+      var numbers = [];
+      var toNumbersLength = tween.to.numbers.length;
+      var progress = (void 0);
+      for (var n = 0; n < toNumbersLength; n++) {
+        var value = (void 0);
+        var toNumber = tween.to.numbers[n];
+        var fromNumber = tween.from.numbers[n] || 0;
+        if (!tween.isPath) {
+          value = fromNumber + (eased * (toNumber - fromNumber));
+        } else {
+          value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG);
+        }
+        if (round) {
+          if (!(tween.isColor && n > 2)) {
+            value = Math.round(value * round) / round;
+          }
+        }
+        numbers.push(value);
+      }
+      // Manual Array.reduce for better performances
+      var stringsLength = strings.length;
+      if (!stringsLength) {
+        progress = numbers[0];
+      } else {
+        progress = strings[0];
+        for (var s = 0; s < stringsLength; s++) {
+          var a = strings[s];
+          var b = strings[s + 1];
+          var n$1 = numbers[s];
+          if (!isNaN(n$1)) {
+            if (!b) {
+              progress += n$1 + ' ';
+            } else {
+              progress += n$1 + b;
+            }
+          }
+        }
+      }
+      setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);
+      anim.currentValue = progress;
+      i++;
+    }
+  }
+
+  function setCallback(cb) {
+    if (instance[cb] && !instance.passThrough) { instance[cb](instance); }
+  }
+
+  function countIteration() {
+    if (instance.remaining && instance.remaining !== true) {
+      instance.remaining--;
+    }
+  }
+
+  function setInstanceProgress(engineTime) {
+    var insDuration = instance.duration;
+    var insDelay = instance.delay;
+    var insEndDelay = insDuration - instance.endDelay;
+    var insTime = adjustTime(engineTime);
+    instance.progress = minMax((insTime / insDuration) * 100, 0, 100);
+    instance.reversePlayback = insTime < instance.currentTime;
+    if (children) { syncInstanceChildren(insTime); }
+    if (!instance.began && instance.currentTime > 0) {
+      instance.began = true;
+      setCallback('begin');
+    }
+    if (!instance.loopBegan && instance.currentTime > 0) {
+      instance.loopBegan = true;
+      setCallback('loopBegin');
+    }
+    if (insTime <= insDelay && instance.currentTime !== 0) {
+      setAnimationsProgress(0);
+    }
+    if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) {
+      setAnimationsProgress(insDuration);
+    }
+    if (insTime > insDelay && insTime < insEndDelay) {
+      if (!instance.changeBegan) {
+        instance.changeBegan = true;
+        instance.changeCompleted = false;
+        setCallback('changeBegin');
+      }
+      setCallback('change');
+      setAnimationsProgress(insTime);
+    } else {
+      if (instance.changeBegan) {
+        instance.changeCompleted = true;
+        instance.changeBegan = false;
+        setCallback('changeComplete');
+      }
+    }
+    instance.currentTime = minMax(insTime, 0, insDuration);
+    if (instance.began) { setCallback('update'); }
+    if (engineTime >= insDuration) {
+      lastTime = 0;
+      countIteration();
+      if (!instance.remaining) {
+        instance.paused = true;
+        if (!instance.completed) {
+          instance.completed = true;
+          setCallback('loopComplete');
+          setCallback('complete');
+          if (!instance.passThrough && 'Promise' in window) {
+            resolve();
+            promise = makePromise(instance);
+          }
+        }
+      } else {
+        startTime = now;
+        setCallback('loopComplete');
+        instance.loopBegan = false;
+        if (instance.direction === 'alternate') {
+          toggleInstanceDirection();
+        }
+      }
+    }
+  }
+
+  instance.reset = function() {
+    var direction = instance.direction;
+    instance.passThrough = false;
+    instance.currentTime = 0;
+    instance.progress = 0;
+    instance.paused = true;
+    instance.began = false;
+    instance.loopBegan = false;
+    instance.changeBegan = false;
+    instance.completed = false;
+    instance.changeCompleted = false;
+    instance.reversePlayback = false;
+    instance.reversed = direction === 'reverse';
+    instance.remaining = instance.loop;
+    children = instance.children;
+    childrenLength = children.length;
+    for (var i = childrenLength; i--;) { instance.children[i].reset(); }
+    if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; }
+    setAnimationsProgress(instance.reversed ? instance.duration : 0);
+  };
+
+  // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF)
+  instance._onDocumentVisibility = resetTime;
+
+  // Set Value helper
+
+  instance.set = function(targets, properties) {
+    setTargetsValue(targets, properties);
+    return instance;
+  };
+
+  instance.tick = function(t) {
+    now = t;
+    if (!startTime) { startTime = now; }
+    setInstanceProgress((now + (lastTime - startTime)) * anime.speed);
+  };
+
+  instance.seek = function(time) {
+    setInstanceProgress(adjustTime(time));
+  };
+
+  instance.pause = function() {
+    instance.paused = true;
+    resetTime();
+  };
+
+  instance.play = function() {
+    if (!instance.paused) { return; }
+    if (instance.completed) { instance.reset(); }
+    instance.paused = false;
+    activeInstances.push(instance);
+    resetTime();
+    engine();
+  };
+
+  instance.reverse = function() {
+    toggleInstanceDirection();
+    instance.completed = instance.reversed ? false : true;
+    resetTime();
+  };
+
+  instance.restart = function() {
+    instance.reset();
+    instance.play();
+  };
+
+  instance.remove = function(targets) {
+    var targetsArray = parseTargets(targets);
+    removeTargetsFromInstance(targetsArray, instance);
+  };
+
+  instance.reset();
+
+  if (instance.autoplay) { instance.play(); }
+
+  return instance;
+
+}
+
+// Remove targets from animation
+
+function removeTargetsFromAnimations(targetsArray, animations) {
+  for (var a = animations.length; a--;) {
+    if (arrayContains(targetsArray, animations[a].animatable.target)) {
+      animations.splice(a, 1);
+    }
+  }
+}
+
+function removeTargetsFromInstance(targetsArray, instance) {
+  var animations = instance.animations;
+  var children = instance.children;
+  removeTargetsFromAnimations(targetsArray, animations);
+  for (var c = children.length; c--;) {
+    var child = children[c];
+    var childAnimations = child.animations;
+    removeTargetsFromAnimations(targetsArray, childAnimations);
+    if (!childAnimations.length && !child.children.length) { children.splice(c, 1); }
+  }
+  if (!animations.length && !children.length) { instance.pause(); }
+}
+
+function removeTargetsFromActiveInstances(targets) {
+  var targetsArray = parseTargets(targets);
+  for (var i = activeInstances.length; i--;) {
+    var instance = activeInstances[i];
+    removeTargetsFromInstance(targetsArray, instance);
+  }
+}
+
+// Stagger helpers
+
+function stagger(val, params) {
+  if ( params === void 0 ) params = {};
+
+  var direction = params.direction || 'normal';
+  var easing = params.easing ? parseEasings(params.easing) : null;
+  var grid = params.grid;
+  var axis = params.axis;
+  var fromIndex = params.from || 0;
+  var fromFirst = fromIndex === 'first';
+  var fromCenter = fromIndex === 'center';
+  var fromLast = fromIndex === 'last';
+  var isRange = is.arr(val);
+  var val1 = isRange ? parseFloat(val[0]) : parseFloat(val);
+  var val2 = isRange ? parseFloat(val[1]) : 0;
+  var unit = getUnit(isRange ? val[1] : val) || 0;
+  var start = params.start || 0 + (isRange ? val1 : 0);
+  var values = [];
+  var maxValue = 0;
+  return function (el, i, t) {
+    if (fromFirst) { fromIndex = 0; }
+    if (fromCenter) { fromIndex = (t - 1) / 2; }
+    if (fromLast) { fromIndex = t - 1; }
+    if (!values.length) {
+      for (var index = 0; index < t; index++) {
+        if (!grid) {
+          values.push(Math.abs(fromIndex - index));
+        } else {
+          var fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2;
+          var fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2;
+          var toX = index%grid[0];
+          var toY = Math.floor(index/grid[0]);
+          var distanceX = fromX - toX;
+          var distanceY = fromY - toY;
+          var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+          if (axis === 'x') { value = -distanceX; }
+          if (axis === 'y') { value = -distanceY; }
+          values.push(value);
+        }
+        maxValue = Math.max.apply(Math, values);
+      }
+      if (easing) { values = values.map(function (val) { return easing(val / maxValue) * maxValue; }); }
+      if (direction === 'reverse') { values = values.map(function (val) { return axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val); }); }
+    }
+    var spacing = isRange ? (val2 - val1) / maxValue : val1;
+    return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit;
+  }
+}
+
+// Timeline
+
+function timeline(params) {
+  if ( params === void 0 ) params = {};
+
+  var tl = anime(params);
+  tl.duration = 0;
+  tl.add = function(instanceParams, timelineOffset) {
+    var tlIndex = activeInstances.indexOf(tl);
+    var children = tl.children;
+    if (tlIndex > -1) { activeInstances.splice(tlIndex, 1); }
+    function passThrough(ins) { ins.passThrough = true; }
+    for (var i = 0; i < children.length; i++) { passThrough(children[i]); }
+    var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params));
+    insParams.targets = insParams.targets || params.targets;
+    var tlDuration = tl.duration;
+    insParams.autoplay = false;
+    insParams.direction = tl.direction;
+    insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration);
+    passThrough(tl);
+    tl.seek(insParams.timelineOffset);
+    var ins = anime(insParams);
+    passThrough(ins);
+    children.push(ins);
+    var timings = getInstanceTimings(children, params);
+    tl.delay = timings.delay;
+    tl.endDelay = timings.endDelay;
+    tl.duration = timings.duration;
+    tl.seek(0);
+    tl.reset();
+    if (tl.autoplay) { tl.play(); }
+    return tl;
+  };
+  return tl;
+}
+
+anime.version = '3.2.1';
+anime.speed = 1;
+// TODO:#review: naming, documentation
+anime.suspendWhenDocumentHidden = true;
+anime.running = activeInstances;
+anime.remove = removeTargetsFromActiveInstances;
+anime.get = getOriginalTargetValue;
+anime.set = setTargetsValue;
+anime.convertPx = convertPxToUnit;
+anime.path = getPath;
+anime.setDashoffset = setDashoffset;
+anime.stagger = stagger;
+anime.timeline = timeline;
+anime.easing = parseEasings;
+anime.penner = penner;
+anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; };
+
+module.exports = anime;
diff --git a/scripts/main.js b/scripts/main.js
index a9cffb9..0fa4c6a 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -6,27 +6,48 @@
 //############################################# -- Intro Animations
 
 const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
-const myImageBlock = document.querySelector(".benjamin-image-block");
+const myImageBlock = document.querySelector(".benjamin-image-block-wrapper");
 const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
 const mainTextBlock = document.querySelector(".main-text-block");
 const mainCTA = document.querySelector(".main-cta-button");
-const allHeaderElements = document.querySelectorAll("header *");
-const mountains = document.querySelectorAll("#mountains");
-const clouds = document.querySelectorAll("#clouds");
+const allHeaderElements = document.querySelectorAll("header *:not(header > div)");
+const mountains = document.querySelector("#mountains");
+const clouds = document.querySelector("#clouds");
 const footerController = document.querySelector(".contact-section-controller");
 const header = document.querySelector("header");
+const heroTxtGraphic = document.querySelector(".hero-text-section-graphic");
 
 
 function intro() {
 
-    anime({
-        targets: heroTextSection,
-        width: [0, "50%"],
-        translateX: [200, 0],
-        easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
-        duration: 1500,
-        delay: 1000,
-    });
+    if (window.innerWidth > 800) {
+        anime({
+            targets: heroTextSection,
+            width: [0, "50%"],
+            translateX: [200, 0],
+            easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
+            duration: 1500,
+            delay: 1000,
+        });
+    } else if (window.innerWidth < 801 && window.innerWidth > 600) {
+        anime({
+            targets: heroTextSection,
+            width: [0, "60%"],
+            translateX: [200, 0],
+            easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
+            duration: 1500,
+            delay: 1000,
+        });
+    } else if (window.innerWidth < 601) {
+        anime({
+            targets: heroTextSection,
+            width: [0, "100%"],
+            translateX: [500, 0],
+            easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
+            duration: 1500,
+            delay: 0,
+        });
+    }
 
     anime({
         targets: allHeaderElements,
@@ -41,6 +62,7 @@ function intro() {
     anime({
         targets: myBigTextBlock,
         translateY: [100, 0],
+        translateZ: 50,
         opacity: [0, 1],
         easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
         duration: 1200,
@@ -50,20 +72,34 @@ function intro() {
     anime({
         targets: myImageBlock,
         translateY: [100, 0],
-        opacity: [0, 0.8],
+        opacity: [0, 1],
         easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
         duration: 1500,
         delay: 2200,
     });
 
-    anime({
-        targets: mainTextBlock,
-        translateX: [-50, 0],
-        opacity: [0, 1],
-        easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
-        duration: 1200,
-        delay: 2500,
-    });
+    if (window.innerWidth < 601) {
+        anime({
+            targets: mainTextBlock,
+            translateX: [-50, 0],
+            translateZ: [30, 0],
+            opacity: [0, 1],
+            easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+            duration: 1200,
+            delay: 2500,
+        });
+    } else {
+        anime({
+            targets: mainTextBlock,
+            translateX: [-50, 0],
+            translateZ: [30, 15],
+            opacity: [0, 1],
+            easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
+            duration: 1200,
+            delay: 2500,
+        });
+    }
+
 
     anime({
         targets: mainCTA,
@@ -74,14 +110,25 @@ function intro() {
         delay: 2600,
     });
 
-    anime({
-        targets: mountains,
-        translateY: [200, 0],
-        opacity: [0, 1],
-        easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
-        duration: 1500,
-        delay: 1000,
-    });
+    if (window.innerWidth > 600) {
+
+        anime({
+            targets: mountains,
+            translateY: [200, 0],
+            opacity: [0, 1],
+            easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
+            duration: 1500,
+            delay: 1000,
+        })
+
+        anime({
+            targets: mountains,
+            left: [0, -50],
+            easing: "easeOutQuad",
+            duration: 800,
+            delay: 1600,
+        });
+    }
 
     anime({
         targets: clouds,
@@ -97,12 +144,23 @@ function intro() {
 
 function introInit() {
 
-    anime({
-        targets: heroTextSection,
-        width: [0],
-        translateX: 200,
-        duration: 0
-    });
+    if (window.innerWidth < 601) {
+        anime({
+            targets: heroTextSection,
+            width: [0],
+            translateX: 500,
+            duration: 0
+        });
+    } else {
+        anime({
+            targets: heroTextSection,
+            width: [0],
+            translateX: 200,
+            duration: 0
+        });
+    }
+
+
 
     anime({
         targets: allHeaderElements,
@@ -165,33 +223,57 @@ var headerObserver = new IntersectionObserver(changeHeader, windowRect);
 function changeHeader(entry) {
 
     if (entry[0].isIntersecting) {
-        header.className = "none";
-        anime({
-            targets: "header img",
-            width: 40,
-            height: 100,
-            top: 0,
-            duration: 400,
-            easing: "easeOutCubic",
-        });
 
-        anime({
-            targets: "header > a > div",
-            translateX: 0,
-            opacity: 1,
-            duration: 1000,
-        });
+        if (window.innerWidth > 800) {
+            document.querySelectorAll(".nav-link").forEach(item => {
+
+                if (entry[0].target.className == "contact-section-controller") { item.style.color = "white"; }
+            });
+
+            header.className = "none";
+
+            anime({
+                targets: "header > a > img",
+                width: 40,
+                height: 100,
+                top: 0,
+                duration: 400,
+                easing: "easeOutCubic",
+            });
+
+
+            anime({
+                targets: "header > a > div",
+                translateX: 0,
+                opacity: 1,
+                duration: 1000,
+            });
+        }
 
     } else {
-        header.classList.add("scrolled");
-        anime({
-            targets: "header img",
-            width: 60,
-            height: 130,
-            top: 20,
-            duration: 400,
-            easing: "easeOutCubic",
-        });
+
+        if (window.innerWidth > 800) {
+
+            // if (entry[0].isIntersecting) {
+
+            document.querySelectorAll(".nav-link").forEach(item => {
+
+                if (entry[0].target.className == "contact-section-controller") { item.style.color = ""; }
+            });
+
+
+            header.classList.add("scrolled");
+
+            anime({
+                targets: "header > a > img",
+                width: 60,
+                height: 130,
+                top: 20,
+                duration: 400,
+                easing: "easeOutCubic",
+            });
+            // }
+        }
 
         anime({
             targets: "header > a > div",
@@ -207,13 +289,19 @@ function changeHeader(entry) {
 
 //############################################# -- Window Load
 
-setTimeout(() => {
-    headerObserver.observe(headerController);
-}, 3000);
+
 
 
 window.addEventListener("load", () => {
     setTimeout(() => { intro(); }, 1000);
+    setTimeout(() => { headerObserver.observe(headerController); }, 3000);
+
+    if (window.innerWidth > 800) {
+        setTimeout(() => {
+            window.addEventListener("mousemove", parralaxMouse);
+            // footerHeaderFn();
+        }, 4000);
+    }
 
 });
 
@@ -228,6 +316,8 @@ window.addEventListener("load", () => {
 const sections = document.querySelectorAll(".scroll-into-view");
 //var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
 
+let footerHeaderFn = () => { headerObserver.observe(footerController); };
+
 var windowRect2 = {
     rootMargin: "0px 0px -200px 0px",
 };
@@ -238,16 +328,13 @@ function sectionsObserverFn(entries) {
 
     entries.forEach(entry => {
         if (entry.isIntersecting) {
+            // console.log(entry.target);
             entry.target.classList.add("scrolled-into-view");
-            headerObserver.observe(footerController);
 
-            //            anime({
-            //                targets: contents[entry.target.firstElementChild],
-            //                width: [0, "50%"],
-            //                easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
-            //                opacity: [0, 1],
-            //                duration: 1200,
-            //            });
+            if (entry.target.id == "footer-right-section" && entries[2]) { return; }
+
+
+            if (window.innerWidth > 800) { footerHeaderFn(); }
         }
     });
 
@@ -264,14 +351,29 @@ sections.forEach(item => {
 //############################################# -- Content intersection Observer
 
 const contents = document.querySelectorAll(".scroll-into-view-content");
+const contentsIO = new IntersectionObserver(contentsObserverFn, { rootMargin: "0px 0px -100px 0px" });
 
-const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
+const contentsAlt = document.querySelectorAll(".scroll-into-view-content-2");
+const contentsIOAlt = new IntersectionObserver(contentsObserverFn, { rootMargin: "0px" });
 
 function contentsObserverFn(entries) {
 
     entries.forEach(entry => {
         if (entry.isIntersecting) {
-            entry.target.classList.add("scrolled-into-view-content");
+            entry.target.animate([
+                {
+                    transform: "none",
+                    opacity: 1,
+                }
+            ], {
+                duration: 1300,
+                easing: "cubic-bezier(0.1, 0.63, 0.355, 1)",
+                fill: "forwards",
+                delay: (entry.target.dataset.delay),
+            });
+
+            contentsIO.unobserve(entry.target);
+            contentsIOAlt.unobserve(entry.target);
         }
     });
 
@@ -284,39 +386,10 @@ contents.forEach(item => {
 });
 
 
-
-
-const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
-const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
-const myToolsParagraph = document.querySelector(".my-specialties-section p");
-
-let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
-
-const myToolsIconsAnimated = anime({
-    targets: myToolsIcons,
-    translateX: [-20, 0],
-    translateY: [-20, 0],
-    //        rotateY: [50, 0],
-    opacity: [0, 1],
-    easing: "easeOutQuad",
-    duration: 1200,
-    delay: anime.stagger(150, { start: 200 }),
-    loop: false,
-    autoplay: false,
-    complete: function () { myToolsIconsAnimated.remove(myToolsIcons); },
+contentsAlt.forEach(item => {
+    contentsIOAlt.observe(item);
 });
 
-function myToolsFn(entries) {
-
-    if (entries[0].isIntersecting) {
-        myToolsIconsAnimated.play();
-    }
-
-}
-
-
-myToolsIO.observe(myToolsParagraph);
-
 
 
 
@@ -328,13 +401,13 @@ myToolsIO.observe(myToolsParagraph);
 //############################################# -- Scroll Navigations
 
 anime({
-    targets: ".hero-scroll-down-block",
+    targets: ".hero-text-section-graphic img",
     translateY: [-5, 5],
     easing: "easeInOutQuad",
     duration: 1000,
     loop: true,
     direction: "alternate",
-})
+});
 
 const navSections = document.querySelectorAll("section");
 const myWorkNavLink = document.querySelector("#my-work-link");
@@ -348,16 +421,10 @@ navSections.forEach(item => { anchorLinksObserver.observe(item); });
 
 function anchorLinksFn(entries) {
 
-    // console.log(entries[3]);
-
     if (entries[3]) { return; }
 
     entries.forEach(entry => {
 
-        console.log(entry.target);
-
-        // entry.target.className = "hero-section";
-
         myWorkNavLink.classList.remove("active-anchor");
         aboutMeNavLink.classList.remove("active-anchor");
         resumeLink.classList.remove("active-anchor");
@@ -394,32 +461,211 @@ function anchorLinksFn(entries) {
 
 
 
-//############################################# -- Contact Form
+
+//############################################# -- Mousemove interactions
+
+
+function parralaxMouse(event) {
+
+    let xPos = (event.clientX / window.innerWidth) - 0.5;
+    let yPos = (event.clientY / window.innerHeight) - 0.5;
+
+    // mountains.style.transition = "all .7s ease";
+
+    clouds.animate([{
+        transform: `translateX(${xPos * -10}px) translateY(${yPos * -10}px)`,
+    }], {
+        easing: "ease",
+        fill: "forwards",
+    });
+
+    mountains.animate([{
+        transform: `translateX(${xPos * -100}px) translateY(${yPos * -20}px)`,
+    }], {
+        easing: "ease",
+        fill: "forwards",
+        direction: "normal"
+    });
+
+    myImageBlock.animate([{
+        transform: `translateX(${xPos * -30}px) translateY(${yPos * -10}px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,
+    }], {
+        easing: "ease",
+        fill: "forwards",
+    });
+
+    mainTextBlock.animate([{
+        transform: `translateZ(15px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,
+    }], {
+        easing: "ease-out",
+        fill: "forwards",
+    });
+
+    heroTxtGraphic.animate([{
+        transform: `translateX(${xPos * -5}px) translateY(${yPos * -5}px) translateZ(10px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,
+    }], {
+        easing: "ease",
+        fill: "forwards",
+    });
+
+    myBigTextBlock.animate([{
+        transform: `translateX(${xPos * -40}px) translateY(${yPos * -20}px) translateZ(50px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,
+    }], {
+        easing: "ease",
+        fill: "forwards",
+    });
+
+}
 
 
 
-//var form = document.getElementById("my-form");
-//    
-//    async function handleSubmit(event) {
-//      event.preventDefault();
-//      var status = document.getElementById("my-form-status");
-//      var data = new FormData(event.target);
-//      fetch(event.target.action, {
-//        method: form.method,
-//        body: data,
-//        headers: {
-//            'Accept': 'application/json'
-//        }
-//      }).then(response => {
-//        status.innerHTML = "Thanks for your submission!";
-//        form.reset()
-//      }).catch(error => {
-//        status.innerHTML = "Oops! There was a problem submitting your form"
-//      });
-//    }
-//    form.addEventListener("submit", handleSubmit)
-
-
+const uiuxDesignerLinks = document.querySelectorAll(".main-hero-text a");
+const myImage = document.querySelector(".benjamin-image-block");
+const myImageOverlay = document.querySelector(".benjamin-image-block-overlay");
+const serviceDisplay = document.querySelector(".service-display-block");
+
+uiuxDesignerLinks.forEach(item => {
+
+    item.addEventListener("mouseover", function (event) {
+
+        // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
+        myImage.style.width = "23vw";
+
+        if (event.target.className == "uiux-designer-link") {
+
+            myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)";
+
+        } else if (event.target.className == "web-designer-link") {
+
+            myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)";
+            // serviceDisplay.style.width = "300px";
+            // serviceDisplay.style.height = "250px";
+
+        } else if (event.target.className == "frontend-designer-link") {
+
+            myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)";
+            // serviceDisplay.style.width = "250px";
+            // serviceDisplay.style.height = "200px";
+
+        } else if (event.target.className == "graphic-motion-designer-link") {
+
+            myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)";
+            // serviceDisplay.style.width = "200px";
+            // serviceDisplay.style.height = "200px";
+
+        }
+
+    });
+
+});
+
+uiuxDesignerLinks.forEach(item => {
+
+
+    item.addEventListener("mouseout", function () {
+
+        myImage.style.transform = "none";
+        myImageOverlay.style.backgroundColor = "transparent";
+        myImage.style.width = "100%";
+        // serviceDisplay.style.opacity = "0";
+        // serviceDisplay.style.transform = "none";
+
+    });
+
+});
+
+
+
+
+
+
+
+
+
+//############################################# -- Mobile hamburger interactrions
+
+const hamburgerButton = document.querySelector(".hamburger-button");
+const mobileNavWrapper = document.querySelector("header > div:nth-of-type(1)");
+let a = 0;
+
+hamburgerButton.addEventListener("click", () => {
+
+    if (a == 0) {
+
+        mobileNavWrapper.animate([
+            {
+                opacity: 0,
+                height: "0px",
+                pointerEvents: "none",
+                transform: "translateZ(50px) translateY(-50px)"
+            },
+            {
+                opacity: 1,
+                height: "450px",
+                pointerEvents: "visible",
+                transform: "translateZ(0px) translateY(0px)"
+            }
+        ], {
+            fill: "both",
+            duration: 600,
+            easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
+        });
+    } else {
+        mobileNavWrapper.animate([
+            {
+                opacity: 1,
+                height: "450px",
+                pointerEvents: "visible",
+                transform: "translateZ(0px) translateY(0px)"
+
+            },
+            {
+                opacity: 0,
+                height: "0px",
+                pointerEvents: "none",
+                transform: "translateZ(50px) translateY(-50px)"
+            }
+        ], {
+            fill: "both",
+            duration: 600,
+            easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
+        });
+
+        a = -1;
+    }
+
+    a++;
+
+    // mobileNavWrapper.style.opacity = "1"
+});
+
+
+hamburgerButton.addEventListener("blur", () => {
+
+    mobileNavWrapper.animate([
+        {
+            opacity: 1,
+            height: "450px",
+            pointerEvents: "visible",
+            transform: "translateZ(0px) translateY(0px)"
+
+        },
+        {
+            opacity: 0,
+            height: "0px",
+            pointerEvents: "none",
+            transform: "translateZ(50px) translateY(-50px)"
+        }
+    ], {
+        fill: "both",
+        duration: 600,
+        easing: "cubic-bezier( 0.1, 0.63, 0.355, 1 )"
+    });
+
+    a = 0;
+
+    // mobileNavWrapper.style.opacity = "1"
+});
 
 
 
diff --git a/scripts/main.min.js b/scripts/main.min.js
new file mode 100644
index 0000000..e60e6dd
--- /dev/null
+++ b/scripts/main.min.js
@@ -0,0 +1,17 @@
+const heroTextSection=document.querySelector(".hero-section > div:nth-child(2)");const myImageBlock=document.querySelector(".benjamin-image-block-wrapper");const myBigTextBlock=document.querySelector(".benjamin-big-text-block");const mainTextBlock=document.querySelector(".main-text-block");const mainCTA=document.querySelector(".main-cta-button");const allHeaderElements=document.querySelectorAll("header *:not(header > div)");const mountains=document.querySelector("#mountains");const clouds=document.querySelector("#clouds");const footerController=document.querySelector(".contact-section-controller");const header=document.querySelector("header");const heroTxtGraphic=document.querySelector(".hero-text-section-graphic");function intro(){if(window.innerWidth>800){anime({targets:heroTextSection,width:[0,"50%"],translateX:[200,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:1000,})}else if(window.innerWidth<801&&window.innerWidth>600){anime({targets:heroTextSection,width:[0,"60%"],translateX:[200,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:1000,})}else if(window.innerWidth<601){anime({targets:heroTextSection,width:[0,"100%"],translateX:[500,0],easing:"cubicBezier( 0.93, 0, 0.09, 1 )",duration:1500,delay:0,})}
+anime({targets:allHeaderElements,translateX:[-20,0],opacity:[0,1],easing:"easeOutQuad",duration:800,delay:anime.stagger(100,{start:1000}),});anime({targets:myBigTextBlock,translateY:[100,0],translateZ:50,opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2000,});anime({targets:myImageBlock,translateY:[100,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1500,delay:2200,});if(window.innerWidth<601){anime({targets:mainTextBlock,translateX:[-50,0],translateZ:[30,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2500,})}else{anime({targets:mainTextBlock,translateX:[-50,0],translateZ:[30,15],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2500,})}
+anime({targets:mainCTA,translateX:[-50,0],opacity:[0,1],easing:"cubicBezier( 0.1, 0.63, 0.355, 1 )",duration:1200,delay:2600,});if(window.innerWidth>600){anime({targets:mountains,translateY:[200,0],opacity:[0,1],easing:"cubicBezier(0.1, 0.63, 0.355, 1)",duration:1500,delay:1000,})
+anime({targets:mountains,left:[0,-50],easing:"easeOutQuad",duration:800,delay:1600,})}
+anime({targets:clouds,opacity:[0.2,1],easing:"easeOutQuad",duration:1200,delay:800,})}
+function introInit(){if(window.innerWidth<601){anime({targets:heroTextSection,width:[0],translateX:500,duration:0})}else{anime({targets:heroTextSection,width:[0],translateX:200,duration:0})}
+anime({targets:allHeaderElements,translateX:[-20],opacity:[0],duration:0});anime({targets:myBigTextBlock,translateY:[100],opacity:[0],duration:0});anime({targets:myImageBlock,translateY:[100],opacity:[0],duration:0});anime({targets:mainTextBlock,translateX:[-50],opacity:[0],duration:0});anime({targets:mainCTA,translateX:[-50],opacity:[0],duration:0});anime({targets:mountains,opacity:0,duration:0})}
+introInit();var headerController=document.querySelector("#header-controller");var windowRect={rootMargin:"0px",};var headerObserver=new IntersectionObserver(changeHeader,windowRect);function changeHeader(entry){if(entry[0].isIntersecting){if(window.innerWidth>800){document.querySelectorAll(".nav-link").forEach(item=>{if(entry[0].target.className=="contact-section-controller"){item.style.color="white"}});header.className="none";anime({targets:"header > a > img",width:40,height:100,top:0,duration:400,easing:"easeOutCubic",});anime({targets:"header > a > div",translateX:0,opacity:1,duration:1000,})}}else{if(window.innerWidth>800){document.querySelectorAll(".nav-link").forEach(item=>{if(entry[0].target.className=="contact-section-controller"){item.style.color=""}});header.classList.add("scrolled");anime({targets:"header > a > img",width:60,height:130,top:20,duration:400,easing:"easeOutCubic",})}
+anime({targets:"header > a > div",translateX:-50,opacity:0,duration:1000,})}}
+window.addEventListener("load",()=>{setTimeout(()=>{intro()},1000);setTimeout(()=>{headerObserver.observe(headerController)},3000);if(window.innerWidth>800){setTimeout(()=>{window.addEventListener("mousemove",parralaxMouse)},4000)}});const sections=document.querySelectorAll(".scroll-into-view");let footerHeaderFn=()=>{headerObserver.observe(footerController)};var windowRect2={rootMargin:"0px 0px -200px 0px",};var sectionsIO=new IntersectionObserver(sectionsObserverFn,windowRect2);function sectionsObserverFn(entries){entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add("scrolled-into-view");if(entry.target.id=="footer-right-section"&&entries[2]){return}
+if(window.innerWidth>800){footerHeaderFn()}}})}
+sections.forEach(item=>{sectionsIO.observe(item)});const contents=document.querySelectorAll(".scroll-into-view-content");const contentsIO=new IntersectionObserver(contentsObserverFn,{rootMargin:"0px 0px -100px 0px"});const contentsAlt=document.querySelectorAll(".scroll-into-view-content-2");const contentsIOAlt=new IntersectionObserver(contentsObserverFn,{rootMargin:"0px"});function contentsObserverFn(entries){entries.forEach(entry=>{if(entry.isIntersecting){entry.target.animate([{transform:"none",opacity:1,}],{duration:1300,easing:"cubic-bezier(0.1, 0.63, 0.355, 1)",fill:"forwards",delay:(entry.target.dataset.delay),});contentsIO.unobserve(entry.target);contentsIOAlt.unobserve(entry.target)}})}
+contents.forEach(item=>{contentsIO.observe(item)});contentsAlt.forEach(item=>{contentsIOAlt.observe(item)});anime({targets:".hero-text-section-graphic img",translateY:[-5,5],easing:"easeInOutQuad",duration:1000,loop:!0,direction:"alternate",});const navSections=document.querySelectorAll("section");const myWorkNavLink=document.querySelector("#my-work-link");const aboutMeNavLink=document.querySelector("#about-me-link");const resumeLink=document.querySelector("#resume-link");const contactMeNavLink=document.querySelector("#contact-me-link");const anchorLinksObserver=new IntersectionObserver(anchorLinksFn,{rootMargin:"0px",threshold:0.75});navSections.forEach(item=>{anchorLinksObserver.observe(item)});function anchorLinksFn(entries){if(entries[3]){return}
+entries.forEach(entry=>{myWorkNavLink.classList.remove("active-anchor");aboutMeNavLink.classList.remove("active-anchor");resumeLink.classList.remove("active-anchor");contactMeNavLink.classList.remove("active-anchor");if(entry.target.className=="hero-section"){return}else if(entry.target.className=="my-work-section"){myWorkNavLink.classList.add("active-anchor")}else if(entry.target.className=="about-me-section"){aboutMeNavLink.classList.add("active-anchor")}else if(entry.target.className=="my-specialties-section"){resumeLink.classList.add("active-anchor")}else if(entry.target.className=="contact-section"){contactMeNavLink.classList.add("active-anchor")}else{myWorkNavLink.classList.remove("active-anchor");aboutMeNavLink.classList.remove("active-anchor");resumeLink.classList.remove("active-anchor");contactMeNavLink.classList.remove("active-anchor")}})}
+function parralaxMouse(event){let xPos=(event.clientX/window.innerWidth)-0.5;let yPos=(event.clientY/window.innerHeight)-0.5;clouds.animate([{transform:`translateX(${xPos * -10}px) translateY(${yPos * -10}px)`,}],{easing:"ease",fill:"forwards",});mountains.animate([{transform:`translateX(${xPos * -100}px) translateY(${yPos * -20}px)`,}],{easing:"ease",fill:"forwards",direction:"normal"});myImageBlock.animate([{transform:`translateX(${xPos * -30}px) translateY(${yPos * -10}px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,}],{easing:"ease",fill:"forwards",});mainTextBlock.animate([{transform:`translateZ(15px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,}],{easing:"ease-out",fill:"forwards",});heroTxtGraphic.animate([{transform:`translateX(${xPos * -5}px) translateY(${yPos * -5}px) translateZ(10px) rotateX(${yPos * 2}deg) rotateY(${xPos * -2}deg)`,}],{easing:"ease",fill:"forwards",});myBigTextBlock.animate([{transform:`translateX(${xPos * -40}px) translateY(${yPos * -20}px) translateZ(50px) rotateX(${yPos * 4}deg) rotateY(${xPos * -3}deg)`,}],{easing:"ease",fill:"forwards",})}
+const uiuxDesignerLinks=document.querySelectorAll(".main-hero-text a");const myImage=document.querySelector(".benjamin-image-block");const myImageOverlay=document.querySelector(".benjamin-image-block-overlay");const serviceDisplay=document.querySelector(".service-display-block");uiuxDesignerLinks.forEach(item=>{item.addEventListener("mouseover",function(event){myImage.style.width="23vw";if(event.target.className=="uiux-designer-link"){myImageOverlay.style.backgroundColor="rgba(237,125,113,0.8)"}else if(event.target.className=="web-designer-link"){myImageOverlay.style.backgroundColor="rgba(117,240,230,0.8)"}else if(event.target.className=="frontend-designer-link"){myImageOverlay.style.backgroundColor="rgba(116,123,239,0.8)"}else if(event.target.className=="graphic-motion-designer-link"){myImageOverlay.style.backgroundColor="rgba(28,55,102,0.8)"}})});uiuxDesignerLinks.forEach(item=>{item.addEventListener("mouseout",function(){myImage.style.transform="none";myImageOverlay.style.backgroundColor="transparent";myImage.style.width="100%"})});const hamburgerButton=document.querySelector(".hamburger-button");const mobileNavWrapper=document.querySelector("header > div:nth-of-type(1)");let a=0;hamburgerButton.addEventListener("click",()=>{if(a==0){mobileNavWrapper.animate([{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"},{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"})}else{mobileNavWrapper.animate([{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"},{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"});a=-1}
+a++});hamburgerButton.addEventListener("blur",()=>{mobileNavWrapper.animate([{opacity:1,height:"450px",pointerEvents:"visible",transform:"translateZ(0px) translateY(0px)"},{opacity:0,height:"0px",pointerEvents:"none",transform:"translateZ(50px) translateY(-50px)"}],{fill:"both",duration:600,easing:"cubic-bezier( 0.1, 0.63, 0.355, 1 )"});a=0})
\ No newline at end of file