Conrado Roura´s official website

app.js

@@ -0,0 +1,38 @@
+//Import modules
+const express = require('express');
+const path = require('path');
+
+// initialize the app
+const app = express();
+
+// Set up the port
+const PORT = process.env.PORT || 3000;
+
+//  Serve static files
+// This tells Express to serve files from the 'public' directory
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Set up views directory for HTML files
+app.set('views', path.join(__dirname, 'views'));
+
+// Serve HTML pages on different routes
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views/home.html'));
+});
+
+app.get('/about', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views/about.html'));
+});
+
+app.get('/works', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views/works.html'));
+});
+
+app.get('/gallery', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views/PhotoGallery.html'));
+  });
+
+  //  Start the server
+  app.listen(PORT, () => {
+    console.log(`Server is running on http://localhost:${PORT}`);
+  });

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "express": "^4.21.0"
+  }
+}

public/app.css

@@ -0,0 +1,333 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+    height: 100vh;
+}
+
+footer {
+    color: rgb(0, 0, 0);
+    text-align: center;
+    height: 30px;
+    position: fixed;
+    bottom: 0;
+    background-color: #f0f0f0;
+    width: 100%;
+}
+
+nav ul {
+    list-style: none;
+    padding: 20px 0 ;
+margin: 0;
+}
+
+nav ul li {
+    display: inline;
+    padding: 20px;
+
+}
+
+nav ul li:hover{
+    background-color: #ba904881;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: #333;
+    font-weight: bold;
+}
+
+.home-section {
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+footer p {
+    margin: 0;
+    padding: 5px;
+    font-size: smaller;
+}
+
+
+.conradoh1{
+    font-weight: bold;
+    background-image: url('https://media.gettyimages.com/id/930591096/es/foto/vancouver-bc-conrado-roura-of-argentina-scores-during-game-argentina-vs-samoa-pool-b-match-at.jpg?s=612x612&w=0&k=20&c=yrYAexRHTqq_i6Ue3AjRKQ5GYTx9y_qOvL32FrTVXFI='); 
+    background-size: cover; 
+    background-position: center; 
+    -webkit-background-clip: text; 
+    color: transparent; 
+    font-size: 7rem;
+}
+
+.div-home:hover{
+    transition: all 4s ease;
+/* height: 70%; */
+    width: 100%;
+    background-image: url('https://media.gettyimages.com/id/930591096/es/foto/vancouver-bc-conrado-roura-of-argentina-scores-during-game-argentina-vs-samoa-pool-b-match-at.jpg?s=612x612&w=0&k=20&c=yrYAexRHTqq_i6Ue3AjRKQ5GYTx9y_qOvL32FrTVXFI='); 
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    z-index: 10; 
+}
+
+
+.about-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 70vh;
+
+
+
+}
+
+.cards{
+    display: flex;
+    justify-content: center;
+flex-direction: row;
+    align-items: center;
+}
+
+.card {
+    margin: 10px;
+    width: 22rem;
+    height: 20rem;
+position: relative;
+}
+
+.card-inner {
+    position: relative;
+    width: 90%;
+    height: 100%;
+    transition: transform 1s; 
+}
+
+
+
+.card-front, .card-back {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden; /* Hides the back when not visible */
+    display: flex; 
+    transition: opacity 0.6s ease-in-out; /* Smooth transition */
+
+    justify-content: center; 
+    align-items: center; 
+    flex-direction: row;
+}
+
+.card-front {
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
+z-index: 1;
+    opacity: 1;
+}
+
+.card-back {
+    z-index: 0;
+    opacity: 0;
+    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.288);
+}
+
+.card-back p{
+    padding: 20px;
+}
+
+.card:hover .card-front {
+    opacity: 0; 
+}
+.card:hover .card-back {
+    z-index: 1; 
+    opacity: 1; 
+}
+
+.biography .card-front {
+    background-image: url('/conraBiografia.png'); 
+    background-size: cover; 
+    background-position: center; 
+    color: rgb(0, 0, 0); 
+    display: flex; 
+    justify-content: center; 
+    align-items: center; 
+}
+
+.card-front h2{
+background-color: #ffffff56;    
+width: 100%;
+text-align: center;
+padding: 10px;
+
+}
+
+.career .card-front{
+    background-image: url('/careerConra.png'); 
+    color: rgb(0, 0, 0); 
+}
+
+.legacy .card-front{
+    background-image: url('/legacy.png'); 
+}
+/* Photo Gallery Grid */
+.photo-gallery {
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+}
+
+/* Masonry effect using columns */
+.gallery-grid {
+    column-count: 4; /* Number of columns, adjust as needed */
+    column-gap: 10px; /* Space between columns */
+    width: 90%;
+    max-width: 1200px;
+}
+
+/* Styling for individual images */
+.gallery-grid img {
+    width: 100%;
+    margin-bottom: 10px; /* Space between images vertically */
+    object-fit: cover;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+/* Hover effect */
+.gallery-grid img:hover {
+    transform: scale(1.05); /* Slight zoom effect on hover */
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 1200px) {
+    .gallery-grid {
+        column-count: 3; /* Reduce columns on smaller screens */
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .gallery-grid {
+        column-count: 2;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .gallery-grid {
+        column-count: 1;
+    }
+}
+
+
+/* Scrollbar Styles for Webkit-based browsers (Chrome, Safari, etc.) */
+::-webkit-scrollbar {
+    width: 5px; /* Width of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+    background: #f0f0f0; 
+    border-radius: 50px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #545454; /* Thumb color */
+    border-radius: 50px; /* Rounded corners for the thumb */
+    border: 3px solid #f0f0f0; /* Adds space between the thumb and the track */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #ba9048; /* Darker thumb color on hover */
+}
+
+/* For Firefox */
+* {
+    scrollbar-width: thin; /* Makes the scrollbar thinner */
+    scrollbar-color: #f0f0f0 #cececec4; /* Thumb color and track color */
+}
+
+
+.professional-board {
+    padding: 20px;
+    background-color: #f5f5f5;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+}
+
+.profile-overview {
+    text-align: left;
+display: flex;
+flex-direction: row;
+justify-content: center;
+align-items: center;
+    width:25rem;
+    background-color: white;
+    border: 1px solid #ccc;
+}
+
+.profile-overview img {
+    border-radius: 10px;
+    width: 200px;
+    height: 300px;
+     object-fit: cover;
+    margin-bottom: 10px;
+}
+.div-of-divs{
+    column-count: 4;
+    column-gap: 10px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Grid layout for responsive columns */
+}
+
+.text-profile-overview{
+    padding: 0 20px ;
+}
+
+.profile-overview h1, .profile-overview h2 {
+    margin: 0;
+    padding: 10px 0;
+}
+
+.profile-overview h2{
+font-size: smaller;
+text-align: center;
+}
+
+.profile-overview, .career-timeline, .skills-section, .testimonials, .media-section {
+    background-color: white;
+    border: 1px solid #ccc;
+    padding: 20px;
+    margin: 1rem;
+    width: 30rem;
+    border-radius: 10px;
+}
+
+.career-timeline ul, .skills-section ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.career-timeline ul li, .skills-section ul li {
+    padding: 5px 0;
+}
+
+.testimonials blockquote {
+    font-style: italic;
+    padding: 10px;
+    border-left: 5px solid #ccc;
+    margin: 0;
+}
+
+.media-section a {
+    color: #007bff;
+    text-decoration: none;
+}
+