reorganization of the tree structure
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
#experiences-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
scroll-margin-top: 80px;
|
||||
}
|
||||
|
||||
.experiences-container {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.experiences-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: rgba(176, 176, 176, 0.2);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import '../styles/Experiences.css';
|
||||
import SingleExperience from './SingleExperience';
|
||||
import './Experiences.css';
|
||||
import SingleExperience from '../SingleExperience/SingleExperience.jsx';
|
||||
import React, {useEffect, useState} from "react";
|
||||
|
||||
function Experiences() {
|
||||
@@ -0,0 +1,37 @@
|
||||
.footer {
|
||||
padding: 2rem 0;
|
||||
margin-top: 4rem;
|
||||
border-top: 1px solid #333;
|
||||
color: #B0B0B0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #B0B0B0;
|
||||
transition: color 0.3s ease, transform 0.3s ease;
|
||||
svg{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #EAEAEA;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import '../styles/Footer.css';
|
||||
import './Footer.css';
|
||||
function Footer() {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
#home-section {
|
||||
position: relative;
|
||||
min-height: 110vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#home-section h1{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#home-section h2 {
|
||||
font-size: 1.8rem;
|
||||
color: #EAEAEA;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#home-section p {
|
||||
margin-bottom: 2rem;
|
||||
color: #EAEAEA;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight {
|
||||
color: #D95F46;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background-color: #D95F46;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s ease;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #b94a36;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import '../styles/Home.css';
|
||||
import Background from "./thirdParty/Background.jsx";
|
||||
import NavBar from "./NavBar.jsx";
|
||||
import './Home.css';
|
||||
import Background from "../thirdParty/Background/Background.jsx";
|
||||
import NavBar from "../NavBar/NavBar.jsx";
|
||||
function Home() {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
background: rgba(100,100,100, 0.25);
|
||||
backdrop-filter: blur(12px);
|
||||
border-radius: 25px;
|
||||
padding: 6px 10px;
|
||||
z-index: 1000;
|
||||
border: solid rgba(100,100,100,0.5) 0.001rem;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 1.3rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
li{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
color: #B0B0B0;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #D95F46;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: rgba(217, 95, 70, 0.3);
|
||||
color: #D95F46;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import "../styles/NavBar.css";
|
||||
import "./NavBar.css";
|
||||
|
||||
const NavBar = () => {
|
||||
const [active, setActive] = useState("home-section");
|
||||
@@ -0,0 +1,59 @@
|
||||
#projects-section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-margin-top: 80px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.show-more-container {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.projects-link {
|
||||
display: inline-block;
|
||||
color: #B0B0B0;
|
||||
border: 1px solid #B0B0B0;
|
||||
background-color: transparent;
|
||||
padding: 12px 28px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.projects-link:hover {
|
||||
background-color: #B0B0B0;
|
||||
color: #1E1E1E;
|
||||
transform: translateY(-3px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.projects-section-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.projects-section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.projects-section-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: #B0B0B0;
|
||||
}
|
||||
|
||||
.projects-back-link {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import SingleProject from "./SingleProject.jsx";
|
||||
import "../styles/Projects.css"
|
||||
import SingleProject from "../SingleProject/SingleProject.jsx";
|
||||
import "./Projects.css"
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Link, useLocation} from "react-router-dom";
|
||||
import NavBar from "./NavBar.jsx";
|
||||
import NavBar from "../NavBar/NavBar.jsx";
|
||||
|
||||
function Projects() {
|
||||
const [projects, setProjects] = useState([]);
|
||||
@@ -0,0 +1,77 @@
|
||||
.experience-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 3rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.experience-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background-color: #D95F46;
|
||||
border: 3px solid rgba(176, 176, 176, 0.2);
|
||||
}
|
||||
|
||||
|
||||
.experience-card-left {
|
||||
width: 50%;
|
||||
text-align: end;
|
||||
margin-right: 8rem;
|
||||
}
|
||||
|
||||
.experience-card-right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.experience-company {
|
||||
color: #D95F46;
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.experience-role {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #EAEAEA;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.experience-location,
|
||||
.experience-duration {
|
||||
font-size: 0.95rem;
|
||||
color: #B0B0B0;
|
||||
margin: 0.25rem 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.experience-tasks {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.experience-tasks li {
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #B0B0B0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.experience-tasks li::before {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
color: #D95F46;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
}
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
import '../styles/SingleExperience.css';
|
||||
import './SingleExperience.css';
|
||||
|
||||
function SingleExperience({ experience, tasks }) {
|
||||
return (
|
||||
@@ -0,0 +1,157 @@
|
||||
.single-project {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 29%;
|
||||
margin: 2rem auto;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 12px;
|
||||
background-color: #1E1E1E;
|
||||
}
|
||||
|
||||
.single-project:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.single-project-left {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
overflow: hidden;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.single-project-left img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.single-project-left img.fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.single-project-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 2rem 2rem 0rem;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.single-project-right-top {
|
||||
display: flex;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.single-project-right-bottom {
|
||||
margin-left: 2rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.single-project-line {
|
||||
border-radius: 38px;
|
||||
min-width: 1.5rem;
|
||||
height: 0.25rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
background-color: #2556ff;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
background-color: #36a837;
|
||||
}
|
||||
|
||||
.color-purple {
|
||||
background-color: #a646d9;
|
||||
}
|
||||
|
||||
.color-red {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
.color-yellow {
|
||||
background-color: #ffd427;
|
||||
}
|
||||
|
||||
|
||||
.single-project-title {
|
||||
font-size: 2rem;
|
||||
color: #EAEAEA;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.single-project-description {
|
||||
color: #B0B0B0;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.single-project-skills-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.single-project-link {
|
||||
color: #B0B0B0;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
|
||||
.single-project-link:hover {
|
||||
cursor: pointer;
|
||||
color: #EAEAEA;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
color: #EAEAEA;
|
||||
font-size: 35px;
|
||||
display: none;
|
||||
transition: all 0.3s ease;
|
||||
text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.arrow:hover {
|
||||
color: #D95F46;
|
||||
opacity: 0.8;
|
||||
transform: translateY(-50%) scale(1.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.arrow.preview {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.arrow.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.single-project-left:hover .arrow {
|
||||
display: flex;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import SkillCard from "./SkillCard";
|
||||
import "../styles/SingleProject.css";
|
||||
import SkillCard from "../SkillCard/SkillCard.jsx";
|
||||
import "./SingleProject.css";
|
||||
|
||||
function SingleProject({ image, title, description, skills, id, nbImage }) {
|
||||
const [imageID, setImageID] = useState(1);
|
||||
@@ -0,0 +1,24 @@
|
||||
.skill-card {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
gap: 0.5rem;
|
||||
background-color: #171717;
|
||||
color: white;
|
||||
border: solid rgba(100,100,100) 0.001rem;
|
||||
height: 1.5rem;
|
||||
margin: 0.5% 2%;
|
||||
}
|
||||
|
||||
.skill-card img {
|
||||
width: 1rem;
|
||||
height: 1.125rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import "../styles/SkillCard.css";
|
||||
import "./SkillCard.css";
|
||||
|
||||
function SkillCard({ text }) {
|
||||
return (
|
||||
@@ -0,0 +1,25 @@
|
||||
#skills-section{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-margin-top: 80px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.skills-span{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skill-category{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.skills{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import SkillCard from "./SkillCard.jsx";
|
||||
import "../styles/Skills.css";
|
||||
import SkillCard from "../SkillCard/SkillCard.jsx";
|
||||
import "./Skills.css";
|
||||
|
||||
function Skills() {
|
||||
const [skills, setSkills] = useState([]);
|
||||
+104
@@ -0,0 +1,104 @@
|
||||
.space-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 123vh;
|
||||
background: radial-gradient(ellipse at center, #0a001f 0%, #000000 80%);
|
||||
overflow: hidden;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
animation: twinkle 3s infinite ease-in-out alternate;
|
||||
filter: drop-shadow(0 0 2px white);
|
||||
}
|
||||
|
||||
.planet {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120vw;
|
||||
height: 23vw;
|
||||
max-height: 400px;
|
||||
background: #0D0D0D;
|
||||
border-radius: 60% 60% 0 0 / 100% 100% 0 0;
|
||||
z-index: 1;
|
||||
box-shadow:
|
||||
0 -20px 60px 10px rgba(255, 255, 255, 0.35),
|
||||
inset 0 20px 60px 10px rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.planet::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-top: 2.5px solid white;
|
||||
border-radius: 60% 60% 0 0 / 100% 100% 0 0;
|
||||
mask-image: linear-gradient(to right, transparent 0%, white 40%, white 60%, transparent 100%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0% { opacity: 0.3; transform: scale(0.8); }
|
||||
100% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.nebula {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.5;
|
||||
mix-blend-mode: screen;
|
||||
animation: nebulaMove 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.nebula1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, #9b59b6 0%, transparent 70%);
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.nebula2 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, #8e44ad 0%, transparent 70%);
|
||||
top: 50%;
|
||||
left: 65%;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.nebula3 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: radial-gradient(circle, #663399 0%, transparent 70%);
|
||||
top: 75%;
|
||||
left: 35%;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
@keyframes nebulaMove {
|
||||
0% {
|
||||
transform: translate(0, 0) scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
transform: translate(20px, -20px) scale(1.05);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
Vendored
+1
-1
@@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import "../../styles/thirdParty/Background.css";
|
||||
import "./Background.css";
|
||||
|
||||
export default function Background() {
|
||||
return (
|
||||
Reference in New Issue
Block a user