Skip to content

Commit 7b78b7c

Browse files
EmptyWorkEmptyWork
authored
modulate: about — increase easiness of editing items (#62)
modulate: `about` — increase easiness of editing items
2 parents 8d8832c + 4e93a3c commit 7b78b7c

File tree

2 files changed

+152
-165
lines changed

2 files changed

+152
-165
lines changed

‎src/_data/about.json

+88-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,89 @@
11
{
2-
"title": "About Me"
3-
}
2+
"title": "About Me",
3+
"bioHeader": "I am <mark class='highlight'>based in<a href='https://en.wikipedia.org/wiki/indonesia' target='_blank' rel='noopener noreferrer'> Indonesia<span class='new-tab-warning'> Open a new tab </span>.</a></mark>",
4+
"bio": "I am currently Majoring in Computer Science at<a href='https://ukim.ac.id' target='_blank' rel='noopener noreferrer'><mark class='highlight'>Christian University of Indonesia, Moluccas.</mark><span class='new-tab-warning'> Open a new tab </span></a><br/>I am also a <i>Certified Fiber Optic Technician</i> since 2017 by <a href='http://apjatel.id/' target='_blank' rel='noopener noreferrer'><mark class='highlight'>APJTEL.</mark><span class='new-tab-warning'> Open a new tab </span></a></div>",
5+
"languagesProficient": [
6+
{
7+
"level": "Advanced",
8+
"languages": [
9+
"HTML5",
10+
"CSS3",
11+
"Javascript",
12+
"PHP",
13+
"SQL",
14+
"JSON",
15+
"TailwindCSS"
16+
]
17+
},
18+
{
19+
"level": "Working Knowledge",
20+
"languages": [
21+
"React",
22+
"Vue",
23+
"SCSS",
24+
"Laravel",
25+
"MongoDB",
26+
"NodeJs",
27+
"Git"
28+
]
29+
},
30+
{
31+
"level": "Previous Experience",
32+
"languages": [
33+
"C++",
34+
"Python",
35+
"Java",
36+
"Dart",
37+
"Powershell",
38+
"RouterOS/Mikrotik"
39+
]
40+
},
41+
{
42+
"level": "Misc<sup>[1]</sup>",
43+
"languages": [
44+
"<a href='https://github.com/IBMa/equal-access' target='_blank' rel='noopener noreferrer'>IBM Equal Access<span class='new-tab-warning'> Open a new tab </span></a>",
45+
"<a href='https://www.w3.org/TR/wai-aria/' target='_blank' rel='noopener noreferrer'>W3 Accessibility (WAI-ARIA) 1.1<span class='new-tab-warning'> Open a new tab </span></a>",
46+
"<a href='https://wave.webaim.org/' target='_blank' rel='noopener noreferrer'>WAVE Web Accessibility Evaluation Tool<span class='new-tab-warning'> Open a new tab </span></a>"
47+
]
48+
}
49+
],
50+
"languagesExtraInfo": [
51+
{
52+
"type": "info",
53+
"details": "[1] As of now, I think the knowledge about <a href='https://en.wikipedia.org/wiki/WAI-ARIA' target='_blank' rel='noopener noreferrer'><mark class='highlight'>ARIA (Accessibility — Rich Internet Application)</mark><span class='new-tab-warning'> Open a new tab </span></a> is essential; so I spend my free time researching, watching, and reading articles related to it."
54+
},
55+
{
56+
"type": "continious",
57+
"details": "— If you also want to learn how to make the web accessable for everyone, visit <a target='_blank' rel='noopener noreferrer' href='https://www.accessibility-developer-guide.com/'><mark class='highlight'>https://www.accessibility-developer-guide.com/</mark><span class='new-tab-warning'> Open a new tab </span></a> they provided amazing list on things you can do to improve your website accessibility."
58+
},
59+
{
60+
"type": "info",
61+
"details": "[2] One of the best tools that <mark class='highlight'>provided comprehensive checks and details information</mark> about how to fix accessibility problems with your website."
62+
}
63+
],
64+
"toolsProficient": [
65+
{
66+
"level": "Advanced",
67+
"tools": ["Adobe Photoshop", "Visual Studio Code"]
68+
},
69+
{
70+
"level": "Working Knowledge",
71+
"tools": [
72+
"Adobe After Effect",
73+
"Resolve Davinci",
74+
"Gimp",
75+
"Figma",
76+
"Atom",
77+
"Github"
78+
]
79+
},
80+
{
81+
"level": "Previous Experience",
82+
"tools": ["Blockbench", "Adobe Premiere", "Adobe Illustrator", "GitLab"]
83+
},
84+
{
85+
"level": "Misc",
86+
"tools": ["Hyper"]
87+
}
88+
]
89+
}

