Skip to content

final edits to my portfolio #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Asel-K wants to merge 1 commit into
base: main
Choose a base branch
from
Open

final edits to my portfolio #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 75 additions & 15 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,6 @@
0.125em 0.125em 0.25em rgba(0,0,0,.15);
}
/* General styles*/
/* html {
scroll-behavior: smooth;
} */

body {
background-color: var(--clr-light);
Expand All @@ -36,6 +33,7 @@ body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
max-width: 100%;
}

section {
Expand Down Expand Up @@ -72,13 +70,13 @@ body {

#buttonremove {
display: inline-block;
padding: .5em 2.5em;
padding: .5em 1em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
letter-spacing: 2px;
font-weight: var(--fw-bold);
font-weight: var(--fw-reg);
transition: transform 200ms ease-in-out;
}
.btn:hover,
Expand Down Expand Up @@ -147,6 +145,7 @@ body {
font: var(--ff-primary);
color: #6b705c;
text-transform: uppercase;
justify-content: center;
}
.main-nav a:hover {
color: #093a58;
Expand Down Expand Up @@ -261,6 +260,10 @@ a {
opacity: .5;
}

#projects ul{
display: flex;
justify-content: center;
}
#projects li {
border: 1px solid var(--clr-light);
display: inline-block;
Expand Down Expand Up @@ -304,7 +307,7 @@ color: var(--clr-accent);
}
}

/* //leave message */
/* leave message */
#contact {
background-color: var(--clr-dark);
background-image: url(../css/grey\ bckgr.jpg);
Expand Down Expand Up @@ -354,27 +357,36 @@ color: var(--clr-accent);
}

/* left messages */
ul {
#messages {
background-color: var(--clr-dark);
background-image: url(../css/blue\ grey.jpg);
background-size: cover;
background-blend-mode: multiply;
color: var(--clr-light);
Copy link
Copy Markdown

@ckesurf ckesurf Aug 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the messages section looks very stylish in browser. great job here.

}

#messages ul {
display: flex;
flex-direction: column;
}
#messages li {
display: inline-block;
width: 50%;
padding: 30px;
font-size: 18px;
display: flex;
align-items: center;
font-size: 1.2em;
padding: 1rem 0;

}
#messages a {
display: inline-block;
width: 30%;
width: fit-content;
Copy link
Copy Markdown

@ckesurf ckesurf Aug 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

padding: 30px;
font-size: 18px;
color: var(--clr-accent);

}
#messages span{
display: inline-block;
width: fit-content;
padding: 30px;
font-size: 18px;
}


Expand Down Expand Up @@ -581,10 +593,58 @@ ul {
}
.main-nav {
display: flex;
font-size: 0.5em;
font-size: 0.6em;
}
}

@media (max-width: 375px) {
#projects li{
display: block;
width: 90%;
}
#projects ul{
display: contents;
}

#skills li {
display: block;
width: 90%;
}

#messages li,
#messages ul {
display: inline-block;
font-size: 1em;
padding: -2px;
margin-left: -2em;
}
.wrapper .icon{
margin: 0 10px;
}

}
@media (max-width: 414px) {
#projects li{
display: block;
width: 90%;
}
#projects ul{
display: contents;
}

#skills li {
display: block;
width: 90%;
}

#messages li,
#messages ul {
display: inline-block;
font-size: 1em;
padding: -2px;
margin-left: -2em;
}

}


47 changes: 22 additions & 25 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h1 class="name"><a href="#">Asel K</a></h1>
</ul>

</nav>
</header><!--/.main-header-->
</header>

<!--Introduction -->
<section class="intro" id="home">
Expand All @@ -48,15 +48,14 @@ <h2 class="section_title section_title-about">About me</h2>

<p>My name is Asel Karagazieva. I am a student at Code the Dream and
mom of two toddlers. My main goal is to become a professional in
a completely new path for, which I start from zero and coming
a completely new path for me, which I start from zero and coming
from other part of the world.
</p>

<p>Today, I am passionate about Front End Development, area where coding
and design work together.
Currently, I am developing my skills in Javascript, CSS and Github.
My main goal is to create clean, unique and functional websites, the designs
you love, designs that work. </p>
and design work together.
My main goal is to create clean, unique and functional websites, designs
that are eye-catching, designs that work. </p>
<p>My interests, however, extend beyond the web and I also enjoy taking photos
and retouching.
</p>
Expand All @@ -76,36 +75,35 @@ <h3>Public Relations Manager</h3>
work was connected with public relations and one of my responsabilities
was to design the appearance of leaflets, brochures, etc. I've enjoyed
the whole process so much! It was interesting for me to figure out how
to put the information and pictures together so the brochure becomes
to put the information and pictures together so the leaflets become
informative and still eye catching.</p>
</div> <!--service-->
<div class="service">
<h3>Public Relations Specialist</h3>
<p>at USAID KAED Project in Kyrgyzstan</p>
<p>I enjoy arranging
and putting things together so they look good. Fot instance, my past
work was connected with public relations and one of my responsabilities
was to design the appearance of leaflets, brochures, etc. I've enjoyed
the whole process so much! It was interesting for me to figure out how
to put the information and pictures together so the brochure becomes
informative and still eye catching.</p>
<p> During my work in public relations department I was engaged in process of
creating newsletters and different handouts. With the help of designers I've
developed different designs and layouts. Thanks to this, I had a chance to
see good practices on creating visual elements, importance of color selections, etc.
I believe that my previous experience will support me in new carrer to
build unique designs.
</p>
</div> <!--service-->
<div class="service">
<h3>Administrative Assistant</h3>
<p>at Save the Children International, Kyrgyzstan</p>
<p>I enjoy arranging
and putting things together so they look good. Fot instance, my past
work was connected with public relations and one of my responsabilities
was to design the appearance of leaflets, brochures, etc. I've enjoyed
the whole process so much! It was interesting for me to figure out how
to put the information and pictures together so the brochure becomes
informative and still eye catching.</p>
<p>Working as a connecting chain between funding organization
and people who were the main target of the project, I've learned how to
incorporate ideas, vision and changes recommended by clients into a final
project. I have a clear understanding how logos, images and illustrations can help
deliver a message.
</p>
</div> <!--service-->
</div>

</section>


<!-- SKILLS -->
<section class="my-skills" id="skills">
<h2 class="section_title section_title-skills">Skills</h2>
<ul id="skills-list">
Expand Down Expand Up @@ -147,7 +145,7 @@ <h2>Leave a Message</h2>
</section>

<!-- Messages -->
<section id="messages" style="display: none">
<section id="messages">
<h2>Messages</h2>
<div class="leftmessages">

Expand Down Expand Up @@ -184,13 +182,12 @@ <h3>Feel free to reach if you have questions. Or feel free to just say hi. I lik
<span><i class="fab fa-github"> </i> </span>
</a>

<!-- <a href = "mailto:asel.karagazieva@gmail.com" target="_blank" class = "icon"> -->
<a href = "mailto:asel.karagazieva@gmail.com" target="_blank" class = "icon">
Copy link
Copy Markdown

@ckesurf ckesurf Aug 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using the target=_blank to open in new tab, expertly done

<div class="icon">
<div class="tooltip">
asel.karagazieva@gmail.com
</div>
<span><i class="far fa-envelope"></i></span>
<!-- </a> -->
</div>
</div>
</footer>
Expand Down
59 changes: 24 additions & 35 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,48 +38,37 @@ fetch(`https://api.github.com/users/${GITHUB_USERNAME}/repos`)



// LEAVE MESSAGE
//LEAVE MESSAGE

let messageForm=document.getElementsByName('leave_message')
leave_message.addEventListener('submit',function(e){
leave_message.addEventListener('submit',(e)=>{
Copy link
Copy Markdown

@ckesurf ckesurf Aug 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using arrow functions! expertly done

e.preventDefault()

let Name=e.target.name.value
let Email=e.target.email.value
let Message=e.target.message.value



let messageSection = document.getElementById('messages');
let messageList = document.querySelector('ul');

if (messageSection.style.display=== 'none'){
messageSection.style.display = 'block'
}

//create new message
let newMessage = document.createElement ('li');
newMessage.classList.add('list_item')
newMessage.innerHTML =`<a href='mailto:asel.karagazieva@gmail.com'>${Name}</a>
wrote <span>${Message}</span>`
messageSection.appendChild(newMessage);

//remove button
let removeButton = document.createElement('button')
removeButton.id = "buttonremove";
removeButton.innerText = "remove";
removeButton.type = 'button';
messageSection.appendChild(removeButton)

removeButton.addEventListener('click', (e) => {
let entry = document.getElementById('messages').parentNode

console.log(Name)
console.log(Email)
console.log(Message);


let newMessage = document.createElement('li');
newMessage.innerHTML=`<a href="mailto:${Email}">${Name}</a>
wrote :<span>${Message}</span>`
let messageSection = document.getElementById("messages");
let messageList = messageSection.querySelector('ul')

let removeButton= document.createElement("button")
Copy link
Copy Markdown

@ckesurf ckesurf Aug 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this whole section looks cleaner. If I had anything nitpicky to say, it would be that some lines in this section, like 61 through 64, could be indented, and it would be nice to see consistent semicolons at the end of code statements, especially because you worked hard to break up certain lines so they could be more readable, such as in Line 56-57, which I appreciate.

removeButton.id="buttonremove";
removeButton.innerText = "remove";
removeButton.type = "button";

removeButton.addEventListener("click",(e)=> {
const entry = e.target.parentNode;
entry.remove();
})

document.forms['leave_message'].reset()
})
newMessage.appendChild(removeButton);



messageList.appendChild(newMessage);
e.target.reset();
})