Mejor portafolio con inicio de sesión y publicaciones del sistema

Abrir en el editor Publica tu código

Recomendado

9 December 2024

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Portfolio</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <nav class="navbar">
        <div class="container">
            <a href="#" class="logo">Portfolio</a>
            <div class="nav-links">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#projects">Projects</a>
                <a href="#blog">Blog</a>
                <a href="#contact">Contact</a>
                <button id="theme-toggle" class="theme-btn">
                    <i class="fas fa-moon"></i>
                </button>
                <button id="auth-btn" class="auth-btn">
                    <i class="fas fa-user"></i> Sign In
                </button>
            </div>
            <button class="hamburger">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>

<section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Hi, I'm <span class="highlight">John Doe</span></h1>
                <h2 class="hero-subtitle">Frontend Developer & UI Designer</h2>
                <p class="hero-text">I create beautiful, responsive websites with modern technologies and user-friendly interfaces.</p>
                <div class="hero-buttons">
                    <a href="#projects" class="btn primary">View My Work</a>
                    <a href="#contact" class="btn secondary">Contact Me</a>
                </div>
            </div>
            <div class="hero-image">
                <div class="image-wrapper">
                    <img src="https://via.placeholder.com/400" alt="Profile Image" class="profile-img">
                    <div class="shape shape-1"></div>
                    <div class="shape shape-2"></div>
                </div>
            </div>
        </div>
    </section>

<section id="about" class="about">
        <div class="container">
            <h2 class="section-title">About <span class="highlight">Me</span></h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://via.placeholder.com/300" alt="About Image">
                </div>
                <div class="about-text">
                    <h3>Who am I?</h3>
                    <p>I'm a passionate frontend developer with 5 years of experience creating modern web applications. I specialize in React, Vue.js, and responsive design.</p>
                    <div class="skills">
                        <h4>My Skills</h4>
                        <div class="skill-tags">
                            <span class="skill-tag">HTML5</span>
                            <span class="skill-tag">CSS3</span>
                            <span class="skill-tag">JavaScript</span>
                            <span class="skill-tag">React</span>
                            <span class="skill-tag">Vue.js</span>
                            <span class="skill-tag">Node.js</span>
                            <span class="skill-tag">SASS</span>
                            <span class="skill-tag">Git</span>
                        </div>
                    </div>
                    <div class="about-buttons">
                        <a href="#" class="btn primary">Download CV</a>
                        <a href="#contact" class="btn secondary">Hire Me</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="projects" class="projects">
        <div class="container">
            <h2 class="section-title">My <span class="highlight">Projects</span></h2>
            <div class="projects-filter">
                <button class="filter-btn active" data-filter="all">All</button>
                <button class="filter-btn" data-filter="web">Web</button>
                <button class="filter-btn" data-filter="app">App</button>
                <button class="filter-btn" data-filter="design">Design</button>
            </div>
            <div class="projects-grid">
                
            </div>
        </div>
    </section>

<section id="blog" class="blog">
        <div class="container">
            <h2 class="section-title">My <span class="highlight">Blog</span></h2>
            <div class="blog-posts">
                
            </div>
            <div class="blog-controls">
                <button id="create-post-btn" class="btn primary" disabled>
                    <i class="fas fa-plus"></i> Create Post
                </button>
            </div>
        </div>
    </section>

<section id="contact" class="contact">
        <div class="container">
            <h2 class="section-title">Get In <span class="highlight">Touch</span></h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Contact Information</h3>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <span>john.doe@example.com</span>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone"></i>
                        <span>+1 (123) 456-7890</span>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>San Francisco, CA</span>
                    </div>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-github"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <form class="contact-form">
                    <div class="form-group">
                        <input type="text" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <input type="text" placeholder="Subject">
                    </div>
                    <div class="form-group">
                        <input placeholder="Your Message" rows="5" required />
                    </div>
                    <button type="submit" class="btn primary">Send Message</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-about">
                    <h3>Portfolio</h3>
                    <p>A modern responsive portfolio template with dark/light mode and interactive features.</p>
                </div>
                <div class="footer-links">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#projects">Projects</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-newsletter">
                    <h3>Newsletter</h3>
                    <form>
                        <input type="email" placeholder="Your Email">
                        <button type="submit" class="btn primary">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2023 Portfolio. All rights reserved.</p>
                <div class="theme-switcher">
                    <button id="footer-theme-toggle" class="theme-btn small">
                        <i class="fas fa-moon"></i> Toggle Theme
                    </button>
                </div>
            </div>
        </div>
    </footer>

