mkrhere
/
pw
mirror of https://github.com/MKRhere/pw
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Full content added (December 10, 2017)

master
Muthu Kumar 7 years ago
parent
cab9ce0b02
commit
178993a83d
4 changed files with 502 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 199
      docs/css/style.css
  2. 177
      docs/index.html
  3. 2
      package.json
  4. 170
      sass/style.sass

199
docs/css/style.css
View File

@ -1,13 +1,17 @@
@charset "UTF-8";
html {
font-size: 14px;
font-size: 12px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-weight: 300;
color: #6633ff; }
color: #8b64ff; }
body {
width: 100%;
overflow-x: hidden;
background: #000; }
background: rgba(0, 0, 0, 0.9);
background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%);
max-width: 768px;
margin: auto; }
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
@ -16,8 +20,21 @@ h1, h2, h3, h4, h5, h6 {
p {
margin: 0; }
a {
color: #fff;
font-weight: 500;
text-decoration: underline dashed; }
h1 {
font-size: 2.8em; }
font-size: 2.8rem; }
.t-med {
font-size: 1.5em; }
.t-large {
font-size: 3rem;
margin-bottom: 3rem;
font-weight: 500; }
.t-right {
text-align: right; }
@ -33,40 +50,184 @@ h1 {
.tooltip {
display: none;
width: 100%;
width: 120%;
position: absolute;
top: 3em;
top: 3rem;
left: 0;
z-index: 200;
background: #6633ff;
background: #5a23ff;
color: #fff;
padding: 0.8em;
font-size: 0.8em;
padding: 0.8rem;
font-size: 1rem;
text-align: left; }
@media screen and (max-width: 600px) {
.t-right {
text-align: center; } }
#faq, #work {
list-style: none;
margin: 0;
padding: 0; }
.faq-item > * {
font-size: 1.5rem;
line-height: 2.2rem;
letter-spacing: 0.5px;
font-weight: 500; }
#faq > li {
margin-bottom: 2rem; }
.row-full {
.faq-item > p {
color: #fff;
border-bottom: 1px dotted white;
display: inline-block; }
#work li:before {
content: "→"; }
#work .faq-item p {
font-size: 1.3rem;
line-height: 2rem; }
.row-full, .row-3 {
display: block;
display: grid;
align-content: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: auto;
height: 100vh;
padding: 1rem;
grid-template-columns: [full] 100%; }
.col-full {
.row-3 {
grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%;
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr; }
.col-full, .col-1-1, .col-1-2, .col-1-3, .col-2-1, .col-2-2, .col-2-3 {
align-self: center;
grid-column: full;
margin: auto;
padding: 1rem; }
.row-head {
align-self: center;
grid-area: full;
grid-row: header;
grid-column-start: span 3;
margin: auto; }
.row-head h2 {
color: #fff;
font-size: 1.5rem; }
.col-1-1 {
grid-row: content1;
grid-column: col1;
margin: 0.5rem;
min-height: 100%;
z-index: 99; }
.col-1-2 {
grid-row: content1;
grid-column: col2;
margin: 0.5rem;
min-height: 100%;
z-index: 99; }
.col-1-3 {
grid-row: content1;
grid-column: col3;
margin: 0.5rem;
min-height: 100%;
z-index: 99; }
.col-2-1 {
grid-row: content2;
grid-column: col1;
margin: 0.5rem;
min-height: 100%;
z-index: 98; }
.col-2-2 {
grid-row: content2;
grid-column: col2;
margin: 0.5rem;
min-height: 100%;
z-index: 98; }
.col-2-3 {
grid-row: content2;
grid-column: col3;
margin: 0.5rem;
min-height: 100%;
z-index: 98; }
@media screen and (max-width: 600px) {
.row-full {
margin: 40vh auto;
height: auto; } }
.row-full, .row-3 {
margin: 0;
display: flex;
flex-direction: column; }
.row-3 {
height: auto;
margin: 5rem auto;
max-width: 260px; }
.row-head {
margin: 2em auto; } }
.p-item {
position: relative;
padding: 1.5rem 1.8rem;
border-radius: .5rem;
text-align: left;
background: #2c829a;
color: #fff;
box-shadow: 0rem 0.5rem 3rem #000; }
.p-item:hover {
transform: translateY(-5px) scale(1.02);
z-index: 100;
background: #5a23ff;
box-shadow: 0rem 1rem 4rem #000; }
.p-item h3 {
padding-top: .3rem;
margin-bottom: .8rem;
font-size: 0.9rem;
font-weight: 500; }
.p-links a {
display: inline-block;
margin: 0.5rem 0.5rem; }
.tags {
padding: 0;
display: inline-block; }
.tags li {
list-style: none;
display: inline-block;
background: rgba(24, 32, 231, 0.25);
border-radius: 1rem;
font-size: .7rem;
font-weight: 500;
text-transform: uppercase;
padding: .5em 0.8rem;
margin: 0.2em 0; }
.accessible {
text-align: center;
margin: 10px auto;
width: 100vw;
background: #fff;
color: #000;
position: relative;
top: -100px; }
.accessible:focus {
margin: 10px auto;
width: 100vw;
background: #fff;
color: #000;
position: static;
top: 0; }
.is-relative {
position: relative; }

177
docs/index.html
View File

@ -12,36 +12,193 @@
<meta name="copyright" content="Muthu Kumar/Anu Rahul Nandhan">
<meta name="language" content="EN">
<meta name="robots" content="index,follow">
<meta name="revised" content="Sunday, December 12th, 2017">
<meta name="revised" content="Sunday, December 10th, 2017">
<meta name="author" content="Muthu Kumar, muthukumar(AT)thefeathers.in">
<meta name="url" content="https://mkr.pw">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
</head>
<body>
<div id="intro" class="row-full">
<a class="accessible" aria-hidden="true" href="#intro">[Skip to Content]</a>
<section 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-select">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 class="tooltip" id="myname-tip">This 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 t-center">
<h2>Content</h2>
<p>Is
<span class="t-white">Coming</span>
</section>
<section id="about" class="row-full">
<div class="col-full">
<h2 class="t-large t-white">About</h2>
<h2>Let's make this simple.</h2>
<h3 class="t-white">You have questions—let me try to answer them.</h3>
<br>
<ul id="faq">
<li class="faq-item">
<h3>I'm</h3>
<p>22.</p>
</li>
<li class="faq-item">
<h3>I'm an</h3>
<p>Architect, designer, full stack web developer, writer, and filmmaker.</p>
</li>
<li class="faq-item">
<h3>Currently at</h3>
<p>Chennai, India.</p>
</li>
<li class="faq-item">
<h3>from</h3>
<p>Tuticorin, Tamil Nadu.</p>
</li>
<li class="faq-item">
<h3>Highschool at</h3>
<p>Sri Jayendra Swamigal Silver Jubilee, Tirunelveli.</p>
</li>
<li class="faq-item">
<h3>College at</h3>
<p>McGan's Ooty School of Architecture, Ooty.</p>
</li>
<li class="faq-item">
<h3>Previous Work</h3>
</li>
<li>
<ul id="work">
<li class="faq-item">
<p>Architectural Intern, BlueCube, Chennai.</p>
</li>
<li class="faq-item">
<p>Technical Content Writer Intern, Zoho, Chennai.</p>
</li>
<li class="faq-item">
<p>Graphic Designer & Web Developer, Manoj Exports, Chennai.</p>
</li>
</ul>
</li>
<li>
<h3 class="t-white">Get more infortmation by visiting
<code>/api</code> on this domain.
</h3>
</li>
</ul>
</div>
</section>
<section id="projects" class="row-3">
<div class="row-head t-center">
<h2>Projects</h2>
</div>
<div class="col-1-1 t-center p-item">
<h3>Personal Website</h3>
<p>Source code of this website.</p>
<ul class="tags">
<li>JavaScript</li>
<li>Node</li>
<li>HTML</li>
<li>Sass</li>
<li>Browserify</li>
</ul>
<p class="p-links">
<a target="_blank" href="https://github.com/MKRhere/pw">GitHub</a>
<a target="_blank" href="https://mkr.pw">Project Site</a>
</p>
</div>
<div class="col-1-2 t-center p-item">
<h3>up-serve</h3>
<p>A very simple to use cli nginx configuration tool.</p>
<ul class="tags">
<li>JavaScript</li>
<li>Node</li>
<li>nginx</li>
<li>Linux</li>
<li>SysAdmin</li>
</ul>
<p class="p-links">
<a target="_blank" href="https://github.com/CodeFeathers/up-serve">GitHub</a>
<a target="_blank" href="https://up.js.org">Project Site</a>
</p>
</div>
<div class="col-1-3 t-center p-item">
<h3>OutFocusRED</h3>
<p>WordPress theme for the OutFocus.in online magazine.</p>
<ul class="tags">
<li>WordPress</li>
<li>PHP</li>
<li>_s</li>
<li>JavaScript</li>
</ul>
<p class="p-links">
<a target="_blank" href="https://github.com/CodeFeathers/OutFocusRED">GitHub</a>
<a target="_blank" href="https://outfocus.in">Project Site</a>
</p>
</div>
<div class="col-2-1 t-center p-item">
<h3>The Feathers</h3>
<p>Founder, designer and developer of theFeathers.in.</p>
<ul class="tags">
<li>Design</li>
<li>WordPress</li>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<p class="p-links">
<a target="_blank" href="https://thefeathers.in">Project Site / Currently down</a>
</p>
</div>
<div class="col-2-2 t-center p-item">
<h3>The Devs Network</h3>
<p>A Telegram network for developers. Contributed to development.</p>
<ul class="tags">
<li>JavaScript</li>
<li>Node</li>
<li>React</li>
<li>Material</li>
<li>Design</li>
</ul>
<p class="p-links">
<a target="_blank" href="https://github.com/thedevs-network">GitHub</a>
<a target="_blank" href="https://thedevs.network">Project Site</a>
</p>
</div>
<div class="col-2-3 t-center p-item">
<h3>Curatio Healthcare</h3>
<p>Design and development of custom site (WordPress).</p>
<ul class="tags">
<li>Design</li>
<li>WordPress</li>
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<p class="p-links">
<a target="_blank" href="http://curatiohealthcare.com">Project Site</a>
</p>
</div>
</section>
<section id="contact" class="row-full">
<div class="col-full">
<h1>I'm available for work.</h1>
<p class="t-med">Contact me at:
<span id="contact-em" class="t-white">mxthxkxmar@thefeathers.in (Replace x with u)</span>
</p>
</div>
</div>
</section>
<script>
function revealEmail() {
var obfem = "mxthxkxmar@thefeathers.in"
obfem = obfem.replace(/x/g, 'u')
document.querySelector("#contact-em").innerHTML = obfem
}
document.onscroll = revealEmail
</script>
<script src="js/bundle.js" type="text/javascript" charset="utf-8"></script>
</body>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mkr.pw",
"version": "0.1.0",
"version": "1.0.0",
"description": "MKR's personal website",
"main": "index.js",
"scripts": {

170
sass/style.sass
View File

@ -1,15 +1,16 @@
// Vars
$primary: hsl(255, 100%, 60%)
$bg-color: #000
$primary: #5a23ff
$primary-dull: #3a17a3
$bg-color: rgba(0, 0, 0, 0.9)
// Root
html
font-size: 14px
font-size: 12px
font-family: 'Roboto', Arial, Helvetica, sans-serif
font-weight: 300
color: $primary
color: #8b64ff
// Body
@ -17,6 +18,9 @@ body
width: 100%
overflow-x: hidden
background: $bg-color
background: linear-gradient(to bottom, #000000 0%, #000000 30%, #2f2730 100%)
max-width: 768px
margin: auto
// Typography
@ -27,8 +31,21 @@ h1, h2, h3, h4, h5, h6
p
margin: 0
a
color: #fff
font-weight: 500
text-decoration: underline dashed
h1
font-size: 2.8em
font-size: 2.8rem
.t-med
font-size: 1.5em
.t-large
font-size: 3rem
margin-bottom: 3rem
font-weight: 500
.t-right
text-align: right
@ -44,20 +61,44 @@ h1
.tooltip
display: none
width: 100%
width: 120%
position: absolute
top: 3em
top: 3rem
left: 0
z-index: 200
background: $primary
color: #fff
padding: 0.8em
font-size: 0.8em
padding: 0.8rem
font-size: 1rem
text-align: left
@media screen and (max-width: 600px)
.t-right
text-align: center
// FAQ UL
#faq, #work
list-style: none
margin: 0
padding: 0
.faq-item > *
font-size: 1.5rem
line-height: 2.2rem
letter-spacing: 0.5px
font-weight: 500
#faq > li
margin-bottom: 2rem
.faq-item > p
color: #fff
border-bottom: 1px dotted white
display: inline-block
#work li:before
content: "→"
#work .faq-item p
font-size: 1.3rem
line-height: 2rem
// Grid
@ -67,21 +108,118 @@ h1
align-content: center
align-items: center
justify-content: center
min-height: 100vh
margin: auto
height: 100vh
padding: 1rem
grid-template-columns: [full] 100%
.row-3
@extend .row-full
grid-template-rows: [header] 10% [gutter] 5% [content1] 25% [gutter] 5% [content2] 25%
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr
.col-full
align-self: center
grid-area: full
grid-column: full
margin: auto
padding: 1rem
.row-head
align-self: center
grid-row: header
grid-column-start: span 3
margin: auto
.row-head h2
color: #fff
font-size: 1.5rem
@for $rown from 1 through 2
@for $coln from 1 through 3
.col-#{$rown}-#{$coln}
@extend .col-full
grid-row: content#{$rown}
grid-column: col#{$coln}
margin: 0.5rem
min-height: 100%
z-index: #{100 - $rown}
@media screen and (max-width: 600px)
.row-full
margin: 40vh auto
margin: 0
display: flex
flex-direction: column
.row-3
height: auto
margin: 5rem auto
max-width: 260px
.row-head
margin: 2em auto
// Micro-class
// Portfolio Item
.p-item
position: relative
padding: 1.5rem 1.8rem
border-radius: .5rem
text-align: left
background: #2c829a
color: #fff
box-shadow: 0rem 0.5rem 3rem #000
.p-item:hover
transform: translateY(-5px) scale(1.02)
z-index: 100
background: $primary
box-shadow: 0rem 1rem 4rem #000
.p-item h3
padding-top: .3rem
margin-bottom: .8rem
font-size: 0.9rem
font-weight: 500
.p-links a
display: inline-block
margin: 0.5rem 0.5rem
// Tags
.tags
padding: 0
display: inline-block
.tags li
list-style: none
display: inline-block
background: rgba(24, 32, 231, .25)
border-radius: 1rem
font-size: .7rem
font-weight: 500
text-transform: uppercase
padding: .5em 0.8rem
margin: 0.2em 0
// Accessibility
.accessible
text-align: center
margin: 10px auto
width: 100vw
background: #fff
color: #000
position: relative
top: -100px
.accessible:focus
margin: 10px auto
width: 100vw
background: #fff
color: #000
position: static
top: 0
// Micro-classes
.is-relative
position: relative
Write Preview
Loading…
Cancel
Save