inviro.github.io/index.html at master · Inviro/inviro.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
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
173
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Site Metadata Start-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="Abraham Chen">
    <meta name="description" content="Portfolio of Abraham Chen, embedded software engineer specializing in Linux systems, kernel development, and hardware integration.">
    <!-- Site Metadata End -->

    <!-- Favicon Code Start -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3b606b">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <!-- Favicon Code End -->

    <!-- Preloading Content Start -->
    <link rel="preload" as="font" href="/webfonts/fa-solid-900.woff2" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" as="font" href="/webfonts/fa-brands-400.woff2" type="font/woff2" crossorigin="anonymous">
    <!-- Preloading Content End -->

    <!-- Async Loading Content Start -->
    <!-- <link rel="stylesheet" href="/styles/style.css" media="print" onload="this.media='all'; this.onload=null;"> -->
    <link rel="stylesheet" href="/styles/style.min.css" media="print" onload="this.media='all'; this.onload=null;">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@700&display=swap" media="print" onload="this.media='all'; this.onload=null;">
    <link rel="stylesheet" href="/styles/fontawesome-all.min.css" media="print" onload="this.media='all'; this.onload=null;">
    <!-- Async Loading Content End -->
    <!-- <script defer src = "/scripts/project-loader.js"></script> -->
    <script defer src="/scripts/project-loader.min.js"></script>
    <link rel="canonical" href="https://abrahamchen.com/">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Abraham Chen | Embedded Systems & Linux Developer">
    <meta property="og:description" content="Explore the portfolio of Abraham Chen, an embedded software engineer specializing in Linux systems, kernel development, and hardware integration.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://abrahamchen.com/">
    <meta property="og:image" content="https://abrahamchen.com/apple-touch-icon.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Abraham Chen | Embedded Systems & Linux Developer">
    <meta name="twitter:description" content="Explore the portfolio of Abraham Chen, an embedded software engineer specializing in Linux systems, kernel development, and hardware integration.">
    <meta name="twitter:image" content="https://abrahamchen.com/apple-touch-icon.png">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Abraham Chen",
        "url": "https://abrahamchen.com/",
        "jobTitle": "Embedded Software Engineer",
        "description": "Embedded software engineer specializing in Linux systems, kernel development, and hardware integration.",
        "sameAs": [
          "https://github.com/inviro",
          "https://www.linkedin.com/in/abraham-h-chen"
        ]
      }
    </script>
    <title>Abraham Chen | Embedded Systems & Linux Developer</title>
  </head>
  <body>
    <header>
      <nav class="menu-wrap">
        <input type="checkbox" class="toggler" aria-label = "menu">
        <div class="burger"><div></div></div>
        <div class="menu">
          <div>
            <div>
              <ul class="nav-links">
                <li><a class = "nav-link" href="#home">Home</a></li>
                <li><a class = "nav-link" href="#about">About</a></li>
                <li><a class = "nav-link" href="#projects">Projects</a></li>
                <li><a class = "nav-link" href="#contact">Contact</a></li>
                <li><a class = "nav-link" href="/documents/Resume_AC.pdf" target="_blank" rel="noopener noreferrer nofollow">Resume</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
      <div class="logo-wrap" id = "home">
        <img class="logo noselect" src="/apple-touch-icon.png" alt="icon" height="180" width="180">
        <h1 class="logo-text noselect">Abraham Chen</h1>
        <div id="visits-display">
          <strong class="noselect">Getting Visits Data...</strong>
        </div>
        <canvas id="particle-canvas"></canvas>
        <div id="color-theme">
          <p>Theme</p>
          <input type="radio" name="theme-picker" class="theme" id="theme-light" checked="checked">
          <label for="theme-light"></label>
          <input type="radio" name="theme-picker" class="theme" id="theme-dark">
          <label for="theme-dark"></label>
        </div>
      </div>
    </header>
    <div id="bg-image-wrap">
      <main>
        <section id = "about">
          <h1 class="heading">About Me</h1>
          <div class="about-container">
            <img class="about-image" src="/images/profile.jpg" alt="Profile Picture">
            <p class="about-intro">I'm an Embedded Software Engineer with 4+ years of experience building efficient, reliable software for Linux-based systems. Passionate about low level programming, real-time systems, and solving complex problems with clean, maintainable code.</p>
            <div class="about-content">
              <div class="features-grid">
                <div class="feature-card">
                  <i class="fas fa-sliders-h"></i>
                  <h3>System-Level Thinking</h3>
                  <p>Designing solutions with performance, reliability and scalability in mind.</p>
                </div>
                <div class="feature-card">
                  <i class="fas fa-microchip"></i>
                  <h3>Resource Optimization</h3>
                  <p>Writing efficient code for memory, CPU and power constrained systems.</p>
                </div>
                <div class="feature-card">
                  <i class="fas fa-cog"></i>
                  <h3>Reliable & Robust</h3>
                  <p>Building software that works in the real world, every time.</p>
                </div>
                <div class="feature-card">
                  <i class="fas fa-brain"></i>
                  <h3>Continuous Learning</h3>
                  <p>Staying up to date with tools, frameworks and emerging technologies.</p>
                </div>
              </div>
          </div>
        </section>
        <section id = "projects">
          <h1 class="heading">Projects</h1>
          <div id="project-wrap">
            <div class = "project" id="project-0">
              <h2 class="title">inviro.github.io</h2>
              <p class="subtitle">Personal Website | HTML, CSS, JavaScript</p>
              <p class="caption" id="caption-0"></p>
              <div class="repo-stats" id="repo-stats-0"></div>
            </div>
            <div class = "project" id="project-1">
              <h2 class="title">Illud</h2>
              <p class="subtitle">Smart Text Editor | Java</p>
              <p class="caption" id="caption-1"></p>
              <div class="repo-stats" id="repo-stats-1"></div>
            </div>
            <div class = "project" id="project-2">
              <h2 class="title">CaptiveFi</h2>
              <p class="subtitle">Automating Wifi Logins | Python</p>
              <p class="caption" id="caption-2"></p>
              <div class="repo-stats" id="repo-stats-2"></div>
            </div>
            <div class = "project" id="project-3">
              <h2 class="title">Cerberus</h2>
              <p class="subtitle">Analyzing Security Footage | Python</p>
              <p class="caption" id="caption-3"></p>
              <div class="repo-stats" id="repo-stats-3"></div>
            </div>
          </div>
        </section>
      </main>
      <footer id = "contact">
        <div>
          <a href="mailto:abrahamhchen@gmail.com" aria-label = "Email link"><i class="fa fa-border fa-envelope"></i></a>
          <a href="https://github.com/inviro" aria-label = "Github link"><i class="fab fa-border fa-github"></i></a>
          <a href="https://www.linkedin.com/in/abraham-h-chen" aria-label = "Linkedin link"><i class="fab fa-border fa-linkedin"></i></a>
        </div>
        <p>
          Designed by Abraham Chen
        </p>
      </footer>
    </div>
  </body>
</html>