<div id="auth-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">×</span>
            <h2>Sign In</h2>
            <div class="auth-options">
                <button id="google-auth" class="btn social-btn google">
                    <i class="fab fa-google"></i> Continue with Google
                </button>
                <button class="btn social-btn github">
                    <i class="fab fa-github"></i> Continue with GitHub
                </button>
            </div>
            <div class="auth-form">
                <form>
                    <div class="form-group">
                        <input type="email" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="password" placeholder="Password" required>
                    </div>
                    <button type="submit" class="btn primary">Sign In</button>
                </form>
            </div>
        </div>
    </div>

<div id="create-post-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">×</span>
            <h2>Create New Post</h2>
            <form id="post-form">
                <div class="form-group">
                    <input type="text" id="post-title" placeholder="Post Title" required>
                </div>
                <div class="form-group">
                    <input id="post-content" placeholder="Post Content" rows="8" required />
                </div>
                <div class="form-group">
                    <input type="text" id="post-tags" placeholder="Tags (comma separated)">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn primary">Publish</button>
                    <button type="button" class="btn secondary cancel-post">Cancel</button>
                </div>
            </form>
        </div>
    </div>

CSS

/* Root Variables - Easily Changeable Colors */
:root {
    /* Light Theme */
    --primary-color: #4361ee;
    --secondary-color: #3f37c9;
    --accent-color: #4895ef;
    --text-color: #2b2d42;
    --bg-color: #f8f9fa;
    --card-bg: #ffffff;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --footer-bg: #2b2d42;
    --footer-text: #ffffff;
    --border-color: #e9ecef;
    --success-color: #4bb543;
    --error-color: #ff3333;
    --warning-color: #ffcc00;
    
    /* Dark Theme */
    --dark-primary-color: #4895ef;
    --dark-secondary-color: #4361ee;
    --dark-accent-color: #3f37c9;
    --dark-text-color: #f8f9fa;
    --dark-bg-color: #121212;
    --dark-card-bg: #1e1e1e;
    --dark-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --dark-nav-bg: rgba(30, 30, 30, 0.9);
    --dark-border-color: #333333;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: all 0.3s ease;
}

body.dark-mode {
    --primary-color: var(--dark-primary-color);
    --secondary-color: var(--dark-secondary-color);
    --accent-color: var(--dark-accent-color);
    --text-color: var(--dark-text-color);
    --bg-color: var(--dark-bg-color);
    --card-bg: var(--dark-card-bg);
    --card-shadow: var(--dark-card-shadow);
    --nav-bg: var(--dark-nav-bg);
    --border-color: var(--dark-border-color);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    padding: 80px 0;
}

.highlight {
    color: var(--primary-color);
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn.primary {
    background-color: var(--primary-color);
    color: white;
}

.btn.primary:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
}

.btn.secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn.secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 50px;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--nav-bg);
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.theme-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-btn:hover {
    color: var(--primary-color);
    transform: rotate(30deg);
}

.auth-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.auth-btn:hover {
    background-color: var(--secondary-color);
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    padding-top: 100px;
    overflow: hidden;
}

