-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (139 loc) · 7.18 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
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeorgi Bernard</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;1,300;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.20.0/css/mdb.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="mainbg pt-3">
<nav class="navbar navbar-expand-md bg sticky-top">
<a href="#" class="navbar-brand fs-3 ms-3 text-white">Jeorgi Bernard</a>
<button class="navbar-toggler m-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<i class="fa-solid fa-bars"></i>
</button>
<div class="collapse navbar-collapse ul-bg" id="btn">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="https://docs.google.com/document/d/1oxh5GqTKH4nTumgg9ZTxvijLtRu109n3bz4OsnrmRr8/edit?usp=sharing" class="nav-link mx-3 fs-4 text-white" target="_blank">Resume</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link mx-3 fs-4 text-white">About</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link mx-3 fs-4 text-white">Skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link mx-3 fs-4 text-white">Contact</a>
</li>
<!-- LinkedIn Icon -->
<li class="nav-item">
<a href="https://www.linkedin.com/in/jeorgi-bernard-3704b6144/" target="_blank" class="nav-link fs-4 text-white"><i class="fab fa-linkedin"></i></a>
</li>
<!-- GitHub Icon -->
<li class="nav-item">
<a href="https://github.com/JeorgiBernard" target="_blank" class="nav-link fs-4 text-white"><i class="fab fa-github"></i></a>
</li>
</ul>
</div>
</nav>
<div class="m-5 p-5">
<img src="./images/JB-Logo smaller.png" alt="JB Logo" class="img-fluid mx-auto d-block p-3 animated fadeInDown" data-wow-duration="3s">
</div>
<section id="about"></section>
<div class="container m-2 ">
<div class="row d-flex align-items-center">
<div class="col-md-6">
<img src="./images/headshot1 smaller.png" alt="Professional head shot of white woman with long brown hair and glasses" class="img-fluid">
</div>
<div class="col-md-6">
<h3 class="text-center">About</h3>
<p class="fs-5">Hello! My name is Jeorgi and I’m a mom to three wonderful kids. When my children started school I decided I wanted to start looking into a new career in tech. I saw an article online about a program called Tech Moms who taught the basics of coding and how to get started in various tech fields. I didn’t realize how many options were out there and it made me excited about a new adventure. I really enjoyed the coding parts of Tech Moms so when it was completed I looked for new courses in coding. I found a more in-depth web development course that covered several different coding languages and the basics of UX/UI design. I also decided to take a class in software QA automation coding. The tech field is always expanding and being a lifelong learner the tech field seems like a great fit for my new career path.</p>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<section id="skills"></section>
<div class="container mt-5">
<div class="row">
<div class="col-md-12 text-center mb-4">
<div class="shadow-lg mb-2 rounded">
<h2 class="animated-text p-2 bg-hover" >Skills</h2>
</div>
</div>
<div class="col-md-12 hoverable bg-hover">
<div class=" m-3 p-3">
<div class="row shadow-lg pt-2 pb-2">
<div class="col-sm-6 text-center fs-5">
<p class="mb-2">Html</p>
<p class="mb-2">CSS</p>
<p class="mb-2">JavaScript</p>
<p class="mb-2">TypeScript</p>
<p class="mb-2">Selenium</p>
<p class="mb-2">WordPress</p>
</div>
<div class="col-sm-6 text-center fs-5">
<p class="mb-2">VS code</p>
<p class="mb-2">GitHub</p>
<p class="mb-2">File Zilla</p>
<p class="mb-2">Figma</p>
<p class="mb-2">Trello</p>
<p class="mb-2">Jira</p>
<p class="mb-2">Postman</p>
<p class="mb-2">Lucid Chart</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<section id="contact"></section>
<div class="container mt-5 pb-3">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="mb-4 text-center">Contact Me</h2>
<!-- Formspree form -->
<form action="https://formspree.io/f/xvoepoyn" method="POST">
<div class="form-group p-2">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group p-2">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="_replyto" required>
<!-- Note: The name attribute should be set to "_replyto" for Formspree to capture the user's email -->
</div>
<div class="form-group p-2">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="custom-btn custom-btn-primary pt-2">Submit</button>
</form>
</div>
</div>
</div>
<br>
<br>
<br>
<footer>
<p>© 2023 Jeorgi Bernard.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/mdb.min.js"></script>
</body>
</html>