generated from Templates_CodeFirst/templateHtmlCss
Portfolio
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
716702ade6
commit
31711b3d6f
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 hugocrne
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<?php
|
||||||
|
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||||
|
$name = $_POST["name"];
|
||||||
|
$email = $_POST["email"];
|
||||||
|
$subject = $_POST["subject"];
|
||||||
|
$message = $_POST["message"];
|
||||||
|
|
||||||
|
$to = "hugo.creneau@etu.uca.fr";
|
||||||
|
|
||||||
|
$email_subject = "New Contact Form Submission: $subject";
|
||||||
|
|
||||||
|
$email_body = "You have received a new message from $name ($email):\n\n$message";
|
||||||
|
|
||||||
|
$headers = "From: $name <$email>\r\n";
|
||||||
|
$headers .= "Reply-To: $email\r\n";
|
||||||
|
|
||||||
|
if (mail($to, $email_subject, $email_body, $headers)) {
|
||||||
|
header("Location: send.html");
|
||||||
|
exit;
|
||||||
|
} else {
|
||||||
|
echo "Failed to send the email.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
@ -1,3 +1,2 @@
|
|||||||
# Mon PortFolio
|
# PortFolio
|
||||||
|
My PortFolio
|
||||||
## PortFolio.
|
|
||||||
|
|||||||
@ -0,0 +1,4 @@
|
|||||||
|
:root
|
||||||
|
{
|
||||||
|
--skin-color:#ec1839;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
:root {
|
||||||
|
--skin-color: #fa5b0f;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
:root {
|
||||||
|
--skin-color: #37b182;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
:root {
|
||||||
|
--skin-color: #1854b4;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
:root {
|
||||||
|
--skin-color: #f021b2;
|
||||||
|
}
|
||||||
@ -0,0 +1,127 @@
|
|||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideInOut {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-25px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 60px;
|
||||||
|
padding: 15px;
|
||||||
|
width: 200px;
|
||||||
|
border: 1px solid var(--bg-black-50);
|
||||||
|
background: var(--bg-black-100);
|
||||||
|
z-index: 101;
|
||||||
|
border-radius: 5px;
|
||||||
|
transform: translateX(100%);
|
||||||
|
animation-duration: 0.3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher.open {
|
||||||
|
animation-name: slideInOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher.closed {
|
||||||
|
animation-name: slideOut;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.style-switcher:focus {
|
||||||
|
animation: slideIn 0.3s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .s-icon
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
background: var(--bg-black-100);
|
||||||
|
color: var(--text-black-900);
|
||||||
|
right: 100%;
|
||||||
|
border: 1px solid var(--bg-black-50);
|
||||||
|
margin-right: 25px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .s-icon i
|
||||||
|
{
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .style-switcher-toggle
|
||||||
|
{
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .day-night
|
||||||
|
{
|
||||||
|
top: 55px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher h4
|
||||||
|
{
|
||||||
|
margin: 0 0 10px;
|
||||||
|
color: var(--text-black-700);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .colors
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .colors span
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .color-1
|
||||||
|
{
|
||||||
|
background: #ec1839;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .color-2
|
||||||
|
{
|
||||||
|
background: #fa5b0f;
|
||||||
|
}
|
||||||
|
.style-switcher .color-3
|
||||||
|
{
|
||||||
|
background: #37b182;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .color-4
|
||||||
|
{
|
||||||
|
background: #1854b4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-switcher .color-5
|
||||||
|
{
|
||||||
|
background: #f021b2;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 1015 KiB |
|
After Width: | Height: | Size: 1015 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
After Width: | Height: | Size: 207 B |
@ -0,0 +1,125 @@
|
|||||||
|
var typed = new Typed(".typing", {
|
||||||
|
strings: [
|
||||||
|
"",
|
||||||
|
"Developpeur Web",
|
||||||
|
"Developpeur Front-end",
|
||||||
|
"Developpeur Back-end",
|
||||||
|
"Developpeur Mobile",
|
||||||
|
],
|
||||||
|
typeSpeed: 150,
|
||||||
|
backSpeed: 60,
|
||||||
|
loop: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const nav = document.querySelector(".nav"),
|
||||||
|
navList = nav.querySelectorAll("li"),
|
||||||
|
totalNavList = navList.length,
|
||||||
|
allSelection = document.querySelectorAll(".section"),
|
||||||
|
totalSelection = allSelection.length;
|
||||||
|
|
||||||
|
for (let i = 0; i < totalNavList; i++) {
|
||||||
|
removeBackSection();
|
||||||
|
const a = navList[i].querySelector("a");
|
||||||
|
a.addEventListener("click", function () {
|
||||||
|
for (let j = 0; j < totalNavList; j++) {
|
||||||
|
if (navList[j].querySelector("a").classList.contains("active")) {
|
||||||
|
addBackSection(j);
|
||||||
|
}
|
||||||
|
navList[j].querySelector("a").classList.remove("active");
|
||||||
|
}
|
||||||
|
this.classList.add("active");
|
||||||
|
showSection(this);
|
||||||
|
if (window.innerWidth < 1200) {
|
||||||
|
asideSectionTogglerBtn();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeBackSection() {
|
||||||
|
for (let i = 0; i < totalSelection; i++) {
|
||||||
|
allSelection[i].classList.remove("back-section");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addBackSection(num) {
|
||||||
|
allSelection[num].classList.add("back-section");
|
||||||
|
}
|
||||||
|
|
||||||
|
function showSection(element) {
|
||||||
|
for (let i = 0; i < totalSelection; i++) {
|
||||||
|
allSelection[i].classList.remove("active");
|
||||||
|
}
|
||||||
|
const target = element.getAttribute("href").split("#")[1];
|
||||||
|
document.querySelector("#" + target).classList.add("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNav(element) {
|
||||||
|
for (let i = 0; i < totalNavList; i++) {
|
||||||
|
navList[i].querySelector("a").classList.remove("active");
|
||||||
|
const target = element.getAttribute("href").split("#")[1];
|
||||||
|
if (
|
||||||
|
target ===
|
||||||
|
navList[i].querySelector("a").getAttribute("href").split("#")[1]
|
||||||
|
) {
|
||||||
|
navList[i].querySelector("a").classList.add("active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const navTogglerBtn = document.querySelector(".nav-toggler"),
|
||||||
|
aside = document.querySelector(".aside");
|
||||||
|
navTogglerBtn.addEventListener("click", () => {
|
||||||
|
asideSectionTogglerBtn();
|
||||||
|
});
|
||||||
|
|
||||||
|
function asideSectionTogglerBtn() {
|
||||||
|
aside.classList.add("open");
|
||||||
|
navTogglerBtn.classList.toggle("open");
|
||||||
|
for (let i = 0; i < totalSelection; i++) {
|
||||||
|
allSelection[i].classList.toggle("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const asideLinks = document.querySelectorAll(".aside a");
|
||||||
|
asideLinks.forEach((link) => {
|
||||||
|
link.addEventListener("click", () => {
|
||||||
|
aside.classList.remove("open");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggleDescription(descriptionId) {
|
||||||
|
var description = document.getElementById(descriptionId);
|
||||||
|
if (description.classList.contains("hidden")) {
|
||||||
|
description.classList.remove("hidden");
|
||||||
|
description.classList.add("show");
|
||||||
|
} else {
|
||||||
|
if (description.classList.contains("show")) {
|
||||||
|
description.classList.remove("show");
|
||||||
|
description.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var portfolioImages = document.querySelectorAll(".portfolio-img");
|
||||||
|
portfolioImages.forEach(function (image, index) {
|
||||||
|
image.addEventListener("click", function () {
|
||||||
|
if (document.getElementById("portfolio-description-1")) {
|
||||||
|
toggleDescription("portfolio-description-1");
|
||||||
|
}
|
||||||
|
if (document.getElementById("portfolio-description-2")) {
|
||||||
|
toggleDescription("portfolio-description-2");
|
||||||
|
}
|
||||||
|
if (document.getElementById("portfolio-description-3")) {
|
||||||
|
toggleDescription("portfolio-description-3");
|
||||||
|
}
|
||||||
|
if (document.getElementById("portfolio-description-4")) {
|
||||||
|
toggleDescription("portfolio-description-4");
|
||||||
|
}
|
||||||
|
if (document.getElementById("portfolio-description-5")) {
|
||||||
|
toggleDescription("portfolio-description-5");
|
||||||
|
}
|
||||||
|
if (document.getElementById("portfolio-description-6")) {
|
||||||
|
toggleDescription("portfolio-description-6");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
const styleSwitcherToggle = document.querySelector(".style-switcher-toggle");
|
||||||
|
styleSwitcherToggle.addEventListener("click", () => {
|
||||||
|
document.querySelector(".style-switcher").classList.toggle("open");
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
if (document.querySelector(".style-switcher").classList.contains("open"))
|
||||||
|
{
|
||||||
|
document.querySelector(".style-switcher").classList.remove("open");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const alternateStyle = document.querySelectorAll(".alternate-style");
|
||||||
|
function setActiveStyle(color)
|
||||||
|
{
|
||||||
|
alternateStyle.forEach((style) => {
|
||||||
|
if (color === style.getAttribute("title"))
|
||||||
|
{
|
||||||
|
style.removeAttribute("disabled");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
style.setAttribute("disabled","true");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const dayNight = document.querySelector(".day-night");
|
||||||
|
dayNight.addEventListener("click", () => {
|
||||||
|
dayNight.querySelector("i").classList.toggle("fa-sun");
|
||||||
|
dayNight.querySelector("i").classList.toggle("fa-moon");
|
||||||
|
document.body.classList.toggle("dark");
|
||||||
|
})
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
if (document.body.classList.contains("dark"))
|
||||||
|
{
|
||||||
|
dayNight.querySelector("i").classList.add("fa-sun");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
dayNight.querySelector("i").classList.add("fa-moon");
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in new issue