Finished????

src/App.jsx

@@ -8,6 +8,7 @@ import MobileMenu from "./components/MobileMenu"
 import Home from "./components/sections/Home"
 import About from "./components/sections/About"
 import Projects from "./components/sections/Projects"
+import Contact from "./components/sections/Contact"
 
 function App() {
     const [isLoaded, setIsLoaded] = useState(false);
@@ -22,6 +23,7 @@ function App() {
                 <Home />
                 <About />
                 <Projects />
+                <Contact />
             </div>
         </>
     )

src/components/sections/About.jsx

@@ -185,12 +185,12 @@ function About() {
                         About Me
                     </h2>
 
-                    <div className="rounded-xl p-8 border-white/50 border hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
+                    <div className="rounded-xl p-8 border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                         <p className="text-gray-300 mb-6">
                             Due to my passion for computer science and everything related, I managed to gather skills in multiple domains.
                         </p>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     Cybersecurity
                                 </h3>
@@ -209,7 +209,7 @@ function About() {
                                     </ul>
                                 </div>
                             </div>
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     Programming & Development
                                 </h3>
@@ -228,7 +228,7 @@ function About() {
                                     </ul>
                                 </div>
                             </div>
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     Network
                                 </h3>
@@ -247,7 +247,7 @@ function About() {
                                     </ul>
                                 </div>
                             </div>
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     System
                                 </h3>
@@ -266,7 +266,7 @@ function About() {
                                     </ul>
                                 </div>
                             </div>
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     Project Management
                                 </h3>
@@ -285,7 +285,7 @@ function About() {
                                     </ul>
                                 </div>
                             </div>
-                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                            <div className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                 <h3 className="text-xl font-bold mb-4">
                                     Language
                                 </h3>
@@ -307,13 +307,13 @@ function About() {
                         </div>
                     </div>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
-                        <div className="p-6 rounded-xl border-white/50 border hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
+                        <div className="p-6 rounded-xl border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                             <h3 className="text-xl font-bold mb-4">
                                 Education
                             </h3>
                             <ul className="list-disc list-inside text-gray-300 space-y-2 py-2">
                                 {education.map((data, key) => (
-                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                         <h4 className="text-white font-bold">{data["name"]}</h4>
                                         <p className="text-gray-300"><FaSchool className="inline mr-1" /> <span className="text-blue-500">{data["establishment"]}</span> <MdPlace className="inline mr-1" />{data["city"]}</p>
                                         <p className="text-neutral-100">{data["graduated"] ? "Graduated in " : "To be completed in "}{data["graduation_year"]}</p>
@@ -325,7 +325,7 @@ function About() {
                             </h3>
                             <ul className="list-disc list-inside text-gray-300 space-y-2">
                                 {certifications.map((data, key) => (
-                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10">
+                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                         <h4 className="text-white font-bold">{data["name"]}</h4>
                                         <p className="text-neutral-100"><FaSchool className="inline mr-1" /> Obtained: <span className="text-blue-500">{data["date_obtained"]}</span> <MdPlace className="inline mr-1" />{data["city"]}</p>
                                         <p className="text-gray-300">{data["expiration"] ? `Expire ${data["expiration"]}` : ""}</p>
@@ -333,13 +333,13 @@ function About() {
                                 ))}
                             </ul>
                         </div>
-                        <div className="p-6 rounded-xl border-white/50 border hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
+                        <div className="p-6 rounded-xl border-white/30 border hover:border-white/50 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] hover:-translate-y-1 transition-all">
                             <h3 className="text-xl font-bold mb-4">
                                 Work Experience
                             </h3>
                             <div className="space-y-4 text-gray-300">
                                 {workExperience.map((data, key) => (
-                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/20">
+                                    <div key={key} className="rounded-xl p-6 hover:shadow-[6px_6px_8px_rgba(59,130,246,0.1)] hover:-translate-y-1 transition-all border border-white/10 hover:border-blue-500/30">
                                         <h4 className="text-white font-bold">{data["name"]}</h4>
                                         <p><HiOutlineBuildingOffice className="inline mr-1" /><span className="text-blue-500">{data["company"]}</span></p>
                                         <p className="text-gray-300"><VscCalendar className="inline mr-1" /> {data["period"]} | <MdPlace className="inline mr-1" />{data["place"]}</p>

src/components/sections/Contact.jsx

@@ -1,7 +1,49 @@
-function Contact() {
+import RevealOnScroll from "../RevealOnScroll";
-    return (
-        <section id="contact">
 
+import { FaLinkedin, FaGithub, FaGitlab } from "react-icons/fa";
+import { CiMail } from "react-icons/ci";
+import { PiMicrosoftOutlookLogoFill } from "react-icons/pi";
+
+
+function Contact() {
+    const contacts = [
+        {
+            "icon": <FaLinkedin className="inline text-3xl" />,
+            "name": "LinkedIn",
+            "link": "https://www.linkedin.com/in/alexis-pencrane-2100512a2/",
+        },
+        {
+            "icon": <FaGithub className="inline text-3xl" />,
+            "name": "Github",
+            "link": "https://github.com/Ploc300",
+        },
+        {
+            "icon": <FaGitlab className="inline text-3xl" />,
+            "name": "Github",
+            "link": "https://gitlab.plocserv.fr/ploc300",
+        },
+        {
+            "icon": <PiMicrosoftOutlookLogoFill className="inline text-3xl stroke-1" />,
+            "name": "Mail",
+            "link": "mailto:alexis.pen@hotmail.com",
+        },
+
+    ]
+
+    return (
+        <section id="contact" className="min-h-screen flex items-center justify-center relative">
+            <RevealOnScroll>
+                <div className="max-w-7xl mx-auto px-4">
+                    <h2 className="text-3xl font-bold mb-8 bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent text-center">
+                        Contact Me
+                    </h2>
+                    <ul className="flex flex-row space-x-2 space-y-2 list-inside mx-5">
+                        {contacts.map((contact, key) => (
+                            <li key={key} className="text-3xl whitespace-nowrap text-blue-300 py-1 px-3 rounded-full hover:text-blue-500 transition"><a href={contact.link} target="_blank">{contact.icon} {contact.name}</a></li>
+                        ))}
+                    </ul>
+                </div>
+            </RevealOnScroll>
         </section>
     )
 }

src/components/sections/Projects.jsx

@@ -1,22 +1,109 @@
 import RevealOnScroll from "../RevealOnScroll";
 
+import { VscArrowRight } from "react-icons/vsc";
+
 function Projects() {
+    const projects = [
+        {
+            "name": "Portfolio",
+            "tech": [
+                "Node.Js",
+                "React",
+                "Vite",
+                "Tailwind CSS",
+                "Docker",
+            ],
+            "description": "This is the link to the gitlab repository of the portfolio you are currently viewing!",
+            "visibility": "Public",
+            "link": "https://gitlab.plocserv.fr/ploc300/portfolio_v2",
+        },
+        {
+            "name": "Challenges for Cyber club Angel",
+            "tech": [
+                "Python",
+                "Bash",
+                "Docker",
+                "C/C++",
+            ],
+            "description": "This project contain most of the challenges I made (not the few firsts) for the Cyber club of the Lannion IUT. Sadly I cannot let this repository in public or else my flags will be everywhere, but if you really want to see them you can still request access by contacting me!",
+            "visibility": "Private",
+            "link": "https://gitlab.plocserv.fr/club_cyber_angel/challenges",
+        },
+        {
+            "name": "Root-Me",
+            "tech": [
+                "Python",
+                "C/C++",
+            ],
+            "description": "This project contain some of my latest solve on the Root-Me platform. All the solves inside this project have been automated with script (mostly in Python) so I can reuse them later when doing other challenges. This repository is Private and no access will be granted to it as it is againts root-me policy.",
+            "visibility": "Private",
+            "link": "https://gitlab.plocserv.fr/ploc300/root-me",
+        },
+        {
+            "name": "Check Image Up-to-date",
+            "tech": [
+                "Python",
+            ],
+            "description": "This python script allows me to check if my stacks (docker-compose on Portainer) are Up-to-date. This script is run every morning inside my Jenkins and send me an email with the result. The repo is in private, but I can send you the script if you want, again just conatct me!",
+            "visibility": "Private",
+            "link": "https://gitlab.plocserv.fr/plocserv/check_images_up_to_date",
+        },
+        {
+            "name": "Pylint Disable Analyser",
+            "tech": [
+                "Python",
+            ],
+            "description": "This cli tool has been wrote during my Intership at Nokia. It allow to run a single python script and analyse every python file in the sub-directories. After running a CSV report is generated with a global summary of all the pylint disable found as well as a report file by file. This project is Private and cannot be shared since it's a internal tool.",
+            "visibility": "Private",
+            "link": "https://github.com/Ploc300/PylintDisableAnalyser",
+        },
+        {
+            "name": "RTPhone",
+            "tech": [
+                "Python",
+                "Tkinter",
+            ],
+            "description": "This is a group school project, the objective was to create a Softphone (like MS Teams, Discords, etc...). I realised most of the Server and my 2 teammates have focused the client. The final project was a bit buggy, but the main objectives, make a phone call, make a conference call, \"secure connection\" with token, user management and phone number change without conflict were working. I also added a complete GUI for the server using tkinter. The server code is not really great since I wasn't using Pylint for my projects at this time. This project is Public but unmaintained.",
+            "visibility": "Private",
+            "link": "https://github.com/Ploc300/RTPhone",
+        },
+        {
+            "name": "Projet Cyber",
+            "tech": [
+                "Mestasploit",
+                "Debian",
+            ],
+            "description": "This is the report for a school project. The project was too make a security audit on a machine (Basic Pentesting 1 on VulnHub). This was a really fun project too make as it helped me learning how to do a penetration test as well a writting a report for it. This repo is private, since this project is still made by new students, therefore you can request access if you want to read it!",
+            "visibility": "Private",
+            "link": "https://github.com/Ploc300/ProjetCyber",
+        },
+    ]
+
+
     return (
         <section id="projects" className="min-h-screen flex items-center justify-center py-20">
             <RevealOnScroll>
                 <div className="max-w-5xl mx-auto px-4">
                     <h2 className="text-3xl font-bold mb-8 bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent text-center">Featured Projects</h2>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div className="p-6 rounded-xl border border-white/10 hover:-translate-y-1 hover:border-blue-500/30 hover:shadow-[0_2px_8px_rgba(59,130,246,0.1)] transition-all">
+                        {projects.map((project, key) => (
-                            <h3 className="text-xl font-bold mb-2">RTPhone</h3>
+                            <div key={key} className="p-6 rounded-xl border border-white/30 hover:-translate-y-1 hover:border-blue-500/30 hover:shadow-[0_2px_8px_rgba(59,130,246,0.1)] transition-all">
+                                <h3 className="text-xl font-bold mb-2">{project.name}</h3>
+                                <div>Tech used:
+                                    <ul className="flex flex-wrap flex-row space-x-2 space-y-2 mx-5">
+                                        {project.tech.map((tech, key) => (
+                                            <li key={key} className="text-sm whitespace-nowrap bg-blue-500/10 text-blue-500 py-1 px-3 rounded-full hover:bg-blue-500/20 hover:shadow-[0_2px_8px_rgba(59,130,246,0.2)] transition">{tech}</li>
+                                        ))}
+                                    </ul>
+                                </div>
                                 <p className="text-gray-400 mb-4">
-                                Description...
+                                    {project.description}
                                 </p>
-                            <div href="#" className="text-blue-400 hover:text-blue-200 transition-colors">
+                                <a href={project.link} className="text-blue-400 hover:text-blue-200 transition-colors">
-                                View Project
+                                    View Project ({project.visibility}) <VscArrowRight className="inline stroke-1" />
+                                </a>
                             </div>
-                        </div>
+                        ))}
-
                     </div>
                 </div>
             </RevealOnScroll>