‎src/_includes/sections/about.njk

+64-163
Original file line numberDiff line numberDiff line change
@@ -47,174 +47,75 @@
4747
<div class="text-area">
4848
<header>
4949
<h3 class="extra">
50-
I am
51-
<mark class="highlight">
52-
based in
53-
<a href="https://en.wikipedia.org/wiki/indonesia" target="_blank" rel="noopener noreferrer">
54-
Indonesia
55-
<span class="new-tab-warning"> Open a new tab </span>.
56-
</a>
57-
</mark>
50+
{{ about.bioHeader | safe }}
5851
</h3>
5952
</header>
60-
I am currently Majoring in Computer Science at
61-
<a href="https://ukim.ac.id" target="_blank" rel="noopener noreferrer">
62-
<mark class="highlight">
63-
Christian University of Indonesia, Moluccas.
64-
</mark>
65-
<span class="new-tab-warning"> Open a new tab </span>
66-
</a>
67-
<br/>
68-
I am also a <i>Certified Fiber Optic Technician</i> since 2017
69-
by
70-
<a href="http://apjatel.id/" target="_blank" rel="noopener noreferrer">
71-
<mark class="highlight">
72-
APJTEL.
73-
</mark>
74-
<span class="new-tab-warning"> Open a new tab </span>
75-
</a>
76-
</div>
53+
{{ about.bio | safe }}
54+
</section>
7755
</section>
78-
</section>
79-
<section class="flex languages" data-animation="fade-in">
80-
<header>
81-
<h3 id="languages" class="header-title">
82-
<a class="header-link__access" href="#languages">
83-
<span aria-hidden="true">#</span>
84-
<span class="sr-only">Link to heading "languages"</span>
85-
</a>
86-
<span>Languages</span>
87-
</h3>
88-
</header>
89-
<article class="lists">
90-
<ul>
91-
<li>Advanced</li>
92-
<li>HTML5</li>
93-
<li>CSS3</li>
94-
<li>Javascript</li>
95-
<li>PHP</li>
96-
<li>SQL</li>
97-
<li>JSON</li>
98-
<li>TailwindCSS</li>
99-
</ul>
100-
<ul>
101-
<li>Working Knowledge</li>
102-
<li>React</li>
103-
<li>Vue</li>
104-
<li>SCSS</li>
105-
<li>Laravel</li>
106-
<li>MongoDB</li>
107-
<li>NodeJs</li>
108-
<li>Git</li>
109-
</ul>
110-
<ul>
111-
<li>Previous Experience</li>
112-
<li>C++</li>
113-
<li>Python</li>
114-
<li>Java</li>
115-
<li>Dart</li>
116-
<li>Powershell</li>
117-
<li>RouterOS/Mikrotik</li>
118-
</ul>
119-
<ul>
120-
<li>
121-
Misc
122-
<sup>[1]</sup>
123-
</li>
124-
<li>
125-
<a href="https://github.com/IBMa/equal-access" target="_blank" rel="noopener noreferrer">
126-
IBM Equal Access
127-
<span class="new-tab-warning"> Open a new tab </span>
128-
</a>
129-
</li>
130-
<li>
131-
<a href="https://www.w3.org/TR/wai-aria/" rel="noopener noreferrer" target="_blank">
132-
W3 Accessibility (WAI-ARIA) 1.1
133-
<span class="new-tab-warning"> Open a new tab </span>
56+
<section class="flex languages" data-animation="fade-in">
57+
<header>
58+
<h3 id="languages" class="header-title">
59+
<a class="header-link__access" href="#languages">
60+
<span aria-hidden="true">#</span>
61+
<span class="sr-only">Link to heading "languages"</span>
13462
</a>
63+
<span>Languages</span>
64+
</h3>
65+
</header>
66+
<article class="lists">
67+
{% for proficient in about.languagesProficient %}
68+
<ul>
69+
<li>
70+
{{ proficient.level | safe}}
71+
</li>
72+
{% for language in proficient.languages %}
73+
<li>
74+
{{ language | safe}}
75+
</li>
76+
{% endfor %}
77+
</ul>
78+
{% endfor %}
79+
</article>
80+
</section>
81+
<ul class="adds">
82+
{% for info in about.languagesExtraInfo %}
83+
<li{% if info.type == "info" %} class="new-line" {% endif %} data-animation="right-show" data-delay="{{ loop.index }}">
84+
{{ info.details | safe }}
13585
</li>
136-
<li>
137-
<a href="https://wave.webaim.org/" rel="noopener noreferrer" target="_blank">
138-
WAVE Web Accessibility Evaluation Tool
139-
<span class="new-tab-warning"> Open a new tab </span>
86+
{% endfor %}
87+
</ul>
88+
<section class="flex tools" data-animation="right-show">
89+
<header class="flex-header">
90+
<h3 id="tools" style="display: flex; align-items: center; gap: .2em;" class="header-title">
91+
<a class="header-link__access" href="#tools">
92+
<span aria-hidden="true">
93+
{% include 'components/svg/logo.njk' %}
94+
</span>
95+
<span class="sr-only">Link to heading "tools"</span>
14096
</a>
141-
<sup>[2]</sup>
142-
</li>
143-
</ul>
144-
</article>
145-
</section>
146-
<ul class="adds">
147-
<li data-animation="right-show" data-delay="1">
148-
[1] As of now, I think the knowledge about
149-
<a href="https://en.wikipedia.org/wiki/WAI-ARIA" target="_blank" rel="noopener noreferrer">
150-
<mark class="highlight">
151-
ARIA (Accessibility — Rich Internet Application)
152-
</mark>
153-
<span class="new-tab-warning"> Open a new tab </span>
154-
</a>
155-
is essential; so I spend my free time researching, watching, and
156-
reading articles related to it.
157-
</li>
158-
<li data-animation="right-show" data-delay="2">
159-
— If you also want to learn how to make the web accessable for
160-
everyone, visit
161-
<a target="_blank" rel="noopener noreferrer" href="https://www.accessibility-developer-guide.com/">
162-
<mark class="highlight">
163-
https://www.accessibility-developer-guide.com/
164-
</mark>
165-
<span class="new-tab-warning"> Open a new tab </span>
166-
</a>
167-
they provided amazing list on things you can do to improve your
168-
website accessibility.
169-
</li>
170-
<li class="new-line" data-animation="right-show" data-delay="3">
171-
[2] One of the best tools that <mark class="highlight">provided comprehensive checks and details information</mark> about how to fix accessibility problems with your website.
172-
</li>
173-
</ul>
174-
<section class="flex tools" data-animation="right-show">
175-
<header class="flex-header">
176-
<h3 id="tools" style="display: flex; align-items: center; gap: .2em;" class="header-title">
177-
<a class="header-link__access" href="#tools">
178-
<span aria-hidden="true">
179-
{% include 'components/svg/logo.njk' %}
180-
</span>
181-
<span class="sr-only">Link to heading "tools"</span>
182-
</a>
18397
Tools
18498
</h3>
185-
<div>
186-
<span class="dot"></span>
187-
<span class="dot"></span>
188-
<span class="dot"></span>
189-
</div>
190-
</header>
191-
<article class="lists">
192-
<ul>
193-
<li>Advanced</li>
194-
<li>Adobe Photoshop</li>
195-
<li>Visual Studio Code</li>
196-
</ul>
197-
<ul>
198-
<li>Working Knowledge</li>
199-
<li>Adobe After Effect</li>
200-
<li>Resolve Davinci</li>
201-
<li>Gimp</li>
202-
<li>Figma</li>
203-
<li>Atom</li>
204-
<li>Github</li>
205-
</ul>
206-
<ul>
207-
<li>Previous Experience</li>
208-
<li>Blockbench</li>
209-
<li>Adobe Premiere</li>
210-
<li>Adobe Illustrator</li>
211-
<li>GitLab</li>
212-
</ul>
213-
<ul>
214-
<li>Misc</li>
215-
<li>Hyper</li>
216-
</ul>
217-
</article>
218-
</section>
219-
</div>
220-
</section>
99+
<div>
100+
<span class="dot"></span>
101+
<span class="dot"></span>
102+
<span class="dot"></span>
103+
</div>
104+
</header>
105+
<article class="lists">
106+
{% for proficient in about.toolsProficient %}
107+
<ul>
108+
<li>
109+
{{ proficient.level | safe}}
110+
</li>
111+
{% for tool in proficient.tools %}
112+
<li>
113+
{{ tool | safe}}
114+
</li>
115+
{% endfor %}
116+
</ul>
117+
{% endfor %}
118+
</article>
119+
</section>
120+
</div>
121+
</section>

0 commit comments

Comments
 (0)