Skip to content

Commit 1149107

Browse files
murisansmurisans
committed
articles and works control
1 parent 9773e8e commit 1149107

14 files changed

Lines changed: 486 additions & 49 deletions

‎blogs/designing-accessible-components.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<p>Accessibility is not an afterthought; it's a fundamental aspect of good design. Every user deserves equal access to information and functionality.</p>
2+
3+
<h3>Key Principles of Accessibility</h3>
4+
5+
<p>When designing accessible components, we need to follow four core principles known as POUR:</p>
6+
7+
<ul>
8+
<li><strong>Perceivable:</strong> Information and user interface components must be presentable to users in ways they can perceive.</li>
9+
<li><strong>Operable:</strong> User interface components and navigation must be operable.</li>
10+
<li><strong>Understandable:</strong> Information and the operation of user interface must be understandable.</li>
11+
<li><strong>Robust:</strong> Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.</li>
12+
</ul>
13+
14+
<h3>Implementing Accessibility</h3>
15+
16+
<p>Start with semantic HTML - it's the foundation of accessibility. Use proper heading structure, alt text for images, and ARIA attributes when needed.</p>
17+
18+
<blockquote>"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee</blockquote>
19+
20+
<h3>Testing for Accessibility</h3>
21+
22+
<p>Use tools like screen readers, keyboard navigation testing, and automated tools to ensure your components are accessible to all users.</p>

‎css/style.css‎

Lines changed: 162 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,38 @@ body {
4444
font-family: var(--font-sans);
4545
background-color: var(--bg-light);
4646
color: var(--text-primary);
47-
line-height: 1.6;
47+
line-height: 1.75;
4848
font-size: 16px;
4949
min-height: 100vh;
5050
display: flex;
5151
flex-direction: column;
52+
-webkit-font-smoothing: antialiased;
53+
-moz-osx-font-smoothing: grayscale;
54+
text-rendering: optimizeLegibility;
55+
}
56+
57+
h1, h2, h3, h4, h5, h6 {
58+
font-weight: 700;
59+
line-height: 1.3;
60+
letter-spacing: -0.02em;
61+
}
62+
63+
h1 { font-size: 2.5rem; }
64+
h2 { font-size: 1.75rem; }
65+
h3 { font-size: 1.375rem; }
66+
h4 { font-size: 1.125rem; }
67+
68+
p {
69+
margin-bottom: 1.25rem;
70+
font-size: 1rem;
71+
}
72+
73+
blockquote {
74+
font-style: italic;
75+
color: var(--text-secondary);
76+
border-left: 4px solid var(--primary-color);
77+
padding-left: 1.5rem;
78+
margin: 1.5rem 0;
5279
}
5380

