finished project

iamvldmrbrvkv · May 26, 2023 · f74279c · f74279c
1 parent 49320be
commit f74279c
Show file tree

Hide file tree

Showing 26 changed files with 339 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,2 +1,19 @@
 # portfolio_website
 Portfolio Website
+
+For this project, you will build a personal portfolio site, a static website where you can share the projects that you build in this Path. Typically, a portfolio website will have a main page that features different projects that you’ve built and another page that contains contact information, in case someone wants to reach out to you. Occasionally, there are additional pages for each project, detailing the technology used.
+
+Project Objectives:
++ Build a website using HTML, CSS
++ Add at least one interactive feature using JavaScript
++ Use Git version control
++ Use the command line and file navigation
++ Develop locally on your computer
++ Deploy your site to the web using GitHub Pages
++ OPTIONAL: [Buy a custom domain name](https://www.codecademy.com/courses/make-a-website/lessons/setting-up-your-domain/exercises/how-websites-work) and have it point to your GitHub Pages website
+
+Prerequisites:
++ HTML/CSS
++ JavaScript
++ Git and GitHub
++ Command line and file navigation
diff --git a/contact.html b/contact.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <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=Anonymous+Pro&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" type="image/jpg" href="./resourses/images/vladimir_borovikov_shows_his_potrfolio.png"/>
+    <script src="./script.js" defer></script>
+    <title>Contact</title>
+</head>
+<body>
+    <header>
+        <h1>Vladimir Borovikov</h1>
+        <nav>
+            <div class="nav">
+                <ul>
+                    <li><a href="./index.html#about-me">About Me</a></li>
+                    <li><a href="./index.html#projects">Projects</a></li>
+                    <li><a href="./index.html#skills">Skills</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+                <button class="btn-toggle"><img src="./resourses/images/dark_mode_button_sun.png" alt="Dark mode button"></button>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <section id="contact">
+            <h2>Contact</h2>
+            <img class="contact-img" src="./resourses/images/vladimir_borovkov_tells_his_secrets.png" alt="Vladimir Borovikov tells his secrets Memoji">
+            <div class="contact-container">
+                <a href="mailto:[email protected]" target="_blank"><img src="./resourses/images/logos/email_black_on_white_logo.png" alt="Email logo"></a>
+                <a href="https://www.linkedin.com/in/iamvldmrbrvkv/" target="_blank"><img src="./resourses/images/logos/linkedin_white_on_black_logo.png" alt="Linkedin logo"></a>
+                <a href="https://t.me/iamvldmrbrvkv" target="_blank"><img src="./resourses/images/logos/telegram_black_on_white_logo.png" alt="Telegram logo"></a>
+                <a href="https://instagram.com/iamvldmrbrvkv" target="_blank"><img src="./resourses/images/logos/instagram_black_on_white_logo.png" alt="Instagram logo"></a>
+                <a href="https://www.facebook.com/iamvldmrbrvkv" target="_blank"><img src="./resourses/images/logos/facebook_black_on_white_logo.png" alt="Facebook logo"></a>
+                <a href="https://twitter.com/iamvldmrbrvkv" target="_blank"><img src="./resourses/images/logos/twitter_black_on_white_logo.png" alt="Twitter logo"></a>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>From Russia with <span class="heart">♥</span></p>
+    </footer>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <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=Anonymous+Pro&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" type="image/jpg" href="./resourses/images/vladimir_borovikov_shows_his_potrfolio.png"/>
+    <script src="./script.js" defer></script>
+    <title>My Portfolio</title>
+</head>
+<body>
+    <header>
+        <h1>Vladimir Borovikov</h1>
+        <nav>
+            <div class="nav">
+                <ul>
+                    <li><a href="#about-me">About Me</a></li>
+                    <li><a href="#projects">Projects</a></li>
+                    <li><a href="#skills">Skills</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+                <button class="btn-toggle"><img src="./resourses/images/dark_mode_button_sun.png" alt="Dark mode button"></button>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <section id="about-me">
+            <h2>About Me</h2>
+            <div class="about-me-container">
+                <p>Hi, I'm Vladimir Borovikov, a full-stack engeneering student at <a href="https://www.codecademy.com/" target="_blank">Codecademy.</a> In the past I was a musician and art worker, but now I decided become a software engineer. In my spare time I like walking in nature, playing video games and watching coding dreams when i'm sleeping.</p>
+                <img src="./resourses/images/vladimir_borovikov_with_laptop.png" alt="Vladimir Borovikov with laptop Memoji">
+            </div>
+        </section>
+        <section id="projects">
+            <h2>Projects</h2>
+            <div class="projects-conteiner">
+                <p>You can find all of my projects on <a href="https://github.com/iamvldmrbrvkv" target="_blank">GitHub.</a></p>
+                <br>
+                <p><a href="https://iamvldmrbrvkv.github.io/tea-cozy/" target="_blank">Tea Cozy</a> - simple HTML & CSS project.<a href="https://github.com/iamvldmrbrvkv/tea-cozy.git" target="_blank"></a></p>
+                <br>
+                <p><a href="https://iamvldmrbrvkv.github.io/bugs-academy/" target="_blank">Bugs Academy</a> - flexbox project, full of programmers jokes, like 'how to center a div' and other stuff.<a href="https://github.com/iamvldmrbrvkv/tea-cozy.git" target="_blank"></a></p>
+                <br>
+                <p><a href="https://iamvldmrbrvkv.github.io/sunday-league/" target="_blank">Sunday League</a> - responsive website, adaptive for mobile and desktop.<a href="https://github.com/iamvldmrbrvkv/sunday-league.git" target="_blank"></a></p>
+                <br>
+                <p><a href="https://github.com/iamvldmrbrvkv/mysterious-organism.git" target="_blank">Mysterious Organism</a> - JavaScript project about DNA and mutations.</p>
+                <br>
+                <p><a href="https://github.com/iamvldmrbrvkv/credit-card-checker.git" target="_blank">Credit Card Checker</a> - JavaScript project with <a href="https://en.wikipedia.org/wiki/Luhn_algorithm" target="_blank">Luhn algoritm</a> that makes credit cards verification.</p>
+                <br>
+                <p><a href="https://github.com/iamvldmrbrvkv/mixed_messages.git" target="_blank">Mixed Messages</a> - JavaScript project that generates random messages each time a user runs the program.</p>
+            </div>
+        </section>
+        <section id="skills">
+            <h2>Skills</h2>
+            <div class="skills-container">
+                <img src="./resourses/images/logos/html5_black_on_white_logo.png" alt="HTML5 logo">
+                <img src="./resourses/images/logos/css3_black_on_white_logo.png" alt="CSS3 logo">
+                <img src="./resourses/images/logos/terminal_black_on_white_logo.png" alt="Terminal logo">
+                <img src="./resourses/images/logos/javascript_white_on_black_logo.png" alt="JavaScript logo">
+                <img src="./resourses/images/logos/git_black_on_white_logo.png" alt="Git logo">
+                <img src="./resourses/images/logos/github_white_on_black_logo.png" alt="GitHub logo">
+                <img src="./resourses/images/logos/node_black_on_white_logo.png" alt="Node.js logo">
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>From Russia with <span class="heart">♥</span></p>
+    </footer>
+</body>
+</html>
diff --git a/resourses/.DS_Store b/resourses/.DS_Store
diff --git a/resourses/images/.DS_Store b/resourses/images/.DS_Store
diff --git a/resourses/images/dark_mode_button_sun.png b/resourses/images/dark_mode_button_sun.png
diff --git a/resourses/images/logos/.DS_Store b/resourses/images/logos/.DS_Store
diff --git a/resourses/images/logos/css3_black_on_white_logo.png b/resourses/images/logos/css3_black_on_white_logo.png
diff --git a/resourses/images/logos/email_black_on_white_logo.png b/resourses/images/logos/email_black_on_white_logo.png
diff --git a/resourses/images/logos/facebook_black_on_white_logo.png b/resourses/images/logos/facebook_black_on_white_logo.png
diff --git a/resourses/images/logos/git_black_on_white_logo.png b/resourses/images/logos/git_black_on_white_logo.png
diff --git a/resourses/images/logos/github_white_on_black_logo.png b/resourses/images/logos/github_white_on_black_logo.png
diff --git a/resourses/images/logos/html5_black_on_white_logo.png b/resourses/images/logos/html5_black_on_white_logo.png
diff --git a/resourses/images/logos/instagram_black_on_white_logo.png b/resourses/images/logos/instagram_black_on_white_logo.png
diff --git a/resourses/images/logos/javascript_white_on_black_logo.png b/resourses/images/logos/javascript_white_on_black_logo.png
diff --git a/resourses/images/logos/linkedin_white_on_black_logo.png b/resourses/images/logos/linkedin_white_on_black_logo.png
diff --git a/resourses/images/logos/node_black_on_white_logo.png b/resourses/images/logos/node_black_on_white_logo.png
diff --git a/resourses/images/logos/telegram_black_on_white_logo.png b/resourses/images/logos/telegram_black_on_white_logo.png
diff --git a/resourses/images/logos/terminal_black_on_white_logo.png b/resourses/images/logos/terminal_black_on_white_logo.png
diff --git a/resourses/images/logos/twitter_black_on_white_logo.png b/resourses/images/logos/twitter_black_on_white_logo.png
diff --git a/resourses/images/vladimir_borovikov_shows_his_potrfolio.png b/resourses/images/vladimir_borovikov_shows_his_potrfolio.png
diff --git a/resourses/images/vladimir_borovikov_with_laptop.png b/resourses/images/vladimir_borovikov_with_laptop.png
diff --git a/resourses/images/vladimir_borovkov_tells_his_secrets.png b/resourses/images/vladimir_borovkov_tells_his_secrets.png
diff --git a/script.js b/script.js
@@ -0,0 +1,22 @@
+let darkTheme;
+
+if (window.localStorage.getItem("darkTheme") === "true") {
+    darkTheme = true;
+} else {
+    darkTheme = false;
+    window.localStorage.setItem("darkTheme", darkTheme);
+};
+
+window.onload = function() {
+    darkTheme ? bodyElement.classList.add('dark-theme') : bodyElement.classList.remove('dark-theme');
+};
+
+let element = document.querySelector('button');
+
+let bodyElement = document.querySelector('body');
+
+element.onclick = function() {
+    darkTheme = !darkTheme;
+    window.localStorage.setItem("darkTheme", darkTheme);
+    darkTheme ? bodyElement.classList.add('dark-theme') : bodyElement.classList.remove('dark-theme');
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,179 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Anonymous Pro', monospace;
+}
+
+body {
+    color: black;
+    background: white;
+}
+
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    padding: 10px;
+    flex-wrap: wrap;
+}
+
+h1 {
+    margin: auto 30px;
+    text-align: center;
+}
+
+.nav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    margin: auto 30px;
+    flex-wrap: wrap;
+}  
+
+.nav li {
+    display: inline-block;
+}
+
+a {
+    color: black;
+    text-decoration-color: red;
+}
+
+a:visited {
+    color: red;
+    text-decoration-color: black;
+}
+
+a:hover {
+    color: black;
+    text-decoration: none;
+}
+
+.btn-toggle {
+    margin-left: 10px;
+    border: none;
+    background: inherit;
+    cursor: pointer;
+}
+
+.btn-toggle img {
+    height: 25px;
+}
+
+.about-me-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid black;
+    padding: 10px;
+}
+
+.about-me-container img {
+    height: 350px;
+}
+
+.projects-conteiner {
+    border-bottom: 1px solid black;
+    padding: 10px;
+}
+
+.skills-container {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid black;
+    padding: 10px;
+}
+
+.skills-container img {
+    height: 25px;
+}
+
+h2 {
+    text-align: center;
+}
+
+h2,
+p {
+    margin: 10px 50px;
+}
+
+.contact-container {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid black;
+    padding: 10px;
+}
+
+.contact-img {
+    height: 350px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.contact-container img {
+    height: 25px;
+}
+
+footer {
+    text-align: center;
+    border-bottom: 1px solid black;
+}
+
+@media only screen and (max-width: 768px) {
+    header {
+        justify-content: center;
+    }
+
+    .nav {
+        margin: auto;
+    }
+
+    .about-me-container {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}
+
+/* Dark Mode styles */
+body.dark-theme {
+    color: #eee;
+    background: rgb(32, 33, 36);
+}
+
+body.dark-theme a {
+    color: white;
+    text-decoration-color: red;
+}
+
+body.dark-theme a:visited {
+    color: #809fff;
+    text-decoration-color: white;
+}
+
+body.dark-theme a:hover {
+    color: white;
+    text-decoration: none;
+}
+
+body.dark-theme .btn-toggle img,
+body.dark-theme .skills-container img,
+body.dark-theme .contact-container img {
+    filter: invert(100%);
+}
+
+body.dark-theme header {
+    border-top: 1px solid white;
+    border-bottom: 1px solid white;
+}
+
+body.dark-theme .about-me-container,
+body.dark-theme .projects-conteiner,
+body.dark-theme .skills-container,
+body.dark-theme .contact-container,
+body.dark-theme footer {
+    border-bottom: 1px solid white;
+}