Finished????
This commit is contained in:
Ploc300
@@ -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>
|
||||
</>
|
||||
)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,49 @@
|
||||
function Contact() {
|
||||
return (
|
||||
<section id="contact">
|
||||
import RevealOnScroll from "../RevealOnScroll";
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<h3 className="text-xl font-bold mb-2">RTPhone</h3>
|
||||
{projects.map((project, key) => (
|
||||
<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">
|
||||
View Project
|
||||
<a href={project.link} className="text-blue-400 hover:text-blue-200 transition-colors">
|
||||
View Project ({project.visibility}) <VscArrowRight className="inline stroke-1" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</RevealOnScroll>
|
||||
|
||||
Reference in New Issue
Block a user