-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (119 loc) · 7.49 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Samantha Jarrah</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link rel="icon" href="sj_favicon.ico" type="image/x-icon">
<script src='main.js'></script>
</head>
<body>
<div class="overlay"></div>
<nav class="navbar" id="top">
<!-- Logo -->
<div class="logo">SJ</div>
<!-- Navigation menu -->
<ul class="nav-links">
<div class="menu">
<li><a href="#top">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</div>
</ul>
</nav>
<div class="yellow-background">
<header>
<h1 class="header">Samantha Jarrah<img src="images/circlePortraitSmall.png"></h1>
</header>
<div class="center-about-me">
<p class="about-me-text">
I am an aspiring software engineer currently pursuing my second bachelor's degree in computer science at Oregon State University.
While my previous career as a middle school band director allowed me to foster creativity and inspire young minds, I have discovered
a deep passion for technology and programming. Transitioning into the field of software engineering has been an exciting and
rewarding journey for me, as I enjoy the logical thinking and problem-solving aspects it entails. My experience in education has
honed my communication and leadership skills, which I believe will be invaluable in a collaborative software development environment.
I am eager to combine my musical background with my newfound technical expertise to create innovative and user-friendly software
solutions. I am committed to expanding my knowledge and skills in programming languages, algorithms, and software
development methodologies to build a successful career in the ever-evolving field of technology.
</p>
</div>
</div>
<div class="projects-page">
<section id="projects"><h2>Projects</h2></section>
<article class="gallery">
<figure class="project-example">
<img
src="images/space-invaders-game-pygame-resized.png"
alt="Screenshot of Space Invaders Type Game Built Using Pygame"/>
<figcaption>Space Invaders Type Game Built Using Pygame</figcaption>
<button onclick="location.href='https://github.com/samantha-jarrah/Space_Invaders'" type="button">Code Repo</button>
</figure>
<figure class="project-example">
<img
src="images/rock-paper-scissors-game-resized.png"
alt="Screenshot of rock paper scissors console game" />
<figcaption>Rock Paper Scissors Console Game Written in Python</figcaption>
<button onclick="location.href='https://github.com/samantha-jarrah/rock_paper_scissors'" type="button">Code Repo</button>
</figure>
<figure class="project-example">
<img
src="images/vocabulary-worksheet-generator-cropped.png"
alt="Screenshot of vocabulary worksheet generator project" />
<figcaption>Vocabulary Worksheet Generator - OpenAI API</figcaption>
<button onclick="location.href='https://github.com/samantha-jarrah/Hackathon-Spring-2023'" type="button">Code Repo</button>
</figure>
<figure class="project-example">
<img
src="images/checkers-console-game-resized.png"
alt="Screenshot of Checkers Console Game Written in Python"/>
<figcaption>Checkers Console<br>Game</figcaption>
<button onclick="location.href='https://github.com/samantha-jarrah/Checkers-Console-Game-Python'" type="button">Code Repo</button>
</figure>
<figure class="project-example">
<img
src="images/mental-health-instrumentalists-vs-noninstrumentalists-resized.png"
alt="Screenshot of Graph comparing self reported mental health conditions of instrumentalists versus non-instrumentalists"/>
<figcaption>Self-Reported Mental Health Conditions: Instrumentalists</figcaption>
<button onclick="location.href='https://github.com/samantha-jarrah/chum_bucket_supreme'" type="button">Code Repo</button>
</figure>
</article>
</div>
<div class="yellow-background">
<section id="contact">
<h2>Contact</h2>
<div class="icons">
<a href="https://github.com/samantha-jarrah"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
<a href="https://www.linkedin.com/in/samantha-jarrah-43a653234/"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg></a>
</div>
<!-- <p class="email-text">
<a href="mailto:[email protected]">[email protected]</a>
</p> -->
<form method="post" action="https://forms.un-static.com/forms/b36acc1952fa7b50b0d6d09dd33acb463ecb3084">
<fieldset>
<legend>Please your information and a message below.</legend>
<label for="firstName" class="required">First Name</label>
<input type="text" name="firstName" id="firstName" required placeholder="First Name" autofocus />
<label for="lastName" class="required">First Name</label>
<input type="text" name="lastName" id="lastName" required placeholder="Last Name" />
<label for="email" class="required">Email</label>
<input type="email"
name="email" id="email"
size="30" maxlength="100"
required
pattern="[^ @]+@[^ @]+.[a-z]+"
placeholder="[email protected]" />
<label for="message">Please leave your message here</label>
<textarea name="message" id="message" placeholder="message"></textarea>
<label for="submit"></label>
<button type="submit" id="submit">Submit</button>
</fieldset>
</form>
<p class="copyright">© Samantha Jarrah</p>
</section>
</div>
<main>
</main>
</body>
</html>