dev-blog/index.html at gh-pages · Nadeempoco/dev-blog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Nadeem's blog: Welcome</title>

  <link rel="stylesheet" href="assets/icons/style.css">
  <!-- <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> -->
  <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap" rel="stylesheet"> -->
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/menu.css">
  <link rel="stylesheet" href="assets/css/style.css">


  <link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
  <link rel="manifest" href="assets/favicons/site.webmanifest">
  <link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="assets/favicons/favicon.ico">
  <meta name="msapplication-TileColor" content="#b91d47">
  <meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">

</head>

<body class="">


  <header class="">
    <section class="flex padding-y-1 padding-x-1 vio-bg fixed-position bring-top">
      <h1 class="white-txt margin-x-1">Nadeem's blog</h1>
      <div class="menu-wrap">
        <input type="checkbox" class="toggler">
        <div class="hamburger">
          <div></div>
        </div>
        <div class="menu">
          <div>
            <nav>
              <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <nav class="margin-x-1 hide-nav">
        <ul class="flex align-m padding-x-1">
          <li class="padding-x-1 uppercase"><a class="padding-y-1" href="index.html">Home</a></li>
          <li class="padding-x-1 uppercase"><a class="padding-y-1" href="about.html">About</a></li>
          <!-- <li><a href="my-posts.html">Posts</a></li> -->
        </ul>
      </nav>
    </section>
    <section class="text-c grad-bg padding-y-5 padding-x-3">
      <figure class="margin-x-1 margin-y-3">
        <img src="assets/img/noeyes.png" width="150vw" alt="here goes my picture"
          class="circle padding-y-1 margin-y-2 margin-x-2">
        <h2 class="white-txt padding-x-2 uppercase">your trusted virtual assistant<br>management, organization &
          business support</h2>
        <small class="white-txt padding-x-2">In this blog I write about technology, business strategies, and other
          random stuff!</small>
      </figure>
      <p class="margin-y-3 padding-x-2 large-font">
        <a href="mailto:nadeem.khalawi@powercoders.org?subject=Mail from dev-blog" target="_blank" class="icon-mail4">
        </a>
        <a href="https://www.linkedin.com/in/nadeemkhalawi" target="_blank" class="icon-linkedin2"> </a>
        <a href="https://twitter.com/nadeem_khl" target="_blank" class="icon-twitter"> </a>
        <a href="https://github.com/Nadeempoco" target="_blank" class="icon-github"> </a>
      </p>
      <div><a href="#articles" class="icon-keyboard_arrow_down xl-font"></a></div>
    </section>

  </header>

  <main class="margin-x-3 margin-y-5 padding-y-2 padding-x-2">
    <!-- need to do something about the arrows taking me to the articles -->
    <div id="articles"></div>

    <!-- here are the featured articles, more work need to be done! -->
    <article id="featured-article" class="padding-x-1 padding-y-1">
      <section class="margin-b-5">
        <h3 class="uppercase text-c bold xl-font">New on nadeem's blog!</h3>
        <h3 class="uppercase text-c margin-t-10">Introducing my new mini-blog: My exercises arena!</h3>
      </section>
      <p class="text-c">We have been doing many exercises and challenges lately - and more are expected to come!, I
        thought I'll create a new mini-blog execusivly to share with you these challanges and how I solved them.</p>
      <p class="text-c uppercase bold"><a href="https://nadeempoco.github.io/challenges/" target="_blank">click here to
          know more!</a></p>
    </article>
    <hr class="margin-y-1">

    <!-- here the articles section start, the most recent should be added to the bottom -->
    <div class="chron-order">
      <!-- this is the arrow to up -->
      <div class="text-c margin-t-25"><a href="#articles" class="icon-keyboard_arrow_up xl-font no-decoration"></a>
      </div>

      <!-- the articles go gere -->
      <article class="padding-x-1 padding-y-1">
        <section class="margin-b-5">
          <h3 class="uppercase">Version control, with Git & GitHub</h3>
          <small class="">Work in progress: last updated May 3 2020</small>
        </section>
        <p class="text-j">This article is to help you to get familiar with Git and GitHub. GitHub is an online platform,
          that help developers to share codes and resources online...</p>
        <p class="text-r"><a href="posts/001-git_github.html">read more</a></p>
        <hr>
      </article>

      <article class="padding-x-1 padding-y-1">
        <section class="margin-b-5">
          <h3 class="uppercase">Introducing my new mini-blog: My exercises arena!</h3>
          <small class="">published on May 5 2020</small>
        </section>
        <p class="text-j">We have been doing many exercises and challenges lately - and more are expected to come!, I
          thought I'll create a new mini-blog execusivly to share with you these challanges and how I solved them...</p>
        <p class="text-r"><a href="posts/002-my_exercises_arena.html">read more</a></p>
        <hr>
      </article>

      <article class="padding-x-1 padding-y-1">
        <section class="margin-b-5">
          <h3 class="uppercase">Variables in JavaScript</h3>
          <small class="">published on May 14 2020</small>
        </section>
        <p class="text-j">Variables play an important role in computer programming because they enable programmers to
          write flexible
          programs...</p>
        <p class="text-r"><a href="posts/003-js-variables.html">read more</a></p>
        <hr>
      </article>

      <article class="padding-x-1 padding-y-1">
        <section class="margin-b-5">
          <h3 class="uppercase">Functions in JavaScript</h3>
          <small class="">published on May 14 2020</small>
        </section>
        <p class="text-j">Functions are the main “building blocks” of a program. They allow the code to be called many
          times without
          repetition...</p>
        <p class="text-r"><a href="posts/004-js-functions.html">read more</a></p>
        <hr>
      </article>

      <article class="padding-x-1 padding-y-1">
        <section class="margin-b-5">
          <h3 class="uppercase">Operators & Conditions in JavaScript</h3>
          <small class="">published on May 14 2020</small>
        </section>
        <p class="text-j">In JavaScript operators are used to perform math operations on variables and values, check if
          they fullfil a
          condition, and give more use to our functions...</p>
        <p class="text-r"><a href="posts/005-js-operators.html">read more</a></p>
        <hr>
      </article>

    </div>

    <!-- <h4><a href="my-posts.html">More posts</a></h4> -->
  </main>
  <footer class="vio-bg padding-y-3">
    <h2 class="white-txt text-c">empowerd by <a href="https://powercoders.org/" target="_blank">powercoders</a></h2>
  </footer>
</body>

</html>