feat: create the base blue banner

src/components/Banner2.vue

@@ -0,0 +1,203 @@
+<template>
+	<div id='banner2'>
+
+		<div class='content'>
+			<h2>Hello, I'm a <u>freelance developer</u></h2>
+			<br>
+			<br>
+			<h3>
+				I make your ideas into sites and
+				applications that work and <u>thrive</u>
+				out of the box.
+			</h3>
+		</div>
+
+		<div class='images'>
+			<div class='circle top'></div>
+			<div class='circle bottom'></div>
+			<div class='laptop'></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { Component, Vue } from 'vue-property-decorator';
+	import BannerModel from '../model/banner';
+
+	@Component({})
+	export default class Banner2 extends Vue {
+		private model: any = BannerModel;
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	@import '../global.scss';
+
+	$banner-size: 100vh;
+	$bg-color:    #0e0e10;
+
+	// MEDIA QUERIES
+	// optimize vertical space
+	$mq-vert: 590px;
+
+	#banner2 {
+		flex: #{$banner-size * 0.999} 0 0;
+
+		display: flex;
+		position: relative;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+		flex-flow: row nowrap;
+		justify-content: flex-start;
+		align-items: center;
+
+		color: #fff;
+		font-size: 1rem;
+		font-family: 'Source Sans Pro';
+		font-weight: 400;
+		white-space: nowrap;
+
+		background: $bg-color;
+	}
+
+	.content {
+		display: block;
+		position: relative;
+			width: 37%;
+
+		white-space: normal;
+
+		margin: 0 10rem;
+		margin-bottom: 6rem;
+
+		h2, h3 {
+			display: inline;
+		}
+		u {
+			display: inline-block;
+			white-space: nowrap;
+		}
+
+		h2 {
+			font-size: 5em;
+			font-weight: 400;
+		}
+		h3 {
+			font-size: 3em;
+			font-weight: 400;
+		}
+
+		u {
+			position: relative;
+			font-weight: 800;
+			text-decoration: none;
+			z-index: 0;
+
+			@keyframes grow-right {
+				from{ width: 0%;   }
+				to{   width: 102%; }
+			}
+
+			&:before {
+				content: '';
+
+				display: block;
+				position: absolute;
+					top: 70%;
+					left: -1%;
+					width: 0%;
+					height: .2em;
+
+				background: #5768f8;
+
+				z-index: -1;
+
+				animation: .2s .5s ease-in-out grow-right forwards;
+			}
+		}
+
+		h3 u:before {
+			animation-delay: 1s;
+		}
+
+	}
+
+	.images {
+		flex: auto 1 1;
+
+		position: relative;
+			width: 50vw;
+			height: 50vh;
+
+		background: radial-gradient(rgba(87, 104, 248, 0.5) 0%, transparent 70%);
+	}
+
+	@keyframes scale-up {
+		0%   { transform: scale(0); }
+		100% { transform: scale(1); }
+	}
+
+	// gradient circles around the leftmost center point
+	$focus-point-x: 50%;
+	$focus-point-y: 50%;
+
+	.circle,
+	.circle.bottom {
+		display: block;
+		position: absolute;
+			top:  calc( #{$focus-point-y} - 5vw );
+			left: calc( #{$focus-point-x} - 5vw );
+			width: 50vw;
+			height: 50vw;
+
+		border-radius: 50% / 50%;
+
+		background: linear-gradient(90deg, #6063f8, #6431f5);
+
+		transform: scale(0);
+		animation: .2s 1.7s ease-in-out scale-up forwards;
+	}
+
+	.circle.top {
+		top: calc( #{$focus-point-y} - 20vw );
+		left: calc( #{$focus-point-x} - 20vw );
+		width: 20vw;
+		height: 20vw;
+
+		background: linear-gradient(90deg, #3d4ba3, #57f2f8);
+
+		animation-delay: 1s;
+	}
+
+	.laptop {
+		position: absolute;
+			top: $focus-point-y;
+			left: $focus-point-x;
+			width: 40vw;
+			height: 40vw;
+
+		transform: translateX(-50%) translateY(-50%);
+
+		background: url('../assets/laptop.svg');
+		background-size: contain;
+		background-repeat: no-repeat;
+	}
+
+	// not enough horizontal space
+	@media screen and (max-width: 1000px){
+		#banner2 {
+			font-size: 1vw;
+		}
+	}
+	// not enough vertical space
+	@media screen and (max-height: 615px){
+		#banner2 {
+			font-size: .8vw;
+		}
+	}
+
+</style>

src/components/Home.vue

@@ -50,10 +50,12 @@
 	import { Component, Vue } from 'vue-property-decorator';
 	import { Themes, Theme } from '@/model/themes';
 	import Banner1 from '@/components/Banner1.vue';
+	import Banner2 from '@/components/Banner2.vue';
 
 	@Component({
 		components: {
 			Banner1,
+			Banner2,
 		},
 	})
 	export default class Home extends Vue {