Skip to content

Commit

Permalink
emailjs
Browse files Browse the repository at this point in the history
  • Loading branch information
@DoublEffe
DoublEffe committed Apr 10, 2024
1 parent c88523e commit d7568b4
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 63 deletions.
42 changes: 30 additions & 12 deletions about-me.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,25 @@
<link rel="stylesheet" href="assets/CSS/mobile.css" media="screen and (max-width:1023px)">
<link rel="stylesheet" href="assets/CSS/fonts.css">
<link rel="icon" href="assets/images/icon.ico">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script type="text/javascript" src="assets/JS/email-sender.js"></script>
<title>Document</title>
</head>
<body>
<nav class="nav">
<div class="nav-item">
<a href="#projects" class="noselect">
My project
<a href="#about-me" class="noselect" alt="go to about me section">
About Me
</a>
</div>
<div class="nav-item">
<a href="about-me.html" class="noselect">
About Me
<a href="#contact-me" class="noselect" alt="go to contact me section">
Contact Me
</a>
</div>
<div class="logo">
<a href="index.html">
<img src="assets/images/icon.svg">
<a href="index.html" alt="go to the begginning of the page">
<img src="assets/images/icon.svg" alt="An image of the site brand">
</a>
</div>
</nav>
Expand All @@ -42,13 +44,12 @@ <h1>About Me.</h1>
</p>
<br>
<p class="self-desc">Driven by curiosity and a relentless pursuit of excellence, I constantly seek to expand my knowledge and skill set.
Even if I have not a formal education trough self education I learned many things. Hover on the icons below to see more.
Even if I have not a formal education trough self education I learned many things. Hover or click on the icons below to see more.
</p>
</div>

<div class="skill-icons">
<div class="skill-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="0.67em" height="1em" viewBox="0 0 256 384">
<svg xmlns="http://www.w3.org/2000/svg" width="0.67em" height="1em" viewBox="0 0 256 384" alt="click or hoover to display figma skills">
<path fill="#0acf83" d="M64 384c35.328 0 64-28.672 64-64v-64H64c-35.328 0-64 28.672-64 64s28.672 64 64 64"/>
<path fill="#a259ff" d="M0 192c0-35.328 28.672-64 64-64h64v128H64c-35.328 0-64-28.672-64-64"/>
<path fill="#f24e1e" d="M0 64C0 28.672 28.672 0 64 0h64v128H64C28.672 128 0 99.328 0 64"/>
Expand All @@ -60,7 +61,7 @@ <h1>About Me.</h1>
</div>
</div>
<div class="skill-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" style="color: #ffd233;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" style="color: #ffd233;" alt="click or hoover to display javascript skills">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="m20 4l-2 14.5l-6 2l-6-2L4 4z" />
<path d="M7.5 8h3v8l-2-1m8-7H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5" />
Expand All @@ -71,7 +72,7 @@ <h1>About Me.</h1>
</div>
</div>
<div class="skill-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1.01em" height="1em" viewBox="0 0 256 255">
<svg xmlns="http://www.w3.org/2000/svg" width="1.01em" height="1em" viewBox="0 0 256 255" alt="click or hoover to display python skills">
<defs>
<linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%">
<stop offset="0%" stop-color="#387eb8"/><stop offset="100%" stop-color="#366994"/>
Expand All @@ -88,7 +89,7 @@ <h1>About Me.</h1>
</div>
</div>
<div class="skill-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128" alt="click or hoover to display flutter skills">
<path fill="#3fb6d3" d="M12.3 64.2L76.3 0h39.4L32.1 83.6zm64 63.8h39.4L81.6 93.9l34.1-34.8H76.3L42.2 93.5z"/>
<path fill="#27aacd" d="m81.6 93.9l-20-20l-19.4 19.6l19.4 19.6z"/>
<path fill="#19599a" d="M115.7 128L81.6 93.9l-20 19.2L76.3 128z"/>
Expand All @@ -104,5 +105,22 @@ <h1>About Me.</h1>
</div>
</div>
</section>
<section class="contact" id="contact-me">
<h1>Contact Me.</h1>
<form id="email-sender">
<div>
<span >@</span>
<input type="text" placeholder="Email" id="email" name="from_email" alt="input for leaving your email to be contacted bye me">
</div>
<div>
<span >Name</span>
<input type="text" placeholder="Name" id="name" name="from_name" alt="input for leaving your name to be contacted bye me">
</div>
<div class="textarea">
<textarea placeholder="Share your thoughts" id="body" name="message" alt="input for leaving your thoughts to be contacted bye me"></textarea>
</div>
<button type="submit" alt="send button to send the previous information">Send</button>
</form>
</section>
</body>
</html>
112 changes: 88 additions & 24 deletions assets/CSS/common.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
:root {
--background-color: #223;
--background-secondary-color: rgba(90, 74, 199, 1);
--secondary-color: #e4cb58;
--words-color: white;
}