.hero .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.hero-content {
    flex: 1;
    animation: fadeInLeft 1s ease;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.hero-text {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.hero-image {
    flex: 1;
    position: relative;
    animation: fadeInRight 1s ease;
}

.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.profile-img {
    width: 100%;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.shape {
    position: absolute;
    border-radius: 20px;
    z-index: 1;
}

.shape-1 {
    width: 100%;
    height: 100%;
    background-color: var(--primary-color);
    top: -15px;
    left: -15px;
    opacity: 0.3;
}

.shape-2 {
    width: 80%;
    height: 80%;
    background-color: var(--accent-color);
    bottom: -15px;
    right: -15px;
    opacity: 0.3;
}

/* About Section */
.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-image {
    flex: 1;
    animation: fadeInLeft 1s ease;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-text {
    flex: 1;
    animation: fadeInRight 1s ease;
}

.about-text h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.about-text p {
    margin-bottom: 30px;
}

.skills {
    margin-bottom: 30px;
}

.skills h4 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag {
    background-color: var(--primary-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.about-buttons {
    display: flex;
    gap: 15px;
}

/* Projects Section */
.projects-filter {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.filter-btn {
    background-color: transparent;
    color: var(--text-color);
    border: 2px solid var(--border-color);
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.project-card {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.project-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.1);
}

.project-info {
    padding: 20px;
}

.project-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.project-description {
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 15px;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.project-tag {
    background-color: var(--accent-color);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
}

.project-links {
    display: flex;
    gap: 10px;
}

.project-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.project-links a:hover {
    color: var(--secondary-color);
}

/* Blog Section */
.blog-posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.blog-post {
    background-color: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.post-header {
    position: relative;
}

.post-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: var(--primary-color);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
}

.post-content {
    padding: 20px;
}

.post-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.post-excerpt {
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 15px;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.post-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.post-actions {
    display: flex;
    gap: 15px;
}

.post-action {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-color);
    opacity: 0.7;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-action:hover {
    opacity: 1;
    color: var(--primary-color);
}

.blog-controls {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* Contact Section */
.contact-content {
    display: flex;
    gap: 50px;
}

.contact-info {
    flex: 1;
    animation: fadeInLeft 1s ease;
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    background-color: rgba(67, 97, 238, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(67, 97, 238, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.contact-form {
    flex: 1;
    animation: fadeInRight 1s ease;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--card-bg);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 60px 0 0;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-about h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: white;
}

.footer-about p {
    opacity: 0.8;
    margin-bottom: 20px;
}

.footer-links h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: white;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--footer-text);
    opacity: 0.8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-newsletter h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: white;
}

.footer-newsletter input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.footer-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.footer-newsletter .btn {
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    opacity: 0.7;
    font-size: 0.9rem;
}

.theme-switcher .theme-btn.small {
    font-size: 0.9rem;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--card-bg);
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal.show .modal-content {
    transform: translateY(0);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: var(--primary-color);
}

.modal h2 {
    margin-bottom: 20px;
    text-align: center;
}

.auth-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.social-btn.google {
    background-color: #4285F4;
    color: white;
}

.social-btn.google:hover {
    background-color: #357ae8;
}

.social-btn.github {
    background-color: #333;
    color: white;
}

.social-btn.github:hover {
    background-color: #222;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.cancel-post {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.cancel-post:hover {
    background-color: var(--border-color);
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero .container {
        flex-direction: column;
    }
    
    .hero-content, .hero-image {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .about-content {
        flex-direction: column;
    }
    
    .contact-content {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--nav-bg);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 40px;
        gap: 30px;
        transition: left 0.3s ease;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .hamburger {
        display: block;
    }
    
    section {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .projects-grid, .blog-posts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-buttons, .about-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn {
        width: 100%;
    }
    
    .projects-filter {
        flex-wrap: wrap;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

JS

// Project Filtering
    const filterButtons = document.querySelectorAll('.filter-btn');
    const projectGrid = document.querySelector('.projects-grid');
    
    // Sample project data
    const projects = [
        {
            title: "E-commerce Website",
            description: "A fully responsive e-commerce platform with cart functionality and payment integration.",
            image: "https://via.placeholder.com/400x300?text=E-commerce",
            tags: ["web", "design"],
            link: "#",
            github: "#"
        },
        {
            title: "Mobile Fitness App",
            description: "A cross-platform mobile application for tracking workouts and nutrition.",
            image: "https://via.placeholder.com/400x300?text=Fitness+App",
            tags: ["app"],
            link: "#",
            github: "#"
        },
        {
            title: "Portfolio Template",
            description: "A modern portfolio template with dark/light mode and animations.",
            image: "https://via.placeholder.com/400x300?text=Portfolio",
            tags: ["web", "design"],
            link: "#",
            github: "#"
        },
        {
            title: "Task Management Tool",
            description: "A productivity app for managing tasks with drag-and-drop functionality.",
            image: "https://via.placeholder.com/400x300?text=Task+App",
            tags: ["web", "app"],
            link: "#",
            github: "#"
        },
        {
            title: "Weather Dashboard",
            description: "Real-time weather information with 5-day forecast and location detection.",
            image: "https://via.placeholder.com/400x300?text=Weather",
            tags: ["web"],
            link: "#",
            github: "#"
        },
        {
            title: "UI Design System",
            description: "A comprehensive design system with reusable components and style guide.",
            image: "https://via.placeholder.com/400x300?text=Design+System",
            tags: ["design"],
            link: "#",
            github: "#"
        }
    ];

// Render projects
    function renderProjects(filter = 'all') {
        projectGrid.innerHTML = '';
        
        const filteredProjects = filter === 'all' 
            ? projects 
            : projects.filter(project => project.tags.includes(filter));
        
        filteredProjects.forEach(project => {
            const projectCard = document.createElement('div');
            projectCard.className = 'project-card';
            projectCard.innerHTML = `
                <div class="project-image">
                    <img src="${project.image}" alt="${project.title}">
                </div>
                <div class="project-info">
                    <h3 class="project-title">${project.title}</h3>
                    <p class="project-description">${project.description}</p>
                    <div class="project-tags">
                        ${project.tags.map(tag => `<span class="project-tag">${tag}</span>`).join('')}
                    </div>
                    <div class="project-links">
                        <a href="${project.link}" target="_blank"><i class="fas fa-external-link-alt"></i> Live Demo</a>
                        <a href="${project.github}" target="_blank"><i class="fab fa-github"></i> Code</a>
                    </div>
                </div>
            `;
            projectGrid.appendChild(projectCard);
        });
    }

// Initialize projects
    renderProjects();

// Filter projects
    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            
            // Filter projects
            const filter = button.dataset.filter;
            renderProjects(filter);
        });
    });

// Blog Posts Functionality
    const blogPostsContainer = document.querySelector('.blog-posts');
    const createPostBtn = document.getElementById('create-post-btn');
    const authBtn = document.getElementById('auth-btn');
    const authModal = document.getElementById('auth-modal');
    const createPostModal = document.getElementById('create-post-modal');
    const closeModalBtns = document.querySelectorAll('.close-modal');
    const googleAuthBtn = document.getElementById('google-auth');
    const postForm = document.getElementById('post-form');
    const cancelPostBtn = document.querySelector('.cancel-post');

// Sample blog data
    let blogPosts = [
        {
            id: 1,
            title: "Getting Started with React Hooks",
            excerpt: "Learn how to use React Hooks to simplify your functional components and manage state effectively.",
            image: "https://via.placeholder.com/600x400?text=React+Hooks",
            date: "May 15, 2023",
            author: {
                name: "John Doe",
                avatar: "https://via.placeholder.com/50?text=JD"
            },
            likes: 24,
            comments: 8,
            isLiked: false
        },
        {
            id: 2,
            title: "CSS Grid vs Flexbox",
            excerpt: "A comprehensive comparison between CSS Grid and Flexbox and when to use each one.",
            image: "https://via.placeholder.com/600x400?text=CSS+Grid+vs+Flexbox",
            date: "April 28, 2023",
            author: {
                name: "John Doe",
                avatar: "https://via.placeholder.com/50?text=JD"
            },
            likes: 42,
            comments: 15,
            isLiked: false
        },
        {
            id: 3,
            title: "Building a REST API with Node.js",
            excerpt: "Step-by-step guide to creating a robust REST API using Node.js and Express.",
            image: "https://via.placeholder.com/600x400?text=Node.js+API",
            date: "March 10, 2023",
            author: {
                name: "John Doe",
                avatar: "https://via.placeholder.com/50?text=JD"
            },
            likes: 36,
            comments: 12,
            isLiked: false
        }
    ];

// User state
    let currentUser = null;

// Render blog posts
    function renderBlogPosts() {
        blogPostsContainer.innerHTML = '';
        
        blogPosts.forEach(post => {
            const postElement = document.createElement('div');
            postElement.className = 'blog-post';
            postElement.innerHTML = `
                <div class="post-header">
                    <img src="${post.image}" alt="${post.title}" class="post-image">
                    <span class="post-date">${post.date}</span>
                </div>
                <div class="post-content">
                    <h3 class="post-title">${post.title}</h3>
                    <p class="post-excerpt">${post.excerpt}</p>
                    <div class="post-meta">
                        <div class="post-author">
                            <img src="${post.author.avatar}" alt="${post.author.name}" class="author-avatar">
                            <span class="author-name">${post.author.name}</span>
                        </div>
                        <div class="post-actions">
                            <div class="post-action like-btn" data-id="${post.id}">
                                <i class="fas fa-heart ${post.isLiked ? 'liked' : ''}"></i>
                                <span>${post.likes}</span>
                            </div>
                            <div class="post-action">
                                <i class="fas fa-comment"></i>
                                <span>${post.comments}</span>
                            </div>
                            <div class="post-action">
                                <i class="fas fa-share"></i>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            blogPostsContainer.appendChild(postElement);
        });

// Add event listeners to like buttons
        document.querySelectorAll('.like-btn').forEach(btn => {
            btn.addEventListener('click', handleLike);
        });
    }

// Initialize blog posts
    renderBlogPosts();

// Handle like functionality
    function handleLike(e) {
        if (!currentUser) {
            showAuthModal();
            return;
        }

// Modal functionality
    function showAuthModal() {
        authModal.classList.add('show');
        document.body.style.overflow = 'hidden';
    }

function showCreatePostModal() {
        if (!currentUser) {
            showAuthModal();
            return;
        }
        createPostModal.classList.add('show');
        document.body.style.overflow = 'hidden';
    }

function closeModals() {
        authModal.classList.remove('show');
        createPostModal.classList.remove('show');
        document.body.style.overflow = '';
    }

// Event listeners for modals
    authBtn.addEventListener('click', showAuthModal);
    createPostBtn.addEventListener('click', showCreatePostModal);
    closeModalBtns.forEach(btn => btn.addEventListener('click', closeModals));

// Close modal when clicking outside
    window.addEventListener('click', (e) => {
        if (e.target === authModal) closeModals();
        if (e.target === createPostModal) closeModals();
    });

// Google Auth simulation
    googleAuthBtn.addEventListener('click', () => {
        // In a real app, this would use Firebase Auth or similar
        currentUser = {
            name: "John Doe",
            email: "john.doe@example.com",
            avatar: "https://via.placeholder.com/50?text=JD"
        };
        
        // Update UI
        authBtn.innerHTML = `<img src="${currentUser.avatar}" alt="${currentUser.name}" class="user-avatar"> ${currentUser.name}`;
        createPostBtn.disabled = false;
        closeModals();
        
        // Show success message
        alert(`Successfully signed in as ${currentUser.email}`);
    });

// Handle post creation
    postForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const title = document.getElementById('post-title').value;
        const content = document.getElementById('post-content').value;
        const tags = document.getElementById('post-tags').value;
        
        const newPost = {
            id: blogPosts.length + 1,
            title,
            excerpt: content.length > 100 ? content.substring(0, 100) + '...' : content,
            image: "https://via.placeholder.com/600x400?text=New+Post",
            date: new Date().toLocaleDateString('en-US', { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            }),
            author: {
                name: currentUser.name,
                avatar: currentUser.avatar
            },
            likes: 0,
            comments: 0,
            isLiked: false
        };
        
        blogPosts.unshift(newPost);
        renderBlogPosts();
        
        // Reset form and close modal
        postForm.reset();
        closeModals();
        
        // Show success message
        alert('Post created successfully!');
    });

cancelPostBtn.addEventListener('click', closeModals);

// Animation on scroll
    function animateOnScroll() {
        const elements = document.querySelectorAll('.hero-content, .hero-image, .about-image, .about-text, .contact-info, .contact-form');
        
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (elementPosition < screenPosition) {
                element.style.animation = 'fadeInUp 1s ease forwards';
            }
        });
    }

// Initial check
    animateOnScroll();
    
    // Check on scroll
    window.addEventListener('scroll', animateOnScroll);

// Form validation
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', (e) => {
            let isValid = true;
            
            form.querySelectorAll('[required]').forEach(input => {
                if (!input.value.trim()) {
                    isValid = false;
                    input.style.borderColor = 'var(--error-color)';
                    
                    setTimeout(() => {
                        input.style.borderColor = 'var(--border-color)';
                    }, 2000);
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields.');
            }
        });
    });

// Initialize user state
    function checkAuthState() {
        // In a real app, this would check Firebase Auth or similar
        // For demo purposes, we'll simulate no user initially
        currentUser = null;
        createPostBtn.disabled = true;
    }

checkAuthState();
});

Mejor portafolio con inicio de sesión y publicaciones del sistema

Recomendado

Un código de slowlogic992

Un código de Metehan

inicio de sesión moderno

HTML

CSS

JS

Recomendado

Un código de slowlogic992

Un código de Metehan

inicio de sesión moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS