diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..50b7115
Binary files /dev/null and b/.DS_Store differ
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..c63b7c6
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/rsschool-cv.iml" filepath="$PROJECT_DIR$/.idea/rsschool-cv.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/rsschool-cv.iml b/.idea/rsschool-cv.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/rsschool-cv.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..c00db99
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="BranchesTreeState">
+    <expand>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="LOCAL_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+      <path>
+        <item name="ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="REMOTE_ROOT" type="e8cecc67:BranchNodeDescriptor" />
+        <item name="GROUP_NODE:origin" type="e8cecc67:BranchNodeDescriptor" />
+      </path>
+    </expand>
+    <select />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="456a34f9-0218-4a55-9d61-9207c1a18df9" name="Default Changelist" comment="feat: add work experience timeline, projects section, icons">
+      <change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/img/JavaScript-code.jpeg" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
+    </list>
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+        <option value="CSS File" />
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="ProjectId" id="1xxXBctBLpbkdYr89cAXdjk1qiM" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="DefaultHtmlFileTemplate" value="HTML File" />
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="list.type.of.created.stylesheet" value="CSS" />
+    <property name="nodejs_package_manager_path" value="npm" />
+    <property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
+    <property name="vue.rearranger.settings.migration" value="true" />
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="456a34f9-0218-4a55-9d61-9207c1a18df9" name="Default Changelist" comment="" />
+      <created>1631297579781</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1631297579781</updated>
+      <workItem from="1631297581067" duration="3428000" />
+      <workItem from="1631355470906" duration="16867000" />
+      <workItem from="1631540402006" duration="18122000" />
+      <workItem from="1631600991992" duration="54000" />
+      <workItem from="1631601051906" duration="10498000" />
+      <workItem from="1632150426448" duration="5793000" />
+    </task>
+    <task id="LOCAL-00001" summary="feat: add js file, add features to html and css">
+      <created>1631298564146</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1631298564147</updated>
+    </task>
+    <task id="LOCAL-00002" summary="feat: add work experience timeline and link to projects">
+      <created>1631403169700</created>
+      <option name="number" value="00002" />
+      <option name="presentableId" value="LOCAL-00002" />
+      <option name="project" value="LOCAL" />
+      <updated>1631403169700</updated>
+    </task>
+    <task id="LOCAL-00003" summary="feat: add work experience timeline, projects section, icons">
+      <created>1631631788530</created>
+      <option name="number" value="00003" />
+      <option name="presentableId" value="LOCAL-00003" />
+      <option name="project" value="LOCAL" />
+      <updated>1631631788530</updated>
+    </task>
+    <option name="localTasksCounter" value="4" />
+    <servers />
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="3" />
+  </component>
+  <component name="Vcs.Log.Tabs.Properties">
+    <option name="TAB_STATES">
+      <map>
+        <entry key="MAIN">
+          <value>
+            <State />
+          </value>
+        </entry>
+      </map>
+    </option>
+    <option name="oldMeFiltersMigrated" value="true" />
+  </component>
+  <component name="VcsManagerConfiguration">
+    <MESSAGE value="feat: add js file, add features to html and css" />
+    <MESSAGE value="feat: add work experience timeline and link to projects" />
+    <MESSAGE value="feat: add work experience timeline, projects section, icons" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: add work experience timeline, projects section, icons" />
+  </component>
+  <component name="WindowStateProjectService">
+    <state x="0" y="0" key="CommitChangelistDialog2" timestamp="1631631788062">
+      <screen x="0" y="0" width="1366" height="768" />
+    </state>
+    <state x="0" y="0" key="CommitChangelistDialog2/0.0.1366.768@0.0.1366.768" timestamp="1631631788062" />
+    <state x="0" y="23" key="CommitChangelistDialog2/0.23.1366.745@0.23.1366.745" timestamp="1631298563784" />
+    <state x="58" y="46" key="SettingsEditor" timestamp="1631374779037">
+      <screen x="0" y="23" width="1366" height="745" />
+    </state>
+    <state x="58" y="46" key="SettingsEditor/0.23.1366.745@0.23.1366.745" timestamp="1631374779037" />
+    <state x="0" y="224" key="Vcs.Push.Dialog.v2" timestamp="1631631801867">
+      <screen x="0" y="0" width="1366" height="768" />
+    </state>
+    <state x="0" y="224" key="Vcs.Push.Dialog.v2/0.0.1366.768@0.0.1366.768" timestamp="1631631801867" />
+    <state x="0" y="240" key="Vcs.Push.Dialog.v2/0.23.1366.745@0.23.1366.745" timestamp="1631298619197" />
+    <state x="484" y="521" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1631299941955">
+      <screen x="0" y="23" width="1366" height="745" />
+    </state>
+    <state x="484" y="521" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.23.1366.745@0.23.1366.745" timestamp="1631299941955" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/cv.md b/cv.md
new file mode 100644
index 0000000..ee40e50
--- /dev/null
+++ b/cv.md
@@ -0,0 +1,53 @@
+# CV
+
+## Personal details and contact information
+
+**Elena Samoilova**  
+St.Petersburg, Russia  
+Date of birth: 04.09.1985  
+cell: +7-960-267-37-99  
+email: helen-js@mail.ru
+
+## Personal information
+
+I am interested in programming. My goal is to become a senior frontend developer. Currently I don't have experience in this field, but I intend to learn and grow fast. I am persistent, patient and diligent. Also I am good at foreign languages. I am sure it will help me achieve my goal.
+
+## Professional skills
+
+* HTML  
+* CSS  
+* JavaScript  
+* IDE Webstorm
+* Chrome DevTools
+* GitHub
+
+## Code examples
+
+```
+const makeItFunny = (str, n) => {
+  let localString = '';
+  for(let i = 0; i <= str.length - 1; i++){
+    let char = str.charAt(i)
+    if((i + 1) % n == 0){
+      char = char.toUpperCase();
+    }  
+    localString = localString.concat(char);
+  }
+  return localString;
+}
+makeItFunny("I never look back", 3)
+```
+
+## Work experience
+
+typing... please wait
+
+## Education
+
+* 2015 Herzen Russian State Pedagogical University, St.Petersburg. Institute of Postgraduate Education, English teacher in secondary school.  
+* 2014 Brigham Young University-Idaho. Oline English classes.  
+* 2008 Perm State University, Perm. Faculty of Geography, Nature Management.
+
+## Foreign languages
+
+* English (B2 level)
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/img/my-photo.jpeg b/img/my-photo.jpeg
new file mode 100644
index 0000000..a5a825b
Binary files /dev/null and b/img/my-photo.jpeg differ
diff --git a/img/rs_school_logo.jpeg b/img/rs_school_logo.jpeg
new file mode 100644
index 0000000..4dfcde4
Binary files /dev/null and b/img/rs_school_logo.jpeg differ
diff --git a/img/vertical-slider.png b/img/vertical-slider.png
new file mode 100644
index 0000000..b2576ec
Binary files /dev/null and b/img/vertical-slider.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7c3b9ac
--- /dev/null
+++ b/index.html
@@ -0,0 +1,351 @@
+<!Doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="Elena Samoylova">
+    <meta name="keywords" content="HTML, CSS, JavaScript, programming, frontend, cv">
+    <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=Quicksand:wght@300;400;500;600;700&display=swap"
+            rel="stylesheet">
+    <link
+            href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap"
+            rel="stylesheet">
+    <link
+            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+            rel="stylesheet">
+    <title>CV Elena Samoylova</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+    <script src="https://kit.fontawesome.com/28f34a0231.js" crossorigin="anonymous"></script>
+</head>
+<body>
+<div class="page-wrapper">
+    <header class="header">
+        <figure class="avatar-wrapper">
+            <img class="avatar"
+                 src="img/my-photo.jpeg"
+                 alt="my photo"
+            >
+        </figure>
+        <div class="header-content">
+            <nav class="menu">
+                <ul class="menu-list">
+                    <li>
+                        <a href="#contacts">Contacts</a>
+                    </li>
+                    <li>
+                        <a href="#personal">About me</a>
+                    </li>
+                    <li>
+                        <a href="#skills">Skills</a>
+                    </li>
+                    <li>
+                        <a href="#code">Code examples</a>
+                    </li>
+                    <li>
+                        <a href="#projects">My projects</a>
+                    </li>
+                    <li>
+                        <a href="#experience">Work experience</a>
+                    </li>
+                    <li>
+                        <a href="#education">Education</a>
+                    </li>
+                    <li>
+                        <a href="#languages">Languages</a>
+                    </li>
+                    <li class="menu-icon">
+                        <a href="javascript:void(0);" onclick="resizeMenu()">
+                            <i class="fa fa-bars"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+            <h1 class="header-title">Elena Samoylova</h1>
+            <p class="header-subtitle">Front-end Developer</p>
+        </div>
+    </header>
+    <main class="main">
+        <div class="left-column">
+            <section class="section-left" id="contacts">
+                <h2 class="section-title left">Contacts</h2>
+
+                <ul class="contacts-list">
+                    <li>
+                        <i class="fa fa-map-marker"></i>
+                        <u><b>St.Petersburg, Russia</b></u>
+                    </li>
+                    <li>
+                        <i class="fa fa-phone"></i>
+                        +7-967-597-68-62
+                    </li>
+                    <li>
+                        <i class="fa fa-envelope"></i>
+                        helen-js@mail.ru
+                    </li>
+                    <li>
+                        <a href="https://t.me/helen_jsdev" target="_blank">
+                            <i class="fa fa-telegram"></i>
+                            helen_jsdev
+                        </a>
+                    </li>
+                </ul>
+            </section>
+
+            <section class="section-left" id="skills">
+                <h2 class="section-title left">Skills</h2>
+
+                <ul class="list section-content">
+                    <li class="list-item">
+                        <i class="fab fa-html5"></i>
+                        HTML
+                        <div class="skills-wrapper">
+                            <div class="skills skill-html">80%</div>
+                        </div>
+                    </li>
+                    <li class="list-item">
+                        <i class="fab fa-css3-alt"></i>
+                        CSS
+                        <div class="skills-wrapper">
+                            <div class="skills skill-css">80%</div>
+                        </div>
+                    </li>
+                    <li class="list-item">
+                        <i class="fab fa-js-square"></i>
+                        JavaScript
+                        <div class="skills-wrapper">
+                            <div class="skills skill-js">20%</div>
+                        </div>
+                    </li>
+                    <li class="list-item">
+                        <i class="fab fa-figma"></i>
+                        Figma
+                        <div class="skills-wrapper">
+                            <div class="skills skill-figma">70%</div>
+                        </div>
+                    </li>
+                    <li class="list-item">
+                        <i class="fab fa-chrome"></i>
+                        Chrome DevTools
+                        <div class="skills-wrapper">
+                            <div class="skills skill-chrome">80%</div>
+                        </div>
+                    </li>
+                    <li class="list-item">
+                        <i class="fab fa-git-alt"></i>
+                        Git
+                        <div class="skills-wrapper">
+                            <div class="skills skill-git">70%</div>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+
+            <section class="section-left" id="languages">
+                <h2 class="section-title left">Languages</h2>
+
+                <ul class="list section-content">
+                    <li class="list-item">
+                        <i class="fas fa-flag-usa"></i>
+                        English (B1 level)
+                    </li>
+                </ul>
+            </section>
+        </div>
+
+        <div class="right-column">
+
+            <section id="personal">
+                <h2 class="section-title right">About me</h2>
+
+                <p class="section-content"> I am interested in programming. My goal is to become a
+                    <mark>senior frontend developer</mark>
+                    . Currently I don’t have experience in this field, but I
+                    intend to learn and grow fast. I am
+                    <mark>persistent</mark>
+                    ,
+                    <mark>patient</mark>
+                    and
+                    <mark>diligent</mark>
+                    . Also I am
+                    <mark>good at foreign languages</mark>
+                    . I am sure it will help me achieve my goal.
+                </p>
+
+                <div class="personal-video">
+                    <iframe
+                            src="https://www.youtube.com/embed/MWW-Fv7819M"
+                            title="YouTube video player"
+                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                            allowfullscreen>
+                    </iframe>
+                </div>
+            </section>
+
+
+            <section id="code">
+                <h2 class="section-title right">Code examples</h2>
+
+                <pre>
+       <code class="html">
+        &lt;section class="section contacts-section" id="contacts"&gt;
+            &lt;figure class="contacts-picture-container"&gt;
+                &lt;img class="contacts-picture"
+                 src="my%20photo.jpeg"
+                 alt="my photo"
+                &gt;
+            &lt;/figure&gt;
+
+            &lt;div class="contacts-text"&gt;
+                &lt;h2 class="contacts-title"&gt;
+                    Elena Samoilova
+                &lt;/h2&gt;
+
+                &lt;ul class="contacts-list"&gt;
+                    &lt;li class="contacts-list-item"&gt;&lt;u&gt;St.Petersburg, Russia&lt;/u&gt;&lt;/li&gt;
+                    &lt;li class="contacts-list-item"&gt;&lt;b&gt;cell:&lt;/b&gt; +7-967-597-68-62&lt;/li&gt;
+                    &lt;li class="contacts-list-item"&gt;&lt;b&gt;email:&lt;/b&gt; helen-js@mail.ru&lt;/li&gt;
+                &lt;/ul&gt;
+            &lt;/div&gt;
+        &lt;/section&gt;
+       </code>
+        </pre>
+
+                <details>
+                    <summary class="section-content">Show more examples</summary>
+                    <pre>
+                <code class="js">
+        const makeItFunny = (str, n) =&gt; {
+            let localString = '';
+
+            for(let i = 0; i &lt;= str.length - 1; i++) {
+
+                    let char = str.charAt(i)
+
+                    if((i + 1) % n == 0) {
+                    char = char.toUpperCase();
+                    }
+            localString = localString.concat(char);
+            }
+        return localString;
+        }
+        makeItFunny("I never look back", 3)
+                </code>
+            </pre>
+                </details>
+            </section>
+
+            <section id="projects">
+                <h2 class="section-title right">My projects</h2>
+
+                <a class="projects-content" href="https://helen-js.github.io/vertical-slider/" target="_blank">
+                    <div class="project-text">
+                        <h3>Vertical Slider</h3>
+                        <p><u>Description</u>: vertical slider with pictures, powered by JavaScript</p>
+                        <p><u>Technologies</u>: HTML, CSS, JavaScript</p>
+                    </div>
+                    <figure class="project-picture">
+                        <img src="img/vertical-slider.png" alt="vertical slider">
+                    </figure>
+                </a>
+            </section>
+
+            <section id="experience" class="experience">
+                <h2 class="section-title right">Work experience</h2>
+
+                <div class="timeline section-content">
+                    <div class="container left-container">
+                        <div class="experience-content">
+                            <h3>March - August 2018</h3>
+                            <h4>English teacher, SkyEng</h4>
+                            <p>Teaching English online</p>
+                        </div>
+                    </div>
+
+                    <div class="container right-container">
+                        <div class="experience-content">
+                            <h3>September 2017 - February 2018</h3>
+                            <h4>English teacher, Secondary School of Bogatoe</h4>
+                            <p>Teaching English (2-4 grades), extracurricular activities (2-4, 7 grades)</p>
+                        </div>
+                    </div>
+
+                    <div class="container left-container">
+                        <div class="experience-content">
+                            <h3>September 2016 - August 2017</h3>
+                            <h4>English teacher, Secondary School #551</h4>
+                            <p>Teaching English (4-11 grades)</p>
+                        </div>
+                    </div>
+
+                    <div class="container right-container">
+                        <div class="experience-content">
+                            <h3>October 2014 - May 2016</h3>
+                            <h4>Technical support specialist, Rostelecom</h4>
+                            <p>Answering phone calls. Technical customer support over the phone.</p>
+                        </div>
+                    </div>
+
+                    <div class="container left-container">
+                        <div class="experience-content">
+                            <h3>August 2013 - July 2014</h3>
+                            <h4>Montessori teacher, American Montessori International School</h4>
+                            <p>Working with children 3-6 years old, teaching them the basics: reading, writing and math
+                                (in English) and playing special developing games.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="education">
+                <h2 class="section-title right">Education</h2>
+
+                <ul class="list education-list section-content">
+                    <li class="list-item">
+                        <b>2015</b> &ndash; Herzen Russian State Pedagogical University, St.Petersburg. Institute of
+                        Postgraduate Education,
+                        English teacher in secondary school.
+                    </li>
+                    <li class="list-item">
+                        <b>2014</b> &ndash; Brigham Young University-Idaho. Online English classes.
+                    </li>
+                    <li class="list-item">
+                        <b>2008</b> &ndash; Perm State University, Perm. Faculty of Geography, Nature Management.
+                    </li>
+                </ul>
+            </section>
+        </div>
+    </main>
+
+    <footer class="footer">
+        <div class="footer-left"></div>
+        <div class="footer-content">
+            <div class="tooltip">
+                <a class="footer-logo" href="https://rs.school/js/" target="_blank">
+                    <img class="logo"
+                         src="img/rs_school_logo.jpeg"
+                         alt="rs_school_js logo"
+                    >
+                </a>
+                <span class="tooltip-text">https://rs.school/js/</span>
+            </div>
+            <div class="footer-text">
+                &#169;
+                <span class="tooltip">
+                <a class="tooltip" href="https://github.com/Helen-JS" target="_blank">Helen-JS</a>,
+                <span class="tooltip-text">Visit my Github page</span>
+            </span>
+                2021.
+            </div>
+        </div>
+    </footer>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c2264bb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,21 @@
+console.log('Самооценка: 150/150')
+console.log('1) вёрстка валидная +10')
+console.log('2) вёрстка семантическая +20: header, main, footer, nav, section, figure, figcaption, details, summary, code, mark, h1, h2')
+console.log('3) для оформления СV используются css-стили +10')
+console.log('4) контент размещается в блоке, который горизонтально центрируется на странице. Фоновый цвет, если он есть, тянется во всю ширину страницы +10')
+console.log('5) вёрстка адаптивная: ни на одном из разрешений экрана до 320px включительно не появляется горизонтальная полоса прокрутки, при этом всё содержание страницы сохраняется +10')
+console.log('6) есть меню. Ссылки в пунктах меню ведут на основные разделы CV. При кликах по пунктам меню реализована плавная прокрутка по якорям. При уменьшении ширины экрана меню становится адаптивным +10')
+console.log('7) на странице СV присутствует изображение - фото или аватарка автора CV, пропорции изображения не искажены, у изображения есть атрибут alt (может быть пустым) +10')
+console.log('8) контакты для связи и перечень навыков оформлены в виде списка ul > li +10')
+console.log('9) CV содержит контакты для связи, краткую информацию о себе, перечень навыков, информацию об образовании и уровне английского +10')
+console.log('10) CV содержит пример вашего кода (например, решение задачи с сайта codewars) с подсветкой кода +10')
+console.log('11) CV содержит изображения-ссылки на выполненные вами проекты. При клике по изображению страница проекта открывается в новой вкладке +10')
+console.log('12) CV выполнено на английском языке +10')
+console.log('13) выполнены требования к Pull Request: есть ссылка на задание, скриншот страницы СV, ссылка на деплой страницы CV на GitHub Pages, выполнена самооценка (самооценку расписываем по пунктам критериев оценки, указывая балл за каждый пункт) +10')
+console.log('14) есть видеорезюме автора CV на английском языке. Продолжительность видео 3-5 минут (±15 секунд). В описание видео на YouTube добавлена его транскрипция на английском языке +10')
+console.log('15) качество выполнения CV не ниже чем в примерах CV, приведённых в материалах к заданию +10')
+
+function resizeMenu() {
+    document.querySelector('.menu-list').classList.toggle('responsive');
+    document.querySelector('.menu-list').style.backgroundColor = "bisque";
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..95c2bcc
--- /dev/null
+++ b/style.css
@@ -0,0 +1,681 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-size: 20px;
+    font-family: 'Roboto', sans-serif;
+    background-color: cornsilk;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+mark {
+    background-color: bisque;
+}
+
+.page-wrapper {
+    width: 80%;
+    margin: 50px auto;
+    border-radius: 10px;
+    box-shadow: 10px 10px 50px #330000;
+}
+
+.header {
+    display: flex;
+}
+
+.header-content {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 5px 80px;
+    border-top-right-radius: 10px;
+    text-align: center;
+    font-family: 'Playfair Display SC', serif;
+    background-color: bisque;
+}
+
+.menu-list {
+    list-style-type: none;
+    font-size: 14px;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
+.menu-list li {
+    float: left;
+}
+
+.menu-list li a {
+    display: inline-block;
+    padding: 10px;
+    border-radius: 5px;
+    color: #330000;
+    text-align: center;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+.menu-list li a:hover {
+    color: #ffffff;
+    background-color: maroon;
+}
+
+.menu-list li.menu-icon {
+    display: none;
+}
+
+.header-title {
+    padding-top: 50px;
+    padding-bottom: 15px;
+    color: maroon;
+    text-shadow: 2px 2px 2px white;
+    letter-spacing: 3px;
+    font-size: 45px;
+}
+
+.header-subtitle {
+    padding: 5px 0;
+    border-top: 2px solid midnightblue;
+    border-bottom: 2px solid midnightblue;
+    font-size: 30px;
+}
+
+.avatar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30%;
+    padding: 40px;
+    border-top-left-radius: 10px;
+    background-color: darkgoldenrod;
+}
+
+.avatar {
+    max-width: 100%;
+    border-radius: 50%;
+    box-shadow: -10px 2px 10px bisque;
+}
+
+.main {
+    display: flex;
+}
+
+.left-column {
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    color: #330000;
+    background-color: darkgoldenrod;
+}
+
+.left-column ul {
+    align-self: center;
+    font-size: 24px;
+    text-shadow: 0.5px 0.5px bisque;
+}
+
+.section-left {
+    display: flex;
+    flex-direction: column;
+}
+
+.right-column {
+    display: flex;
+    flex-direction: column;
+    width: 70%;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    background-color: white;
+}
+
+.section-title {
+    padding: 10px;
+    font-family: 'Quicksand', sans-serif;
+    color: #330000;
+    background-color: darkgoldenrod;
+}
+
+.section-title.left {
+    align-self: center;
+    width: 120%;
+    padding-left: 50px;
+    padding-right: 50px;
+    border-radius: 5px;
+    box-shadow: -5px 5px 10px #330000;
+    text-align: center;
+    background-color: bisque;
+}
+
+.section-title.right {
+    width: 105%;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    box-shadow: 5px 5px 10px #330000;
+}
+
+.section-content {
+    padding: 30px;
+    line-height: 150%
+}
+
+.contacts-list {
+    padding: 20px 10px;
+    line-height: 200%;
+    list-style-type: none;
+}
+
+.contacts-list a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.list {
+    padding-left: 30px;
+    line-height: 150%;
+    list-style-type: none;
+}
+
+.list-item {
+    margin-top: 5px;
+    margin-bottom: 20px;
+}
+
+.list-item i, .contacts-list i {
+    width: 30px;
+}
+
+.list-item i:hover, .contacts-list a:hover {
+    opacity: 0.6;
+}
+
+.skills-wrapper {
+    width: 87%;
+    margin-left: 13%;
+    line-height: normal;
+    font-size: 0.7em;
+    box-shadow: 0 2px 5px #330000;
+    border-radius: 10px;
+    background-color: antiquewhite;
+}
+
+.skills {
+    text-align: right;
+    padding-top: 2px;
+    padding-right: 5px;
+    padding-bottom: 2px;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: white;
+    background: linear-gradient(90deg, #FF9F55, #330000);
+}
+
+.skill-html {width: 80%}
+.skill-css {width: 80%}
+.skill-js {width: 20%}
+.skill-figma {width: 70%}
+.skill-chrome {width: 80%}
+.skill-git {width: 70%}
+
+.personal-video {
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.personal-video iframe {
+    width: 93%;
+    height: 390px;
+    box-shadow: 0 5px 20px #330000;
+    border: 2px solid #330000;
+    border-radius: 5px;
+}
+
+code {
+    display: block;
+    margin: 10px 30px -30px;
+    border-radius: 5px;
+    overflow: scroll;
+    font-size: 18px;
+    box-shadow: 0 5px 20px #330000;
+}
+
+.projects-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-decoration: none;
+    color: midnightblue;
+    margin: 30px;
+    padding: 20px;
+    border: 2px solid #330000;
+    box-shadow: 0 5px 20px #330000;
+    border-radius: 5px;
+}
+
+.projects-content:hover {
+    opacity: 0.8;
+}
+
+.project-text {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.project-text h3 {
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.project-picture img {
+    max-width: 100%;
+}
+
+.experience h3 {
+    font-style: italic;
+    margin-bottom: 5px;
+}
+
+.experience h4 {
+    color: #333333;
+    margin-bottom: 10px;
+}
+
+.timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.timeline::after {
+    content: '';
+    position: absolute;
+    width: 6px;
+    background-color: bisque;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -3px;
+}
+
+.container {
+    padding: 10px 40px;
+    position: relative;
+    background-color: inherit;
+    width: 50%;
+}
+
+.container::after {
+    content: '';
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    right: -17px;
+    background-color: bisque;
+    border: 4px solid #FF9F55;
+    top: 15px;
+    border-radius: 50%;
+    z-index: 1;
+}
+
+.left-container {
+    left: 0;
+}
+
+.right-container {
+    left: 50%;
+}
+
+.left-container::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    right: 30px;
+    border: medium solid bisque;
+    border-width: 10px 0 10px 10px;
+    border-color: transparent transparent transparent bisque;
+}
+
+.right-container::before {
+    content: " ";
+    height: 0;
+    position: absolute;
+    top: 22px;
+    width: 0;
+    z-index: 1;
+    left: 30px;
+    border: medium solid bisque;
+    border-width: 10px 10px 10px 0;
+    border-color: transparent bisque transparent transparent;
+}
+
+.right-container::after {
+    left: -16px;
+}
+
+.experience-content {
+    padding: 20px 30px;
+    background-color: bisque;
+    position: relative;
+    border-radius: 6px;
+    box-shadow: 0 5px 20px #330000;
+}
+
+.education-list {
+    list-style-type: none;
+}
+
+.footer {
+    display: flex;
+}
+
+.footer-left {
+    width: 30%;
+    border-bottom-left-radius: 10px;
+    background-color: darkgoldenrod;
+}
+
+.footer-content {
+    width: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 30px 100px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    color: maroon;
+    background-color: bisque;
+}
+
+.logo {
+    max-width: 90px;
+    border: 3px solid maroon;
+}
+
+.footer-text {
+    padding: 5px;
+    border: 3px solid maroon;
+    background-color: #ffffff;
+}
+
+.footer-text a {
+    color: maroon;
+    text-decoration: none;
+}
+
+.footer-text a:hover {
+    color: red;
+}
+
+.tooltip {
+    position: relative;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: fit-content;
+    background-color: maroon;
+    color: #ffffff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 120%;
+    left: 60%;
+    margin-left: -100%;
+    font-size: 18px;
+
+    opacity: 0;
+    transition: opacity 1s;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+@media only screen and (min-width: 1736px) {
+    body {
+        font-size: 26px;
+    }
+
+    .menu-list {
+        font-size: 18px;
+    }
+
+    .left-column ul {
+        font-size: 28px;
+    }
+}
+
+@media only screen and (min-width: 1661px) {
+    body {
+        font-size: 22px;
+    }
+}
+
+@media only screen and (min-width: 1588px) {
+    body {
+        font-size: 21px;
+    }
+
+    .menu-list {
+        font-size: 16px;
+    }
+
+    .header-title {
+        font-size: 60px;
+    }
+
+    .header-subtitle {
+        font-size: 36px;
+    }
+}
+
+@media only screen and (max-width: 1090px) {
+    body {
+        font-size: 18px;
+    }
+
+    .left-column ul {
+        font-size: 20px;
+    }
+
+    .timeline {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .experience-content {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .footer-content {
+        padding-right: 40px;
+        padding-left: 40px;
+    }
+}
+
+@media only screen and (max-width: 955px) {
+    .header {
+        flex-direction: column;
+    }
+
+    .avatar-wrapper {
+        width: 100%;
+        border-top-right-radius: 10px;
+        padding: 20px;
+    }
+
+    .avatar {
+        max-width: 40%;
+    }
+
+    .header-content {
+        width: 100%;
+        padding-bottom: 50px;
+        border-bottom: 20px solid darkgoldenrod;
+    }
+
+    .menu-list {
+        margin-bottom: 15px;
+    }
+
+    .main {
+        flex-direction: column;
+    }
+
+    .left-column {
+        width: 100%;
+        border-bottom: 20px solid white;
+    }
+
+    .right-column {
+        width: 100%;
+    }
+
+    .section-title {
+        text-align: center;
+    }
+
+    .section-title.left {
+        width: 100%;
+        margin-right: -25px;
+    }
+
+    .section-title.right {
+        width: 100%;
+        border-radius: 5px;
+        margin-left: -15px;
+    }
+
+    .footer-left {
+        width: 0;
+    }
+
+    .footer-content {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 620px) {
+    .header-content {
+        position: relative;
+        padding-top: 40px;
+    }
+
+    .menu {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 9;
+    }
+
+    .menu-list {
+        width: 100%;
+        display: block;
+    }
+
+    .menu-list li {
+        display: none;
+    }
+
+    .menu-list li.menu-icon {
+        float: right;
+        display: inline-block;
+    }
+
+    .menu-list.responsive {
+        position: relative;
+    }
+
+    .menu-list.responsive li.menu-icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .menu-list.responsive li {
+        float: none;
+        display: inline;
+    }
+
+    .menu-list.responsive li a {
+        display: block;
+        text-align: left;
+        padding: 5px;
+    }
+
+    .timeline::after {
+        left: 31px;
+    }
+
+    .container {
+        width: 100%;
+        padding-left: 70px;
+        padding-right: 25px;
+    }
+
+    .container::before {
+        left: 60px;
+        border: medium solid bisque;
+        border-width: 10px 10px 10px 0;
+        border-color: transparent bisque transparent transparent;
+    }
+
+    .left-container::after, .right-container::after {
+        left: 5px;
+    }
+
+    .right-container {
+        left: 0;
+    }
+}
+
+@media only screen and (max-width: 588px) {
+    .page-wrapper {
+        margin: 20px auto;
+    }
+
+    .header-title {
+        font-size: 34px;
+        letter-spacing: 1px;
+    }
+
+    .header-subtitle {
+        font-size: 18px;
+    }
+
+    code {
+        font-size: 12px;
+    }
+}
+
+@media only screen and (max-width: 450px) {
+    .experience-content {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .footer-content {
+        flex-direction: column;
+        row-gap: 5px;
+    }
+}
+