* {
box-sizing: border-box;
padding: 0;
Expand All @@ -6,28 +13,28 @@

h1 {
font-size: 4em;
color: white;
color: var(--words-color);
}

h3 {
font-size: 1.5em;
color: white;
color: var(--words-color);
}

.upper {
height: 100vh;
width: 100%;
display: flex;
justify-content: space-between;
background-color: #223;
background-color: var(--background-color);
z-index: -1;
}

.circle {
width: 100%;
height: 100vh;
position: absolute;
background: repeating-radial-gradient(circle at bottom, #e4cb58 0.5px, #223 5px, #223 117px);
background: repeating-radial-gradient(circle at bottom, var(--secondary-color) 0.5px, var(--background-color) 5px, var(--background-color) 117px);
z-index: 0;
}

Expand All @@ -38,15 +45,15 @@ h3 {
position: sticky;
box-shadow: 0px 0px 15px black;
z-index: 10;
background-color: #223;
background-color: var(--background-color);
top: 0px;
}

.nav-item {
margin: 5px;
width: 10vw;
height: 5vh;
border: 1px solid white;
border: 1px solid var(--words-color);
font-family: 'Cinzel', serif;
font-size: 1em;
cursor: pointer;
Expand All @@ -57,7 +64,7 @@ h3 {
position: relative;
z-index: 0;
transition: 1s;
background-color: #223;
background-color: var(--background-color);
}

.logo {
Expand All @@ -82,7 +89,7 @@ h3 {
top: 20vh;
left: 10vw;
z-index: 1;
background-color: #223;
background-color: var(--background-color);
}


Expand All @@ -100,7 +107,7 @@ h3 {
position: relative;
margin: 0 1vw 0 1vw;
background-color:none;
border: 2px solid #e4cb58;
border: 2px solid var(--secondary-color);
transition: 0.25s;
width: 4vw;
height: 4vh;
Expand All @@ -119,13 +126,13 @@ h3 {
}

.social a svg path {
fill: #e4cb58 ;
fill: var(--secondary-color);
}

.up {
width: 100px;
height: 50px;
color: #e4cb58;
color: var(--secondary-color);
transition: 0.25s;
background: none;
border: 2px solid;
Expand All @@ -149,7 +156,7 @@ h3 {
display: flex;
width: 25vw;
height: 100%;
background-color: rgba(90, 74, 199, 1);
background-color: var(--background-secondary-color);
position: relative;
z-index: 2;

Expand All @@ -158,7 +165,7 @@ h3 {
.self::before {
content: "";
width:0;
border-bottom: 100vh solid rgba(90, 74, 199, 1);
border-bottom: 100vh solid var(--background-secondary-color);
border-left: 30vw solid transparent;
height:0px;
position: absolute;
Expand All @@ -178,7 +185,7 @@ h3 {

.separator {
height: 2vh;
background-color: rgba(90, 77, 180, 1);
background-color: var(--background-secondary-color);
z-index: 1;
position: relative;
}
Expand All @@ -189,7 +196,7 @@ h3 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: #223;
background-color: var(--background-color);
align-items: center;
}

Expand Down Expand Up @@ -235,14 +242,14 @@ input:checked + label .description {
}

.row {
color: white;
color: var(--words-color);
display: flex;
flex-wrap: nowrap;
}

.icon {
background-color: rgba(119, 109, 185, .8);
color: white;
color: var(--words-color);
border-radius: 50%;
width: 50px;
display: flex;
Expand Down Expand Up @@ -271,7 +278,7 @@ input:checked + label .description {

.description a {
text-decoration: none;
color: white;
color: var(--words-color);
}

.description h4 {
Expand All @@ -296,13 +303,14 @@ input:checked + label .description {
}

.lower {
background-color: #223;
background-color: var(--background-color);
height: 100vh;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow-x: scroll;
overflow-y: auto;

}

.lower h1 {
Expand All @@ -319,7 +327,7 @@ input:checked + label .description {

.self-desc {
max-width: 60vw;
color: white;
color: var(--words-color);
}

.skill-icons {
Expand All @@ -333,17 +341,17 @@ input:checked + label .description {
display: none;
width: 10vw;
height: 25vh;
border: 2px solid white;
border: 2px solid var(--words-color);
border-radius: .5rem;
box-shadow: 5px 5px white;
box-shadow: 5px 5px var(--words-color);
justify-content: center;
align-items: center;
position: relative;
top: 5vh;
}

.skill-exp p {
color: white;
color: var(--words-color);
text-align: center;
}

Expand All @@ -353,3 +361,59 @@ input:checked + label .description {
display: flex;
}

.contact {
height: 50vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.contact div {
display: flex;
width: 35vw;
height: 6vh;
border: 1px solid var(--words-color);
border-radius: 5px;
margin: 4px 0 4px 0;
}

.contact span {
display: inline-flex;
width: 15%;
height: 100%;
background-color: rgba(128, 128, 128, 0.268);
align-items: center;
justify-content: center;
}

.contact input {
display: block;
background-color: var(--words-color);
width: 85%;
height: 100%;
font-size: medium;
border: none;
}

.contact .textarea {
height: 10vh;
}

.textarea textarea {
width: 100%;
height: 100%;
font-size: large;
border: none;
}

.contact button {
position: relative;
left: 35%;
width: 8vw;
height: 4vh;
border-radius: 5px;
border: 4px solid var(--words-color);
}

Loading

0 comments on commit d7568b4

Please sign in to comment.