main page has been done

This commit is contained in:
Sameer Rahmani 2019-03-28 21:20:47 +00:00
parent 43edc57c1b
commit 0b311f874c
8 changed files with 213 additions and 99 deletions

80
_layouts/_nav.html Normal file
View File

@ -0,0 +1,80 @@
<section class="section">
<div class="container">
<div class="level">
<a class="navlink" href="https://gitlab.com/lxsameer">
<div class="level-item">
</div>
</a>
<a class="navlink" href="/feed.xml">
<div class="level-item">
<span class="icon is-large">
<i class="fas fa-rss fa-lg"></i>
</span>
</div>
</a>
{% if page.url != "/" %}
<a class="level-item" href="/">
<div class="column">
<span class="icon is-large">
<i class="fas fa-home fa-lg"></i>
</span>
</div>
</a>
{% endif %}
<!-- {% if page.url != "/gpg.html" %}
<div class="column navlink">
<a class="" href="/gpg.html">
<span class="icon is-large">
<i class="fas fa-key fa-lg"></i>
</span>
</a>
</div>
{% endif %} -->
{% if page.url != "/blog/" %}
<a class="navlink" href="/blog/">
<div class="level-item">
<span class="icon is-large">
<i class="fas fa-blog fa-lg"></i>
</span>
</div>
</a>
{% endif %}
<a class="navlink" href="https://www.linkedin.com/in/lxsameer/">
<div class="level-item">
<span class="icon is-large">
<i class="fab fa-linkedin fa-lg"></i>
</span>
</div>
</a>
<a class="navlink" href="https://twitter.com/lxsameer">
<div class="level-item">
<span class="icon is-large">
<i class="fab fa-twitter fa-lg"></i>
</span>
</div>
</a>
</div>
</div>
</section>

View File

@ -7,91 +7,79 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body class="{% if page.theme %}{{page.theme }}{% else %}light{% endif %}">
<section class="section">
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="container">
<div class="columns is-centered centered is-flex">
<div class="column is-half centered is-flex">
<div class="columns">
<div class="navbar-brand">
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navcontainer">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<a class="navlink" href="https://gitlab.com/lxsameer">
<div class="column">
<span class="icon is-large">
<i class="fab fa-gitlab fa-lg"></i>
</span>
</div>
<div id="navcontainer" class="navbar-menu">
<div class="navbar-start">
<a href="/" class="navbar-item">
Blog
</a>
<a class="navlink" href="/feed.xml">
<div class="column">
<span class="icon is-large">
<i class="fas fa-rss fa-lg"></i>
</span>
</div>
<a href="/code-of-honor/" class="navbar-item">
Code of Honor
</a>
{% if page.url != "/" %}
<a class="navlink" href="/">
<div class="column">
<span class="icon is-large">
<i class="fas fa-home fa-lg"></i>
</span>
</div>
<a href="/about-me/" class="navbar-item">
About Me
</a>
{% endif %}
</div>
<!-- {% if page.url != "/gpg.html" %}
<div class="column navlink">
<a class="" href="/gpg.html">
<span class="icon is-large">
<i class="fas fa-key fa-lg"></i>
</span>
</a>
</div>
{% endif %} -->
{% if page.url != "/blog/" %}
<a class="navlink" href="/blog/">
<div class="column">
<span class="icon is-large">
<i class="fas fa-blog fa-lg"></i>
</span>
</div>
</a>
{% endif %}
<a class="navlink" href="https://www.linkedin.com/in/lxsameer/">
<div class="column">
<span class="icon is-large">
<i class="fab fa-linkedin fa-lg"></i>
</span>
</div>
<div class="navbar-end">
<a class="navbar-item" href="https://gitlab.com/lxsameer">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-gitlab fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-gitlab fa-lg"></i>
Gitlab
</span>
</a>
<a class="navlink" href="https://twitter.com/lxsameer">
<div class="column">
<span class="icon is-large">
<i class="fab fa-twitter fa-lg"></i>
</span>
</div>
<a class="navbar-item" href="https://www.linkedin.com/in/lxsameer/">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-linkedin fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-linkedin fa-lg"></i>
Linkedin
</span>
</a>
<a class="navbar-item" href="https://twitter.com/lxsameer">
<span class="icon is-large is-hidden-mobile">
<i class="fab fa-twitter fa-lg"></i>
</span>
<span class="is-large is-hidden-desktop">
<i class="pad fab fa-twitter fa-lg"></i>
Twitter
</span>
</a>
</div>
</div>
</div>
</nav>
<div class="container">
{{ content }}
</div>
</div>
</section>
<section class="section is-flex">
<div class="container">
{{ content }}
</div>
</section>
<footer class="footer">
<div class="content has-text-centered">
<p>© 2010-2019 Sameer Rahmani</p>
</div>
</footer>
<script src="/assets/js/main.js?1"></script>
</body>
</html>

