angular-from-zero/linkedin-image.html at master · dev48v/angular-from-zero · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TechFromZero - Day 17 - Angular</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 100vw; height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #f1f5f9; display: flex; overflow: hidden;
  }
  .left { width: 45%; padding: 5% 4%; display: flex; flex-direction: column; justify-content: center; }
  .series-badge {
    display: inline-block; background: linear-gradient(90deg, #6d28d9, #7c3aed);
    color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 3px;
    padding: 10px 24px; border-radius: 30px; margin-bottom: 28px; width: fit-content;
  }
  .day-number {
    font-size: 120px; font-weight: 900;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1; margin-bottom: 12px;
  }
  .tech-name { font-size: 56px; font-weight: 700; color: #f8fafc; margin-bottom: 8px; }
  .project-name { font-size: 24px; color: #94a3b8; margin-bottom: 36px; }
  .tag-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .tag {
    background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24; font-size: 18px; font-weight: 600; padding: 8px 20px; border-radius: 8px;
  }
  .right { flex: 1; padding: 5% 4% 5% 2%; display: flex; flex-direction: column; justify-content: center; }
  .arch-title { font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fbbf24; margin-bottom: 28px; }
  .arch-flow { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; margin-bottom: 44px; }
  .arch-box {
    background: rgba(30, 41, 59, 0.8); border: 1.5px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px; padding: 14px 16px; text-align: center; min-width: 90px;
  }
  .arch-box .label { font-size: 13px; color: #94a3b8; margin-bottom: 6px; }
  .arch-box .name { font-size: 17px; font-weight: 700; color: #e2e8f0; }
  .arch-arrow { color: #fbbf24; font-size: 32px; padding: 0 8px; font-weight: 700; }
  .steps-title { font-size: 20px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fbbf24; margin-bottom: 20px; }
  .step-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  .step-list li { font-size: 17px; color: #cbd5e1; display: flex; align-items: center; gap: 12px; }
  .step-num {
    background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff;
    font-size: 15px; font-weight: 700; width: 32px; height: 32px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .footer-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #6d28d9, #f59e0b, #6d28d9); }
  .github-url { position: absolute; bottom: 24px; right: 48px; font-size: 18px; color: #64748b; font-weight: 600; }
  .beginner-badge {
    position: absolute; top: 32px; right: 48px;
    background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24; font-size: 16px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; padding: 8px 20px; border-radius: 24px;
  }
</style>
</head>
<body>
  <div class="beginner-badge">🎯 Beginner Guide</div>
  <div class="left">
    <div class="series-badge">🚀 TechFromZero Series</div>
    <div class="day-number">DAY 17</div>
    <div class="tech-name">Angular</div>
    <div class="project-name">Movie Search Frontend</div>
    <div class="tag-row">
      <span class="tag">Angular 21</span>
      <span class="tag">TypeScript</span>
      <span class="tag">Signals</span>
      <span class="tag">OMDB API</span>
    </div>
  </div>
  <div class="right">
    <div class="arch-title">📐 Component Architecture</div>
    <div class="arch-flow">
      <div class="arch-box"><div class="label">User</div><div class="name">Search</div></div>
      <div class="arch-arrow">→</div>
      <div class="arch-box"><div class="label">Service</div><div class="name">HttpClient</div></div>
      <div class="arch-arrow">→</div>
      <div class="arch-box"><div class="label">Proxy</div><div class="name">NestJS API</div></div>
      <div class="arch-arrow">→</div>
      <div class="arch-box"><div class="label">External</div><div class="name">OMDB</div></div>
    </div>
    <div class="steps-title">🧱 Step-by-Step Commits</div>
    <ul class="step-list">
      <li><span class="step-num">1</span> Project scaffold</li>
      <li><span class="step-num">2</span> Environment + proxy</li>
      <li><span class="step-num">3</span> TypeScript models</li>
      <li><span class="step-num">4</span> MovieService + interceptor</li>
      <li><span class="step-num">5</span> Favorites with signals</li>
      <li><span class="step-num">6</span> Navbar + routing</li>
      <li><span class="step-num">7</span> Search page + cards</li>
      <li><span class="step-num">8</span> Pagination component</li>
      <li><span class="step-num">9</span> Movie detail + ratings</li>
      <li><span class="step-num">10</span> Favorites page</li>
      <li><span class="step-num">11</span> Dark theme + polish</li>
      <li><span class="step-num">12</span> README + deploy</li>
    </ul>
  </div>
  <div class="footer-bar"></div>
  <div class="github-url">🔗 github.com/dev48v/angular-from-zero</div>
</body>
</html>