diff --git a/README.md b/README.md index cfa019d..ca583d6 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,18 @@ -# React + Vite +# To do -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## For V1 : +- Revoir les titres de section (+espace au dessus des titres) -Currently, two official plugins are available: +## For V2 : +- Mettre la base de donnée en place +- Refaire en conséquence les choses nécessaires -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## For V3 : +- Faire une page pour lister tous les projets +- Faire une page explicative par projet -## Expanding the ESLint configuration -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +## Usefull commands `npm install` `npm run dev` diff --git a/index.html b/index.html index 0c589ec..e22d200 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,14 @@ - + - Vite + React + + + + + + Giovanni Josserand
diff --git a/public/assets/documents/CV.pdf b/public/assets/documents/CV.pdf new file mode 100644 index 0000000..7089f50 Binary files /dev/null and b/public/assets/documents/CV.pdf differ diff --git a/public/assets/images/SAE_C++/SAE_C++_1.png b/public/assets/images/SAE_C++/SAE_C++_1.png new file mode 100644 index 0000000..1f6368d Binary files /dev/null and b/public/assets/images/SAE_C++/SAE_C++_1.png differ diff --git a/public/assets/images/SAE_C++/SAE_C++_2.png b/public/assets/images/SAE_C++/SAE_C++_2.png new file mode 100644 index 0000000..3804acf Binary files /dev/null and b/public/assets/images/SAE_C++/SAE_C++_2.png differ diff --git a/public/assets/images/SAE_C++/SAE_C++_3.png b/public/assets/images/SAE_C++/SAE_C++_3.png new file mode 100644 index 0000000..9af9166 Binary files /dev/null and b/public/assets/images/SAE_C++/SAE_C++_3.png differ diff --git a/public/assets/images/codev/codev_1.png b/public/assets/images/codev/codev_1.png new file mode 100644 index 0000000..e8cec9a Binary files /dev/null and b/public/assets/images/codev/codev_1.png differ diff --git a/public/assets/images/codev/codev_2.png b/public/assets/images/codev/codev_2.png new file mode 100644 index 0000000..9c78b67 Binary files /dev/null and b/public/assets/images/codev/codev_2.png differ diff --git a/public/assets/images/codev/codev_3.png b/public/assets/images/codev/codev_3.png new file mode 100644 index 0000000..b359a96 Binary files /dev/null and b/public/assets/images/codev/codev_3.png differ diff --git a/public/assets/images/codev/codev_4.png b/public/assets/images/codev/codev_4.png new file mode 100644 index 0000000..c7620b4 Binary files /dev/null and b/public/assets/images/codev/codev_4.png differ diff --git a/public/assets/images/codev/codev_5.png b/public/assets/images/codev/codev_5.png new file mode 100644 index 0000000..86a1d0a Binary files /dev/null and b/public/assets/images/codev/codev_5.png differ diff --git a/public/assets/images/landscape.png b/public/assets/images/landscape.png new file mode 100644 index 0000000..4089919 Binary files /dev/null and b/public/assets/images/landscape.png differ diff --git a/public/assets/images/logo.svg b/public/assets/images/logo.svg new file mode 100644 index 0000000..ece2b8c --- /dev/null +++ b/public/assets/images/logo.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/proxmox/proxmox_1.png b/public/assets/images/proxmox/proxmox_1.png new file mode 100644 index 0000000..d9d5ebd Binary files /dev/null and b/public/assets/images/proxmox/proxmox_1.png differ diff --git a/public/assets/images/proxmox/proxmox_2.png b/public/assets/images/proxmox/proxmox_2.png new file mode 100644 index 0000000..e887f8e Binary files /dev/null and b/public/assets/images/proxmox/proxmox_2.png differ diff --git a/public/assets/images/proxmox/proxmox_3.png b/public/assets/images/proxmox/proxmox_3.png new file mode 100644 index 0000000..093598a Binary files /dev/null and b/public/assets/images/proxmox/proxmox_3.png differ diff --git a/public/assets/images/proxmox/proxmox_4.png b/public/assets/images/proxmox/proxmox_4.png new file mode 100644 index 0000000..f2a2a89 Binary files /dev/null and b/public/assets/images/proxmox/proxmox_4.png differ diff --git a/public/assets/images/proxmox/proxmox_5.png b/public/assets/images/proxmox/proxmox_5.png new file mode 100644 index 0000000..c968f4b Binary files /dev/null and b/public/assets/images/proxmox/proxmox_5.png differ diff --git a/public/assets/images/skills/C++.svg b/public/assets/images/skills/C++.svg new file mode 100644 index 0000000..70ff7eb --- /dev/null +++ b/public/assets/images/skills/C++.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/CSS.svg b/public/assets/images/skills/CSS.svg new file mode 100644 index 0000000..87fba58 --- /dev/null +++ b/public/assets/images/skills/CSS.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Git.svg b/public/assets/images/skills/Git.svg new file mode 100644 index 0000000..21481e6 --- /dev/null +++ b/public/assets/images/skills/Git.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/HTML.png b/public/assets/images/skills/HTML.png new file mode 100644 index 0000000..657e869 Binary files /dev/null and b/public/assets/images/skills/HTML.png differ diff --git a/public/assets/images/skills/HTML.svg b/public/assets/images/skills/HTML.svg new file mode 100644 index 0000000..5be43dd --- /dev/null +++ b/public/assets/images/skills/HTML.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Java.svg b/public/assets/images/skills/Java.svg new file mode 100644 index 0000000..3150345 --- /dev/null +++ b/public/assets/images/skills/Java.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/assets/images/skills/JavaScript.svg b/public/assets/images/skills/JavaScript.svg new file mode 100644 index 0000000..f0b62a5 --- /dev/null +++ b/public/assets/images/skills/JavaScript.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/PHP.png b/public/assets/images/skills/PHP.png new file mode 100644 index 0000000..ca6d599 Binary files /dev/null and b/public/assets/images/skills/PHP.png differ diff --git a/public/assets/images/skills/PHP.svg b/public/assets/images/skills/PHP.svg new file mode 100644 index 0000000..fc1ecb3 --- /dev/null +++ b/public/assets/images/skills/PHP.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/assets/images/skills/Python.svg b/public/assets/images/skills/Python.svg new file mode 100644 index 0000000..b083d11 --- /dev/null +++ b/public/assets/images/skills/Python.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/src/assets/react.svg b/public/assets/images/skills/React.svg similarity index 100% rename from src/assets/react.svg rename to public/assets/images/skills/React.svg diff --git a/public/assets/images/skills/SQL.svg b/public/assets/images/skills/SQL.svg new file mode 100644 index 0000000..a08ccff --- /dev/null +++ b/public/assets/images/skills/SQL.svg @@ -0,0 +1,38 @@ + + + + + + + + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/App.css b/src/App.css index b9d355d..328e7bd 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,3 @@ #root { - max-width: 1280px; margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index f67355a..fff1480 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,35 +1,22 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' import './App.css' +import Home from './components/Home.jsx' +import Experiences from './components/Experiences.jsx' +import Projects from './components/Projects.jsx' +import Skills from './components/Skills.jsx' +import Footer from './components/Footer.jsx' + function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) + return ( +
+ + + + +
+ ) } + export default App diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx new file mode 100644 index 0000000..a42d751 --- /dev/null +++ b/src/components/Experiences.jsx @@ -0,0 +1,43 @@ +import '../styles/Experiences.css'; +import SingleExperience from './SingleExperience'; + +function Experiences() { + const experiencesData = [ + { + role: "Web Development Intern", + company: "Pandora", + duration: "April 2024", + location: "Rennes (Ille-et-Vilaine), France", + tasks: [ + "Development of a dynamic website with database integration (HTML, CSS, PHP, SQL)", + "Created a reusable interface used as an internal learning resource", + "Introduction to GitHub Actions" + ] + }, + { + role: "IT Support Intern", + company: "INRAE", + duration: "April 2023", + location: "Rennes (Ille-et-Vilaine), France", + tasks: [ + "Introduction to ProxMox Backup and UpdateEngine tools", + "Preparation of two workstations", + "Setup of a Wi-Fi hotspot using a Raspberry Pi", + "Installation of a RAID 1 system" + ] + } + ]; + + return ( +
+

Experiences

+
+ {experiencesData.map((exp) => ( + + ))} +
+
+ ); +} + +export default Experiences; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 0000000..ef9b50f --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,28 @@ +import '../styles/Footer.css'; +function Footer() { + const currentYear = new Date().getFullYear(); + + return ( + + ); +} + +export default Footer; \ No newline at end of file diff --git a/src/components/Home.jsx b/src/components/Home.jsx new file mode 100644 index 0000000..9c319dd --- /dev/null +++ b/src/components/Home.jsx @@ -0,0 +1,22 @@ +import '../styles/Home.css'; +import Background from "./thirdParty/Background.jsx"; +import NavBar from "./NavBar.jsx"; +function Home() { + return ( + +
+ + +

Hello, I'm Giovanni Josserand

+

Junior Developer

+

+ Passionate about development, I am currently looking + for an opportunity to put my skills into practice and continue learning. +

+ Download my CV + +
+ ); +} + +export default Home; diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx new file mode 100644 index 0000000..b9f50ee --- /dev/null +++ b/src/components/NavBar.jsx @@ -0,0 +1,82 @@ +import { useEffect, useState } from "react"; +import "../styles/NavBar.css"; + +const NavBar = () => { + const [active, setActive] = useState("home-section"); + const [isScrolling, setIsScrolling] = useState(false); + + useEffect(() => { + const sections = document.querySelectorAll("section"); + const navHeight = document.querySelector(".navbar")?.offsetHeight + 40 || 120; + + const handleScroll = () => { + if (isScrolling) return; + + let current = "home-section"; + sections.forEach((section) => { + const sectionTop = section.offsetTop - navHeight; + if (window.scrollY >= sectionTop) { + current = section.id; + } + }); + + setActive(current); + }; + + window.addEventListener("scroll", handleScroll); + handleScroll(); + + return () => { + window.removeEventListener("scroll", handleScroll); + }; + }, [isScrolling]); + + const handleClick = (id) => { + setActive(id); + setIsScrolling(true); + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + setTimeout(() => setIsScrolling(false), 800); + }; + + + return ( + + ); +}; + +export default NavBar; diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx new file mode 100644 index 0000000..f939bb3 --- /dev/null +++ b/src/components/Projects.jsx @@ -0,0 +1,48 @@ +import SingleProject from "./SingleProject.jsx"; +import "../styles/Projects.css" +function Projects() { + const codevProject = { + title: "Codev", + image: "codev", + color: "orange", + nbImage: 5, + skills: ['HTML', 'CSS', 'PHP', 'JavaScript', 'SQL'], + description: "A collaborative platform where developers can create, share, and grow coding projects. Built for solo makers or teams, it features real-time messaging and a centralized workspace." + } + const SAECProject = { + title: "SAE C++", + image: "SAE_C++", + color: "purple", + nbImage: 3, + skills: ['C++', 'Git'], + description: "A C++ program developed for creating and managing treasure hunt records, with a web interface that allows browsing and consulting the entries." + } + const proxmoxProject = { + title: "Proxmox", + image: "proxmox", + color: "green", + nbImage: 5, + skills: [], + description: "A Proxmox-based infrastructure that consolidates my personal cloud, home automation, code hosting, media services and web hosting into a single, self-hosted environment." + } + + + return ( +
+

Projects

+
+ + + +
+
+

+ Show more +

+
+
+ ) +} + + +export default Projects \ No newline at end of file diff --git a/src/components/SingleExperience.jsx b/src/components/SingleExperience.jsx new file mode 100644 index 0000000..0e74bab --- /dev/null +++ b/src/components/SingleExperience.jsx @@ -0,0 +1,22 @@ +import '../styles/SingleExperience.css'; + +function SingleExperience({ experience }) { + return ( +
+
+

{experience.company}

+

{experience.location}

+

{experience.duration}

+
+
+

{experience.role}

+ +
+
+ ); +} +export default SingleExperience; \ No newline at end of file diff --git a/src/components/SingleProject.jsx b/src/components/SingleProject.jsx new file mode 100644 index 0000000..30b031d --- /dev/null +++ b/src/components/SingleProject.jsx @@ -0,0 +1,79 @@ +import { useState, useEffect, useRef } from "react"; +import SkillCard from "./SkillCard"; +import "../styles/SingleProject.css"; + +function SingleProject({ image, title, description, skills, color, nbImage }) { + const [imageID, setImageID] = useState(1); + const [isFading, setIsFading] = useState(true); + const intervalRef = useRef(null); + + const handleChangeImage = (direction) => { + if (nbImage <= 1) return; + + setIsFading(false); + + setTimeout(() => { + setImageID((prevID) => + direction === 1 + ? (prevID % nbImage) + 1 + : prevID === 1 ? nbImage : prevID - 1 + ); + setIsFading(true); + }, 300); + + clearInterval(intervalRef.current); + startAutoSlide(); + }; + + const startAutoSlide = () => { + intervalRef.current = setInterval(() => { + handleChangeImage(1); + }, 5000); + }; + + useEffect(() => { + startAutoSlide(); + return () => clearInterval(intervalRef.current); + }, []); + + return ( +
+
+ + + {image} + + +
+ +
+
+
+

{title}

+
+ +
+

+ {description} +

+ +
    + {skills.map((skill) => ( +
  • + +
    • + ))} +
+ +

Learn more

+
+
+
+ ); +} + +export default SingleProject; diff --git a/src/components/SkillCard.jsx b/src/components/SkillCard.jsx new file mode 100644 index 0000000..8f24eb7 --- /dev/null +++ b/src/components/SkillCard.jsx @@ -0,0 +1,12 @@ +import "../styles/SkillCard.css"; + +function SkillCard({ text }) { + return ( +
+ {text} +

{text}

+
+ ); +} + +export default SkillCard; diff --git a/src/components/Skills.jsx b/src/components/Skills.jsx new file mode 100644 index 0000000..5fef275 --- /dev/null +++ b/src/components/Skills.jsx @@ -0,0 +1,38 @@ +import SkillCard from "./SkillCard.jsx"; +import "../styles/Skills.css"; + +function Skills() { + return ( +
+

Skills

+
+

Languages

+
+ + + + + + + + +
+
+
+

Librairies

+
+ +
+
+
+

Tools

+
+ +
+
+
+ ) +} + + +export default Skills \ No newline at end of file diff --git a/src/components/thirdParty/Background.jsx b/src/components/thirdParty/Background.jsx new file mode 100644 index 0000000..6675646 --- /dev/null +++ b/src/components/thirdParty/Background.jsx @@ -0,0 +1,24 @@ +import React from "react"; +import "../../styles/thirdParty/Background.css"; + +export default function Background() { + return ( +
+ {[...Array(100)].map((_, i) => ( +
+ ))} +
+
+
+
+
+ ); +} diff --git a/src/index.css b/src/index.css index 08a3ac9..478784b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,27 +1,14 @@ :root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background-color: #0D0D0D; } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; +html{ + scroll-behavior: smooth; } + body { margin: 0; display: flex; @@ -30,39 +17,35 @@ body { min-height: 100vh; } -h1 { - font-size: 3.2em; - line-height: 1.1; + + +h1{ + font-size: 4rem; + color: white; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; +.section-title { + font-family: Arial; + font-size: 2.5rem; + color: #f0f0f0; + text-transform: uppercase; + letter-spacing: 0.15rem; + text-align: center; + margin-bottom: 3rem; } -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } +.section-title::after { + content: ''; + display: block; + width: 60px; + height: 3px; + background-color: #D95F46; + margin: 1rem auto 0; + border-radius: 2px; } + + + +h2{ + color: #f0f0f0; +} \ No newline at end of file diff --git a/src/styles/Experiences.css b/src/styles/Experiences.css new file mode 100644 index 0000000..e7b9a2c --- /dev/null +++ b/src/styles/Experiences.css @@ -0,0 +1,24 @@ +#experiences-section { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.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); +} diff --git a/src/styles/Footer.css b/src/styles/Footer.css new file mode 100644 index 0000000..6760a72 --- /dev/null +++ b/src/styles/Footer.css @@ -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); +} \ No newline at end of file diff --git a/src/styles/Home.css b/src/styles/Home.css new file mode 100644 index 0000000..0d119bd --- /dev/null +++ b/src/styles/Home.css @@ -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; +} + + + + diff --git a/src/styles/NavBar.css b/src/styles/NavBar.css new file mode 100644 index 0000000..934c704 --- /dev/null +++ b/src/styles/NavBar.css @@ -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; +} \ No newline at end of file diff --git a/src/styles/Projects.css b/src/styles/Projects.css new file mode 100644 index 0000000..80032fb --- /dev/null +++ b/src/styles/Projects.css @@ -0,0 +1,34 @@ +#projects-section{ + display: flex; + flex-direction: column; + scroll-margin-top: 40px; + margin-top: 100px; +} + +.show-more-container { + text-align: center; + +} + +.show-more-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; +} + +.show-more-link:hover { + background-color: #B0B0B0; + color: #1E1E1E; + transform: translateY(-3px); + cursor: pointer; +} + +.projects-section-list { + display: flex; +} \ No newline at end of file diff --git a/src/styles/SingleExperience.css b/src/styles/SingleExperience.css new file mode 100644 index 0000000..f5bc9a2 --- /dev/null +++ b/src/styles/SingleExperience.css @@ -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; +} \ No newline at end of file diff --git a/src/styles/SingleProject.css b/src/styles/SingleProject.css new file mode 100644 index 0000000..583a373 --- /dev/null +++ b/src/styles/SingleProject.css @@ -0,0 +1,148 @@ +.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-orange { + background-color: #D95F46; +} + +.color-purple { + background-color: #a646d9; +} + +.color-green { + background-color: #36a837; +} + +.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; +} diff --git a/src/styles/SkillCard.css b/src/styles/SkillCard.css new file mode 100644 index 0000000..7e04fba --- /dev/null +++ b/src/styles/SkillCard.css @@ -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; +} + diff --git a/src/styles/Skills.css b/src/styles/Skills.css new file mode 100644 index 0000000..79f26eb --- /dev/null +++ b/src/styles/Skills.css @@ -0,0 +1,25 @@ +#skills-section{ + display: flex; + flex-direction: column; + scroll-margin-top: 40px; + 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; +} \ No newline at end of file diff --git a/src/styles/thirdParty/Background.css b/src/styles/thirdParty/Background.css new file mode 100644 index 0000000..cd49587 --- /dev/null +++ b/src/styles/thirdParty/Background.css @@ -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; + } +}