Initial commit, "Coming soon" page

7 years ago · 9722bf3ee9
4 changed files with 5252 additions and 0 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,37 @@
+{
+	"name": "mkr.pw",
+	"version": "0.1.0",
+	"description": "MKR's personal website",
+	"main": "index.js",
+	"scripts": {
+		"dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --colors",
+		"build": "node ./node_modules/webpack/bin/webpack.js -p",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/MKRhere/mkr.git"
+	},
+	"keywords": [
+		"personal",
+		"website",
+		"portfolio"
+	],
+	"author": "Muthu Kumar",
+	"license": "CC-BY-NC-ND-4.0",
+	"bugs": {
+		"url": "https://github.com/MKRhere/mkr/issues"
+	},
+	"homepage": "https://github.com/MKRhere/mkr#readme",
+	"devDependencies": {
+		"@babel/core": "^7.0.0-beta.34",
+		"@babel/preset-env": "^7.0.0-beta.34",
+		"babel-cli": "^6.26.0",
+		"babelify": "^8.0.0",
+		"browserify": "^14.5.0",
+		"node-sass": "^4.7.2",
+		"node-watch": "^0.5.5"
+	},
+	"dependencies": {
+	}
+}
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+	<title>MKRhere - Portfolio / Anu Rahul Nandhan</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+</head>
+
+<body>
+	<div id="intro" class="row-full">
+		<div class="col-full">
+			<h1 class="t-right">Hi, I'm Muthu Kumar</h1>
+			<p class="t-right">a.k.a
+				<span class="is-relative">
+					<span class="t-white" id="myname-click">Anu Rahul Nandhan S</span>
+					<span class="tooltip" id="myname-tip">Anu Rahul Nandhan is indeed my legal name. I work under the pseudonym Muthu Kumar.
+					</span>
+				</span>
+			</p>
+		</div>
+	</div>
+	<div id="about" class="row-full">
+		<div class="col-full">
+			<h2>Content</h2>
+			<p>Is <span class="t-white">Coming</span></p>
+		</div>
+	</div>
+	<script type="text/javascript" src="js/bundle.js"></script>
+</body>
+
+</html>
--- a/sass/style.sass
+++ b/sass/style.sass
@ -0,0 +1,82 @@
+// Vars
+
+$primary: hsl(255, 100%, 60%)
+$bg-color: #000
+
+// Root
+
+html
+	font-size: 14px
+	font-family: 'Roboto', Arial, Helvetica, sans-serif
+	font-weight: 300
+	color: $primary
+
+// Body
+
+body
+	width: 100%
+	overflow-x: hidden
+	background: $bg-color
+
+// Typography
+
+h1, h2, h3, h4, h5, h6
+	font-weight: 300
+
+h1
+	font-size: 2.8em
+	line-height: 0em
+
+.t-right
+	text-align: right
+
+.t-white
+	color: #fff
+
+.t-uline
+	border-bottom: 1px solid rgba(255, 255, 255, 0.5)
+
+.tooltip
+	display: none
+	width: 100%
+	position: absolute
+	top: 3em
+	left: 0
+	z-index: 200
+	background: $primary
+	color: #fff
+	padding: 0.8em
+	font-size: 0.8em
+	text-align: left
+
+.is-relative
+	position: relative
+
+// Grid
+
+.row-full
+	display: block
+	display: grid
+	align-content: center
+	align-items: center
+	justify-content: center
+	margin: auto
+	height: 100vh
+	grid-template-columns: [full] 100%
+
+
+.row-full
+	display: block
+	display: grid
+	align-content: center
+	align-items: center
+	justify-content: center
+	margin: auto
+	height: 100vh
+	grid-template-columns: [full] 100%
+
+
+.col-full
+	align-self: center
+	grid-area: full
+	margin: auto