5481
* {
@@ -208,18 +235,20 @@ nav {
208235
}
209236

210237
.hero h1 {
211-
font-size: 2.5rem;
238+
font-size: 2.75rem;
212239
font-weight: 800;
213240
color: var(--text-primary);
214-
margin-bottom: 1.5rem;
215-
line-height: 1.2;
241+
margin-bottom: 1.75rem;
242+
line-height: 1.15;
243+
letter-spacing: -0.03em;
216244
}
217245

218246
.hero p {
219-
font-size: 1.125rem;
247+
font-size: 1.25rem;
220248
color: var(--text-secondary);
221-
max-width: 600px;
249+
max-width: 650px;
222250
margin: 0 auto 2rem;
251+
line-height: 1.75;
223252
}
224253

225254
.btn {
@@ -409,6 +438,123 @@ footer a:hover {
409438
padding: 2rem 0;
410439
}
411440

441+
/* Back Button */
442+
.back-button {
443+
position: fixed;
444+
top: 120px;
445+
left: 1rem;
446+
display: inline-flex;
447+
align-items: center;
448+
gap: 0.5rem;
449+
padding: 0.75rem 1rem;
450+
border: none;
451+
background-color: var(--bg-white);
452+
color: var(--text-primary);
453+
border-radius: var(--radius-md);
454+
cursor: pointer;
455+
font-size: 0.875rem;
456+
font-weight: 500;
457+
transition: all 0.2s ease;
458+
box-shadow: var(--shadow-md);
459+
z-index: 100;
460+
}
461+
462+
.back-button:hover {
463+
background-color: var(--primary-color);
464+
color: white;
465+
transform: translateX(3px);
466+
}
467+
468+
.back-button i {
469+
font-family: 'Font Awesome 6 Free';
470+
font-weight: 900;
471+
}
472+
473+
/* Article Reader */
474+
.article-reader,
475+
.work-reader {
476+
max-width: 700px;
477+
margin: 0 auto;
478+
padding: 1rem 0;
479+
}
480+
481+
.work-reader .tag {
482+
display: inline-block;
483+
margin-bottom: 1rem;
484+
}
485+
486+
.work-reader h1 {
487+
font-size: 2.25rem;
488+
margin-bottom: 1rem;
489+
color: var(--text-primary);
490+
line-height: 1.25;
491+
}
492+
493+
.work-reader .meta {
494+
color: var(--text-secondary);
495+
font-size: 0.875rem;
496+
margin-bottom: 2rem;
497+
}
498+
499+
.article-reader .tag {
500+
display: inline-block;
501+
margin-bottom: 1rem;
502+
}
503+
504+
.article-reader h1 {
505+
font-size: 2.25rem;
506+
margin-bottom: 1rem;
507+
color: var(--text-primary);
508+
line-height: 1.25;
509+
}
510+
511+
.article-reader .meta {
512+
color: var(--text-secondary);
513+
font-size: 0.875rem;
514+
margin-bottom: 2rem;
515+
}
516+
517+
.article-body {
518+
color: var(--text-secondary);
519+
line-height: 1.8;
520+
}
521+
522+
.article-body h2 {
523+
font-size: 1.5rem;
524+
margin-top: 2rem;
525+
margin-bottom: 1rem;
526+
color: var(--text-primary);
527+
}
528+
529+
.article-body h3 {
530+
font-size: 1.25rem;
531+
margin-top: 1.5rem;
532+
margin-bottom: 0.75rem;
533+
color: var(--text-primary);
534+
}
535+
536+
.article-body p {
537+
margin-bottom: 1.25rem;
538+
}
539+
540+
.article-body ul,
541+
.article-body ol {
542+
margin-left: 1.5rem;
543+
margin-bottom: 1.25rem;
544+
}
545+
546+
.article-body li {
547+
margin-bottom: 0.5rem;
548+
}
549+
550+
.article-body blockquote {
551+
font-style: italic;
552+
color: var(--text-secondary);
553+
border-left: 4px solid var(--primary-color);
554+
padding-left: 1.5rem;
555+
margin: 1.5rem 0;
556+
}
557+
412558
.article-content h2 {
413559
font-size: 1.5rem;
414560
font-weight: 600;
@@ -473,16 +619,21 @@ footer a:hover {
473619
/* About Page */
474620
.about-layout {
475621
display: flex;
476-
gap: 3rem;
622+
gap: 4rem;
477623
align-items: flex-start;
478-
max-width: 800px;
624+
max-width: 900px;
479625
margin: 0 auto;
480626
}
481627

482628
.about-image {
483629
flex-shrink: 0;
484630
}
485631

632+
.about-image img {
633+
border-radius: var(--radius-lg);
634+
box-shadow: var(--shadow-lg);
635+
}
636+
486637
.about-content {
487638
flex: 1;
488639
}
@@ -491,9 +642,12 @@ footer a:hover {
491642
font-size: 1.5rem;
492643
font-weight: 600;
493644
margin: 2rem 0 1rem;
645+
color: var(--text-primary);
494646
}
495647

496648
.about-content p {
649+
font-size: 1.0625rem;
650+
line-height: 1.8;
497651
margin-bottom: 1rem;
498652
color: var(--text-secondary);
499653
}

‎js/components/WorkItem.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
const WorkItem = ({ title, description, techStack }) => {
1+
const WorkItem = ({ title, description, techStack, onClick }) => {
22
return (
3-
<div className="work-item">
3+
<div className="work-item" onClick={onClick}>
44
<h3>{title}</h3>
55
<p>{description}</p>
66
<div className="tech-stack">
@@ -10,4 +10,4 @@ const WorkItem = ({ title, description, techStack }) => {
1010
</div>
1111
</div>
1212
);
13-
};
13+
};

‎js/data/articles.dev.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
[
2+
{
3+
"id": 1,
4+
"slug": "designing-accessible-components",
5+
"title": "Designing Accessible Components",
6+
"tag": "Accessibility",
7+
"description": "Creating UI components that are usable by everyone, including users with disabilities.",
8+
"date": "May 10, 2024",
9+
"featured": true,
10+
"published": true
11+
}
12+
]

‎js/data/articles.js‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,26 @@
11
const ArticleData = {
22
getAll: async () => {
3-
if (Config.dataSource === 'mock') {
4-
return MockData.articles;
5-
}
3+
const isDev = Config.isDevelopment;
4+
const dataFile = isDev ? 'js/data/articles.dev.json' : 'js/data/articles.json';
5+
const contentDir = isDev ? 'blogs' : 'content/blogs';
66

77
try {
8-
const response = await fetch('js/data/articles.json');
9-
const data = await response.json();
10-
return data.filter(article => article.published);
8+
const response = await fetch(dataFile);
9+
const articles = await response.json();
10+
const publishedArticles = articles.filter(article => article.published);
11+
12+
for (const article of publishedArticles) {
13+
try {
14+
const contentResponse = await fetch(`${contentDir}/${article.slug}.html`);
15+
if (contentResponse.ok) {
16+
article.content = await contentResponse.text();
17+
}
18+
} catch (error) {
19+
console.warn(`Failed to load content for ${article.slug}:`, error);
20+
}
21+
}
22+
23+
return publishedArticles;
1124
} catch (error) {
1225
console.error('Failed to load articles:', error);
1326
return [];
@@ -23,4 +36,4 @@ const ArticleData = {
2336
const articles = await ArticleData.getAll();
2437
return articles.find(article => article.featured && article.published);
2538
}
26-
};
39+
};

‎js/data/articles.json‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
11
[
2-
3-
]
2+
{
3+
"id": 1,
4+
"slug": "designing-accessible-components",
5+
"title": "Designing Accessible Components",
6+
"tag": "Accessibility",
7+
"description": "Creating UI components that are usable by everyone, including users with disabilities.",
8+
"date": "May 10, 2024",
9+
"featured": true,
10+
"published": false
11+
},
12+
{
13+
"id": 2,
14+
"slug": "graceful-degradation",
15+
"title": "Graceful Degradation Strategies",
16+
"tag": "Performance",
17+
"description": "Building resilient applications that work well even when conditions aren't ideal.",
18+
"date": "April 25, 2024",
19+
"featured": false,
20+
"published": false
21+
},
22+
{
23+
"id": 3,
24+
"slug": "user-centered-design",
25+
"title": "User-Centered Design Process",
26+
"tag": "Product Design",
27+
"description": "How to put users at the center of your design workflow.",
28+
"date": "April 10, 2024",
29+
"featured": false,
30+
"published": false
31+
}
32+
]

‎js/data/mock.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,23 +57,29 @@ const MockData = {
5757
works: [
5858
{
5959
id: 1,
60+
slug: 'accessible-form-components',
6061
title: 'Accessible Form Components Library',
62+
tag: 'React',
6163
description: 'A comprehensive library of WCAG 2.1 compliant form components.',
6264
techStack: ['React', 'TypeScript', 'WCAG 2.1', 'ARIA'],
6365
featured: true,
6466
published: true
6567
},
6668
{
6769
id: 2,
70+
slug: 'design-system-foundation',
6871
title: 'Design System Foundation',
72+
tag: 'Design',
6973
description: 'Foundational design tokens and patterns for consistent product design.',
7074
techStack: ['CSS Variables', 'Design Tokens', 'Figma'],
7175
featured: true,
7276
published: true
7377
},
7478
{
7579
id: 3,
80+
slug: 'progressive-image-loading',
7681
title: 'Progressive Image Loading',
82+
tag: 'Performance',
7783
description: 'Image optimization with graceful degradation strategies.',
7884
techStack: ['JavaScript', 'Web Performance'],
7985
featured: false,

0 commit comments

Comments
 (0)