View File

@ -1,32 +1,37 @@
---
layout: default
---
<div class="columns is-centered">
<div class="column is-half has-text-centered is-flex centered">
<figure class="image is-128x128 is-centered">
<img class="is-rounded" src="https://lxsameer.com/images/me-1.jpg" alt="Sameer Rahmani" />
</figure>
<div class="column is-half-desktop is-offset-one-quarter-desktop">
<section class="section">
<p class="text-centered">
<img class="is-rounded" alt="lxsameer" src="https://lxsameer.com/images/me-1.jpg"/>
</p>
<p class="info text-justified">
Hi! I'm <b>Sameer</b> and I usally write about
technology and software development (hmmm more like nagging instead of writing).
</p>
</section>
</div>
<div class="column is-half-desktop is-offset-one-quarter-desktop">
<section class="section">
<h3 class="is-size-5">
Blog Posts:
</h3>
{% for post in site.posts %}
<div class="columns">
<div class="column">
<h2 class="is-size-3-desktop is-size-4-mobile">
<a class="post-title-link" href="{{ post.url }}">
<i class="fas fa-link"></i> {{ post.title }}
</a>
</h2>
</div>
</div>
</div>
<div class="columns is-centered has-text-centered">
<div class="column is-half">
<h1 class="is-size-1">Sameer Rahmani</h1>
<h2 class="is-size-2">Senior Software Engineer</h2>
</div>
</div>
<div class="columns is-centered is-flex">
<div class="column is-one-quarter centered">
<a class="button is-primary is-block cv-button" href="https://dl.lxsameer.com/CV/SameerRahmani.pdf">
<b>
Download My CV
</b>
</a>
</div>
</div>
{{ content }}
{% endfor %}
</section>
</div>

View File

@ -4,7 +4,7 @@ theme: dark
---
<div class="columns is-flex centered">
<div class="column is-half">
<div class="column is-half-desktop">
<h1 class="is-size-1">
{{page.title}}
</h1>
@ -70,8 +70,8 @@ theme: dark
</div>
</div>
[]
<div class="columns is-flex centered">
<div class="column is-half has-text-centered">
<div class="column is-half-desktop has-text-centered">
</div>
</div>

View File

@ -3,7 +3,7 @@ layout: default
---
<div class="columns is-flex centered">
<div class="column is-half">
<div class="column is-half-desktop">
{{ content }}
</div>
</div>

25
assets/js/main.js Normal file
View File

@ -0,0 +1,25 @@
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});

View File

@ -109,6 +109,11 @@ body.dark
.columns.is-flex.centered
justify-content: center
.text-centered
text-align: center
.text-justified
text-align: justify
.cv-button
margin-top: 3rem
@ -134,3 +139,14 @@ ul.details
display: inline
li.category
padding: 0.5em
.pad
padding-right: 5px
.navbar-menu
a.navbar-item
color: $purple
.is-rounded
border-radius: 50%
border: 3px solid darken($purple, 10%)

View File

@ -1,5 +1,5 @@
---
layout: home
theme: light
theme: dark
home: true
---