diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6b665aa
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
diff --git a/images/myPhoto.png b/images/myPhoto.png
new file mode 100644
index 0000000..7426724
Binary files /dev/null and b/images/myPhoto.png differ
diff --git a/images/tom-nora.jpg b/images/tom-nora.jpg
new file mode 100644
index 0000000..cc27a72
Binary files /dev/null and b/images/tom-nora.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..a087ec5
--- /dev/null
+++ b/index.css
@@ -0,0 +1,185 @@
+body {
+ background-image: url(/images/tom-nora.jpg);
+ color:rgb(80, 25, 4);
+ font-family: 'Poppins';
+ font-size: 40px;
+ margin: 5px;
+ padding: 5px;
+}
+
+section {
+ margin: 5px;
+ padding: 2px;
+}
+
+h1 {
+ font-size: 4rem;
+ font-family: 'Poppins';
+ font-weight: bold
+}
+
+h2 {
+ font-family: 'Poppins';
+ font-weight: bold;
+}
+
+.experience li{
+text-align: center;
+border: 5px solid bisque;
+border-radius: 10px;
+margin-top: 10px;
+padding: 5px;
+background-color: lemonchiffon;
+list-style-type: none;
+border-radius: 500px;
+max-width: fit-content;
+}
+
+#skills ul {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-gap: 10px;
+ justify-content: center;
+}
+
+#skills li {
+ text-align: center;
+ border: 1px dashed brown;
+ margin: 20px 0;
+ padding: 20px;
+ list-style-type: none;
+ border-radius: 400px;
+ max-width: fit-content;
+}
+#skills li:hover {
+ background-color: rgb(200, 138, 216);
+ color:cornsilk;
+ cursor: pointer;
+}
+
+#pic {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ box-shadow: none;
+}
+
+label {
+ color: rgb(80, 25, 4);;
+}
+
+input {
+ width: 30%;
+ height: 50% auto;
+ padding: 12px 20px;
+ margin: 8px 0;
+ box-sizing: border-box;
+ border-radius: 4px;
+}
+
+
+
+.button {
+ padding: 25px;
+ margin-top: 10px;
+ background-color: rgb(126, 24, 24);
+ color: white;
+ font-size: 2rem;
+}
+
+button:hover {
+ background-color: rgb(200, 138, 216);
+ color: rgb(126, 24, 24);
+}
+
+button: {
+ color: white;
+ font-size: 1rem;
+}
+
+footer {
+ background-color: rgb(126, 24, 24);
+ width: 100%;
+ color: white;
+ margin-top: 20px;
+ padding: 20px;
+}
+
+#my_photo {
+ border: 5px sold powderblue;
+ border-style: inset;
+ border-radius: 15px;
+ box-shadow: 20px 15px rgb(134, 75, 73);
+}
+
+a {
+ text-decoration: none;
+}
+
+.nava{
+ display: flex;
+ justify-content: space-evenly;
+ width: 100%;
+ position: sticky ;
+ margin-top: 30px;
+}
+
+.nav-item {
+ font-family: 'Poppins';
+ list-style-type: none;
+}
+
+.message-list {
+ display: flex;
+ justify-content: space-between;
+
+}
+
+textarea {
+ padding: 20px;
+}
+@media all and (max-width: 800px) {
+ body {
+ font-size: 20px;
+ }
+ .nava {
+ display:flex ;
+ Flex-direction : column;
+ }
+ .nav-item {
+ padding: 20px;
+ font-size: 35px;
+ }
+ h1 {
+ margin-left: 10px;
+ font-size: 35px;
+ }
+
+ #skills li {
+ padding: 5px;
+
+ }
+
+ #pic {
+ display:flex ;
+ Flex-direction : column
+ }
+
+
+
+ #skills ul {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+@media all and (max-width: 500px) {
+ .nav-item {
+ padding: 5px;
+ font-size: 20px;
+ }
+
+ .nava {
+ display:flex ;
+ Flex-direction : column;
+
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e6e63f9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+
+
+
+
+ My Portfolio
+
+
+
+
+
+ Yulia Lopatko
+
+ 
+
+
+ About
+
+ -
+ In the near future, I am a front-end programmer and feature developer with a focus on React, JavaScript, TypeScript, and Material-UI.
+
+ -
+ I am passionate about bringing people and communities together through innovative, engaging technologies.
+
+
+
+
+
+
+ Experience
+ Before starting a development career, I earned over a decade of proven mastery in web content management.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..d254372
--- /dev/null
+++ b/index.js
@@ -0,0 +1,113 @@
+const today = new Date();
+const thisYear = today.getFullYear();
+//console.log("this is year!", thisYear);
+const footer = document.querySelector('footer');
+const copyright = document.createElement('p');
+
+copyright.innerHTML = `Yulia Lopatko & copy ${thisYear} ♘`;
+footer.appendChild(copyright);
+
+const skills= [
+ "HTML",
+ "Node.js",
+ "Cypress",
+ 'Figma',
+ 'API',
+ 'CSS',
+ 'JavaScript',
+ 'DevTools',
+ 'Postman',
+];
+
+const skillsSection = document.getElementById('skills')
+const skillsList = skillsSection.querySelector('ul')
+
+for(let i = 0; i< skills.length; i++){
+ let skill = document.createElement('li');
+ skill.innerText = skills[i];
+ skillsList.appendChild(skill);
+};
+
+const messageForm = document.forms.leave_message;
+
+messageForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+
+ const usersName = event.target.usersName.value;
+ const usersEmail = event.target.usersEmail.value;
+ let usersMessage = event.target.usersMessage.value;
+
+ const messageSection = document.getElementById("messages");
+ const messageList = messageSection.querySelector("ul");
+ let newMessage = document.createElement("li");
+
+ newMessage.innerHTML = `${usersName}says: ${usersMessage}`;
+
+ const removeButton = document.createElement("button");
+ removeButton.innerText = "remove";
+ removeButton.type = "button";
+
+ removeButton.addEventListener("click", (event) => {
+ const entry = event.target.parentNode;
+ entry.remove();
+ });
+ newMessage.appendChild(removeButton);
+ // newMessage.appendChild(editButton);
+ messageList.appendChild(newMessage);
+ //editForm.remove();
+ //});
+
+ //newMessage.appendChild(editButton);
+
+ messageForm.reset();
+});
+
+const dateFixer = (date) => {
+ return date.slice(0, 10);
+}
+// Method for gettiing info from GitHub
+fetch("https://api.github.com/users/engineeryulia/repos")
+.then((response) => {
+if (!response.ok) {
+throw new Error(response.statusText);
+}
+return response.json();
+})
+.then((repositories) => {
+
+// selecting ul in projects section
+const projectSection = document.getElementById('projects');
+const projectList = projectSection.querySelector('ul')
+
+//iterating over repo array to display repo data
+for(let i = 0; i < repositories.length; i++) {
+const project = document.createElement('li');
+
+const projectLink = document.createElement('a');
+projectLink.innerText = repositories[i].name;
+projectLink.href = repositories[i].html_url;
+projectLink.target = "_blank";
+
+const projectDescription = document.createElement('p');
+projectDescription.innerText = repositories[i].description;
+
+const projectDate = document.createElement('p');
+projectDate.innerText = dateFixer(repositories[i].pushed_at);
+
+project.appendChild(projectLink);
+project.appendChild(projectDate);
+project.appendChild(projectDescription);
+projectList.appendChild(project);
+
+//styling
+project.classList.add('projectStyle');
+
+}
+})
+.catch((error) => {
+console.warn(error);
+const projectSection = document.getElementById('projects');
+const errorMessage = document.createElement('h1');
+errorMessage.innerText = `There was an error! Github error message: ${error.message}`;
+projectSection.appendChild(errorMessage);
+});
\ No newline at end of file
;
+ 
;
+ 
;
+