ejmoyer.github.io/index.html at master · ejmoyer/ejmoyer.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    <link href="output.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" charset="utf-8" />
    <title>Eric Moyer Portfolio</title>
  </head>
  <body class="bg-jet-black">
    <header class="pt-36 pb-8">
      <h1 class="text-center font-mono text-4xl">Hi, I'm Eric.</h1>
      <p class="text-center p-4">All my life, computers have fascinated me. Now I work with them on a daily basis.</p>
    </header>

    <main class="flex flex-col items-center">
        <div class="py-16 bg-royal-eggplant w-full">
          <h1 class="text-center text-4xl font-mono">KNOWLEDGE</h1>
          <p class="text-center pt-4 italic">What I know, what I'd like to know.</p>
        </div>

        <article class="grid grid-cols-3 justify-items-center relative bottom-8 bg-jet-black pb-16">
          <section class="flex flex-col items-center py-4 border-l-4 border-y-4 border-off-eggplant w-[20vw]">
            <img src="images/languages.png" alt="A computer with a open tag symbol" class="rounded-xl knowledge-img" />
            <h2 class="text-center text-xl font-mono font-bold py-4">LANGUAGES</h2>

            <p class="pb-4 italic">The dialects of code I speak.</p>

            <ul class="flex flex-col items-center">
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
              <li>TypeScript</li>
              <li>PHP</li>
              <li>C#</li>
              <li>Python</li>
              <li>Java</li>
              <li>C/C++</li>
              <li>SQL</li>
            </ul>
          </section>

          <section class="flex flex-col items-center py-4 border-4 border-off-eggplant w-[20vw]">
            <img src="images/tools.png" alt="Crossing screwdriver and wrench" class="rounded-xl knowledge-img" />
            <h2 class="text-center text-xl font-mono font-bold py-4">TOOLS</h2>

            <p class="pb-4 italic">A good tool is just as important as a good plan.</p>

            <ul class="flex flex-col items-center">
              <li>Angular</li>
              <li>Tailwind CSS</li>
              <li>SSMS</li>
              <li>PostgreSQL</li>
              <li>Visual Studio</li>
              <li>Git</li>
              <li>Hyper-V</li>
              <li>Active Directory</li>
            </ul>
          </section>

          <section class="flex flex-col items-center py-4 border-y-4 border-r-4 border-off-eggplant w-[20vw]">
            <img src="images/want-to-learn.png" alt="A book" class="rounded-xl knowledge-img" />
            <h2 class="text-center text-xl font-mono font-bold py-4">WHAT'S NEXT?</h2>

            <p class="pb-4 italic">An endless journey of learning awaits.</p>

            <ul class="flex flex-col items-center">
              <li>React</li>
              <li>Vue</li>
              <li>Laravel</li>
            </ul>
          </section>
      </article>

      <div class="py-16 bg-royal-eggplant w-full">
        <h1 class="text-center text-4xl font-mono">MY PROJECTS</h1>

        <p class="text-center pt-4 italic">Just a few examples of my work.</p>
      </div>

      <article class="grid grid-rows-2 grid-cols-2 w-3/4 gap-4 relative bottom-8">
        <div class="border-4 border-off-eggplant bg-jet-black">
          <div class="flex flex-row items-center justify-around py-4">
            <h3 class="text-2xl">Thaddeus Stevens School Portal Mock-up</h3>
            <img src="images/school-portal.png" alt="" class="projects-img" />
          </div>

          <p class="text-center">This project was made with Python's Flask Web Framework with a MySQL database. It involved working with a
            small 4 person team to partially remake our school's portal. Main features include
            users, assignments, grading, courses, and course sessions.</p>

            <a href="https://github.com/ScottJohnson02/tsct-portal">
              <div class="p-2 my-4 mx-auto bg-off-eggplant w-1/4 flex items-center">
                <img src="images/link.png" class="link-icon" />
                <p class="text-center pl-1">Github link to this project</p>
              </div>
            </a>
        </div>

        <div class="border-4 border-off-eggplant bg-jet-black">
          <div class="flex flex-row items-center justify-around py-4">
            <h3 class="text-2xl">Retirement Home Web Application</h3>
            <img src="images/retirement.png" alt="" class="projects-img" />
          </div>

          <p class="text-center">A two man project that was made in PHP with a MySQL database. It is a fully functional web application that would be
            for a theoretical retirement home. It's features include mutliple types of users, doctor's appointments,
            employee rosters, patient payments, and more.</p>

            <a href="https://github.com/ejmoyer/retirement-home-CSET2020">
              <div class="p-2 my-4 mx-auto bg-off-eggplant w-1/4 flex items-center">
                <img src="images/link.png" class="link-icon" />
                <p class="text-center pl-1">Github link to this project</p>
              </div>
            </a>
        </div>

        <div class="border-4 border-off-eggplant bg-jet-black">
          <div class="flex flex-row items-center justify-around py-4">
            <h3 class="text-2xl">Social Media Web Application</h3>
            <img src="images/social-media.png" alt="" class="projects-img" />
          </div>

          <p class="text-center">This project is created in PHP with MySQL database support. A three
            person project that was based off of Facebook. Features include users, posts,
            friend requests, liking posts, and even videos.</p>

            <a href="https://github.com/BillSpyro/MediaCenter">
              <div class="p-2 my-4 mx-auto bg-off-eggplant w-1/4 flex items-center">
                <img src="images/link.png" class="link-icon" />
                <p class="text-center pl-1">Github link to this project</p>
              </div>
            </a>
        </div>

        <div class="border-4 border-off-eggplant bg-jet-black">
        </div>
      </article>
    </main>

    <footer class="pt-8">
      <p class="text-center text-4xl font-mono">LINKS</p>

      <p class="text-center pt-4 italic">Where you can find me and my projects.</p>

      <div class="py-8 flex flex-row justify-center gap-4">
        <div class="rounded-[50%] border-4 border-off-eggplant">
          <a href="https://github.com/ejmoyer">
            <img src="images/github.png" alt="Github Logo" class="link-img rounded-[50%]" />
          </a>
        </div>

        <div class="rounded-[50%] border-4 border-off-eggplant">
          <a href="https://www.linkedin.com/in/eric-moyer-0705b21a6/">
            <img src="images/linkedin.png" alt="LinkedIn Logo" class="link-img rounded-[50%]" />
          </a>
        </div>
      </div>

      <p class="text-center pb-4">Eric Moyer © 2025</p>
    </footer>
  </body>
</html>