all-an.github.io/index.html at main · all-an/all-an.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>About — Allan Pereira Abrahão</title>
  <style>
    :root {
      --color-background-primary:   #111113;
      --color-background-secondary: #1a1a1e;
      --color-text-primary:         #e8e8ea;
      --color-text-secondary:       #9898a0;
      --color-text-tertiary:        #5e5e66;
      --color-border-tertiary:      #232328;
      --border-radius-md:           7px;
      --font-mono:                  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--color-background-primary); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
    .wrap { max-width: 820px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }

    /* nav */
    .nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; }
    .nav a { font-size: 18px; color: var(--color-text-secondary); text-decoration: none; }
    .nav a:hover { color: var(--color-text-primary); }

    /* header */
    .name { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.4rem; text-align: left; }
    .tagline { font-size: 22px; color: var(--color-text-secondary); margin-bottom: 2.5rem; line-height: 1.5; text-align: justify; text-align-last: left; }

    /* section */
    .section { margin-bottom: 2.25rem; }
    .section-label { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary); margin-bottom: 0.75rem; }
    .section p { font-size: 20px; color: var(--color-text-secondary); line-height: 1.7; text-align: justify; }

    /* links */
    .links { display: flex; gap: 12px; flex-wrap: wrap; }
    .link { font-size: 18px; color: var(--color-text-secondary); text-decoration: none; padding: 6px 12px; border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); }
    .link:hover { color: var(--color-text-primary); border-color: #3a3a44; }

    /* divider */
    hr { border: none; border-top: 1px solid var(--color-border-tertiary); margin: 2.25rem 0; }
  </style>
</head>
<body>
<div class="wrap">


  <h1 class="name">Allan Pereira Abrahão</h1>
  <p class="tagline">Software developer. Interested in full stack development, programming languages, cryptocurrencies, learning tools and games.</p>

  <hr />

  <div class="section">
    <div class="section-label">About</div>
    <p>Software developer with a focus on building clean, purposeful products. I care about code quality, platform fundamentals, and creating tools that are genuinely useful, whether that's an interactive learning platform, a reference for engineers, or a technical side project built from scratch.</p>
  </div>


  <div class="section">
    <div class="section-label">Contact</div>
    <div class="links">
      <a class="link" href="mailto:allan8tech@gmail.com">allan8tech@gmail.com</a>
      <a class="link" href="https://www.linkedin.com/in/allan-pereira-abrahao/" target="_blank">LinkedIn</a>
      <a class="link" href="https://github.com/all-an" target="_blank">Projects / Github</a>
      <a class="link" href="pages/learn/learn.html">Learn</a>
      <a class="link" href="pages/games/games.html">Games</a>
    </div>
  </div>

</div>
</body>
</html>