Merge pull request #4 from leingenm/rsschool-cv-html

CV #3: HTML & CSS
leingenm · Jul 8, 2024 · db51798 · db51798
2 parents 4487995 + f205fbc
commit db51798
Show file tree

Hide file tree

Showing 6 changed files with 250 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # rsschool-cv
 
-<https://leingenm.github.io/rsschool-cv>
+<https://leingenm.github.io/rsschool-cv/cv>
+
+<https://leingenm.github.io/rsschool-cv/>
diff --git a/assets/github-mark.svg b/assets/github-mark.svg
diff --git a/assets/rs-school-logo.svg b/assets/rs-school-logo.svg
diff --git a/index.html b/index.html
@@ -1,12 +1,149 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CV</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./styles/style.css">
 </head>
-<body>
-    <h1>CV</h1>
+
+<body class="container">
+    <header>
+        <nav class="navbar">
+            <ul>
+                <li><a href="#about-me">About me</a></li>
+                <li><a href="#contacts">Contacts</a></li>
+                <li><a href="#skills">Skills</a></li>
+                <li><a href="#work-exp">Work Experience</a></li>
+                <li><a href="#code">Code Examples</a></li>
+                <li><a href="#edu">Education</a></li>
+                <li><a href="#lang">Languages</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <section>
+
+        </section>
+
+        <section id="about-me">
+
+
+            <div class="row">
+                <div class="block">
+                    <img src="./assets/avatar.png" alt="avatar">
+                </div>
+
+                <div class="block">
+                    <h1>Roman Maher</h1>
+                    <h2>Test Automation Engineer</h2>
+
+                    <h2>About me</h2>
+                    <p>
+                        Currently, I am working as a Test Automation Engineer. Throughout my career, I gained experience
+                        building automation frameworks using Java and C# programming languages. I'm interested in
+                        deepening my
+                        knowledge of JavaScript for test automation and web development.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <section id="contacts">
+            <h2>Contacts</h2>
+            <ul>
+                <li>Email: [email protected]</li>
+                <li>LinkedIn: <a href="https://www.linkedin.com/in/roman-maher">Roman Maher</a></li>
+                <li>GitHub: <a href="https://github.com/leingenm">leingenm</a></li>
+            </ul>
+        </section>
+
+        <section id="skills">
+            <h2>Skills</h2>
+            <ol>
+                <li>Programming Languages</li>
+                <ul>
+                    <li>C#</li>
+                    <li>Java</li>
+                    <li>JavaScript</li>
+                </ul>
+                <li>Framework</li>
+                <ul>
+                    <li>Selenium</li>
+                    <li>Selenide</li>
+                    <li>WDIO</li>
+                    <li>NUnit</li>
+                    <li>JUnit</li>
+                    <li>Spring</li>
+                </ul>
+                <li>Tools</li>
+                <ul>
+                    <li>Git</li>
+                    <li>Docker</li>
+                    <li>Postman</li>
+                    <li>Jira</li>
+                    <li>Confluence</li>
+            </ol>
+        </section>
+
+        <section id="work-exp">
+            <h2>Work Experience</h2>
+            <ul>
+                <li><b>iTechArt Group</b> – Quality Assurance Automation Engineer / Feb 2021 - Jun 2022</li>
+                <li><b>Vention Teams</b> – Test Automation Engineer / Jun 2022 - Present moment</li>
+            </ul>
+        </section>
+
+        <section id="code">
+            <h2>Code Examples</h2>
+            <pre>
+                <code>
+    return new Promise((resolve, reject) => {
+        fetch('https://jsonplaceholder.typicode.com/posts/1')
+            .then(response => {
+            if (response.ok) {
+                resolve(response.json())
+            } else {
+                reject(new Error("Request failed"))
+            }
+            })
+        })
+                </code>
+            </pre>
+        </section>
+
+        <section id="edu">
+            <h2>Education</h2>
+            <ul>
+                <li>BELARUSIAN STATE UNIVERSITY OF INFORMATICS AND RADIOELECTRONICS - Bachelor's degree (2015 - 2021)
+                </li>
+                <li>EPAM Java Lab (2018-2019)</li>
+                <li>iTechArt Automation QA Lab (2020-2021)</li>
+            </ul>
+        </section>
+
+        <section id="lang">
+            <h2>Languages</h2>
+            <ul>
+                <li>Russian - Native</li>
+                <li>Belarusian - Native</li>
+                <li>English - B2</li>
+            </ul>
+    </main>
+
+    <footer>
+        <a href="https://github.com/leingenm/">
+            <img src="./assets/github-mark.svg" alt="GitHub logo" id="gh-logo">
+        </a>
+
+        <p>2024</p>
+
+        <a href="https://rs.school/courses/javascript-ru">
+            <img src="./assets/rs-school-logo.svg" alt="RS School logo" id="rs-logo">
+        </a>
+    </footer>
 </body>
+
 </html>
diff --git a/style.css b/style.css
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,105 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    font-size: 18px;
+}
+
+a {
+    text-decoration: none;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    width: 80%;
+    margin: 20px auto;
+    background: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.container main {
+    padding: 20px;
+}
+
+/* Navbar */
+
+.navbar {
+    width: 100%;
+    background-color: #333;
+    overflow: hidden;
+}
+
+.navbar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+}
+
+.navbar ul li {
+    float: left;
+}
+
+.navbar ul li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 20px;
+}
+
+.navbar ul li a:hover {
+    background-color: #575757;
+}
+
+/* Align multiple blocks */
+
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.block {
+    margin: 10px;
+}
+
+/* Code */
+pre {
+    background: #f4f4f4;
+    padding: 0;
+    overflow: auto;
+    border-left: 3px solid #f36d33;
+}
+
+code {
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    display: block;
+}
+
+/* Footer */
+
+footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+}
+
+#rs-logo {
+    width: 80px;
+    height: 80px;
+}
+
+#gh-logo {
+    width: 50px;
+    height: 50px;
+}