<!doctype html>
< html lang = "en" >
< head >
< title > Ron - Full Stack Web Developer< / title >
<!-- Required meta tags -->
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Icons -->
< script src = "https://kit.fontawesome.com/2ad21aaa5c.js" crossorigin = "anonymous" > < / script >
<!-- Bootstrap CSS -->
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin = "anonymous" >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&family=Poppins:wght@700&display=swap" rel = "stylesheet" >
< link rel = "stylesheet" href = "main.css" >
< link rel = "stylesheet" href = "header.css" >
< link rel = "stylesheet" href = "general.css" >
< link rel = "stylesheet" href = "footer.css" >
< / head >
< body >
<!-- Header -->
< header >
< nav class = "navbar navbar-expand-xl bg-secondary border-bottom box-shadow" >
< div class = "container" >
< a class = "navbar-brand" href = "#" >
< div class = "logo-container row" >
< img src = "images/logo.png" class = "logo" alt = "Ron Reciproco" >
< div class = "col d-none d-sm-inline-block" >
< strong > Ron< / strong >
< p > Reciproco< / p >
< / div >
< / div >
< / a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse justify-content-end" id = "navbarNav" >
< ul class = "navbar-nav ml-auto" >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Resume< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = ".#about" > About< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Projects< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Fire me an email< / a >
< / li >
< / ul >
< / div >
< / div >
< / nav >
< / header >
< main >
<!-- Landing Page -->
< section id = "landing" class = "container-fluid box-shadow" >
< div class = "container d-flex justify-content-between" >
< div class = "py-cus text-start" >
< h1 class = "hd-1" > Designer< / h1 >
< p class = "p p-1" > Graphic designer specialize, UI design and design systems< / p >
< / div >
< div class = "py-cus text-end" >
< h1 class = "hd-1" > < Coder> < / h1 >
< p class = "p p-1" > Full-Stack Web Developer who writes clean, elegant and efficient codes.< / p >
< / div >
< / div >
< / section >
< section id = "landing-mobile" class = "container container-fluid" >
< div class = "container" >
< div class = "py-cus-mobile text-center mx-auto" >
< h1 > HEY, IM RON RECIPROCO< / h1 >
< p class = "p p-1" > A Frontend focused Web Developer building the Frontend of Websites and Design systems that leads to the success of the overall product.< / p >
< / div >
< / div >
< / section >
<!-- About me -->
< section id = "about" class = "text-center" >
< div class = "container col-md-6 col-lg-8 py-5" >
< h1 class = "h1" > ABOUT ME< / h1 >
< p class = "p p-1" > Here you will find more information about me, what I do, and my current skills mostly in terms of programming and technology< / p >
< / div >
< / section >
< section >
< div class = "row container d-inline-block d-flex justify-content-center flex-wrap mx-auto border rounded box-shadow" >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-3" >
< h2 class = "h2 py-3" > Get to know me!< / h2 >
< p class = "p p-1" > As a versatile creative professional, I wear multiple hats to bring impactful digital experiences to life. As a < span > Frontend Web Developer< / span > , I craft functional and responsive websites that engage users.< / p >
< p class = "p p-1" > My expertise as a < span > Graphic Designer< / span > merges aesthetics and user experience, ensuring visually appealing and intuitive interfaces. I have a knack for graphic design, creating captivating branding, logos, and packaging that resonate with the target audience.< / p >
< p class = "p p-1" > My skills extend to producing engaging social media content, crafting compelling visual narratives through video editing, and breathing life into designs with animations. I ensure that each project is not just aesthetically pleasing, but also strategically aligned to achieve business goals.< / p >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-4" >
< div >
< h2 class = "h2" > Skills< / h2 >
< span class = "html" > HTML< / span >
< span class = "css" > CSS< / span >
< span class = "javascript" > JavaScript< / span >
< span class = "shopify" > Shopify< / span >
< span class = "wordpress" > Wordpress< / span >
< span class = "github" > Github< / span >
< span class = "sqlbasics" > SQL< / span >
< span class = "linux" > Linux< / span >
< / div >
< div class = "py-3" >
< h2 class = "h2 py-3" > Tools< / h2 >
< span class = "photoshop" > Photoshop< / span >
< span class = "illustrator" > Illustrator< / span >
< span class = "premiere" > PremierePro< / span >
< span class = "figma" > Figma< / span >
< span class = "figma" > Canva< / span >
< / div >
< / div >
< / div >
< / section >
<!-- Projects -->
< section id = "projects" >
< div class = "container col-md-6 col-lg-8 py-5 text-center" >
< h1 class = "h1" > PROJECTS< / h1 >
< p class = "p p-1" > Here you will find more information about me, what I do, and my current skills mostly in terms of programming and technology.< / p >
< / div >
< div class = "row container d-inline-block d-flex justify-content-center flex-wrap mx-auto border rounded box-shadow" >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-3" >
< img src = "https://irp-cdn.multiscreensite.com/b58f31a3c41e4c408c4d824970f16db0/dms3rep/multi/iconfinder_Google_1298745.png" class = "img-fluid d-flex w-75 mx-auto my-5" style = "padding: 10px;" >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-4 mb-5" >
< h2 class = "h2" > Google< / h2 >
< p class = "p p-1 pt-4" > As a full-stack web developer at Google, I am responsible for designing, building, and maintaining web applications that support various Google products and services. My role involves both front-end and back-end development, collaborating with teams, and ensuring optimal user experiences. I contribute to Google's web ecosystem, serving a global user base.< / p >
< a href = "https://google.com/" target = "_blank" >
< button > View Website< / button >
< / a >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-3" >
< img src = "https://logos-download.com/wp-content/uploads/2016/02/Twitter_Logo_new.png" class = "img-fluid d-flex w-75 mx-auto my-5" style = "padding: 10px;" >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-4 mb-5" >
< h2 class = "h2" > Twitter< / h2 >
< p class = "p p-1 pt-4" > As a full-stack web developer at Twitter, I focus on crafting and enhancing web-based features and services for Twitter's platform. My responsibilities span front-end and back-end development, working closely with cross-functional teams to deliver a seamless user experience. I contribute to Twitter's dynamic social media landscape, connecting users worldwide in real time.< / p >
< a href = "https://Twitter.com/" target = "_blank" >
< button > View Website< / button >
< / a >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-3" >
< img src = "https://www.freeiconspng.com/uploads/facebook-transparent-pics-18.png" class = "img-fluid d-flex w-75 mx-auto my-5" style = "padding: 10px;" >
< / div >
< div class = "container col-sm-12 col-md-6 col-lg-5 py-4" >
< h2 class = "h2" > Facebook< / h2 >
< p class = "p p-1 pt-4" >
As a full-stack web developer at Facebook, my role centers on creating and improving web applications to support Facebook's vast array of features and services. I engage in front-end and back-end development, collaborating across teams to deliver an exceptional user experience. I play a part in Facebook's global social networking platform..< / p >
< a href = "https://fb.com/" target = "_blank" >
< button > View Website< / button >
< / a >
< / div >
< / div >
< / section >
< / main >
<!-- Contact Form Section Start -->
< section id = "contact" class = "section-3 text-center py-5" >
<!-- Contact Form Section Start -->
< div class = "container-fluid min-vh-50 text-white p-5" id = "contact-section" >
< h2 class = "text-dark" > Contact me< / h2 >
< p class = "p p-1" > Feel free to Contact me by submitting the form below and I will get back to you as soon as possible< / p >
< div class = "container d-grid mt-3 rounded col-xl-4 col-md-8 col-sm-12" >
< form id = "form-col" >
< div class = "row mt-5 justify-content-center p-3" >
< div class = "col" >
<!-- Name -->
< div class = "form-group" >
< label for = "textInput" > Name< / label >
< input type = "text" class = "form-control" id = "textInput" placeholder = "Your Name" required >
< / div >
<!-- Email Address -->
< div class = "form-group" >
< label for = "textInput" > Email Address< / label >
< input type = "text" class = "form-control" id = "textInput" placeholder = "Enter Email" required >
< / div >
<!-- Text Area -->
< div class = "form-group" >
< label for = "textareaInput" > Message< / label >
< textarea class = "form-control" id = "textareaInput" rows = "4" placeholder = "Message" > < / textarea >
< / div >
<!-- Button -->
< button type = "button" class = "m-5" data-toggle = "modal" data-target = "#modalDiv" > Submit< / button >
< / div >
< / div >
<!-- Modal -->
< div class = "modal fade text-secondary" id = "modalDiv" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h4 class = "modal-title" > Thank you for contacting us!< / h4 >
< button type = "button" class = "close" data-dismiss = "modal" > × < / button >
< / div >
< div class = "modal-body" >
< p > Message Successfully sent.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< footer id = "footer" class = "footer mt-5" >
< p class = "footer-end text-center" > © Copyright 2023. Made by Ron Reciproco< / p >
< div id = "awesome" class = "text-center py-1" >
< a href = "https://fb.com/" > < i class = "fab fa-facebook" > < / i > < / a >
< a href = "https://twitter.com/" > < i class = "fab fa-twitter" > < / i > < / a >
< a href = "https://linkedin.com/" > < i class = "fab fa-linkedin" > < / i > < / a >
< / div >
< / footer >
< script src = "https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity = "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin = "anonymous" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity = "sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin = "anonymous" > < / script >
<!-- Hamburger -->
< script >
$(document).ready(function() {
$('.navbar-toggler').click(function() {
$('.navbar-collapse').toggleClass('show');
});
});
< / script >
< / body >
< / html >
