dochoar.github.io/blog.html at main · dochoar/dochoar.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Research Log | David Ochoa Resendiz</title>
    <!-- Fonts -->
    <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=Inter:wght@300;400;600&family=Outfit:wght@400;700;800&display=swap"
        rel="stylesheet">
    <!-- Styles -->
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Adjust header for non-home page */
        header {
            position: sticky;
            top: 0;
            background: rgba(10, 14, 23, 0.95);
            backdrop-filter: blur(12px);
        }

        .hero-blog {
            padding-top: 140px;
            padding-bottom: 56px;
            text-align: center;
            background:
                radial-gradient(circle at 20% 10%, rgba(56, 178, 172, 0.18), transparent 55%),
                radial-gradient(circle at 80% 80%, rgba(240, 230, 140, 0.08), transparent 55%);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .hero-blog .section-title h1 {
            font-family: var(--font-heading);
            font-size: 2.8rem;
            letter-spacing: 0.02em;
            margin-bottom: 0.75rem;
            background: linear-gradient(to right, #ffffff, var(--text-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-blog .section-title p {
            max-width: 640px;
            margin: 0.5rem auto 0;
            color: var(--text-secondary);
            font-size: 1.05rem;
        }
    </style>
</head>

<body>

    <!-- Header -->
    <header>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html" data-i18n="nav_home">Home</a></li>
                <li><a href="about.html" data-i18n="nav_about">About Me</a></li>
                <li><a href="publications.html" data-i18n="nav_articles">Publications</a></li>
                <li><a href="blog.html" class="active" data-i18n="nav_blog">Research Log</a></li>
                <li><a href="career.html" data-i18n="nav_collabs">Career</a></li>
            </ul>
        </nav>
        <button id="lang-toggle" class="lang-btn">ESPAÑOL</button>
        <div class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </div>
    </header>

    <!-- Blog Hero -->
    <section class="hero-blog">
        <div class="section-title">
            <h1 data-i18n="blog_title">Research Log</h1>
            <p data-i18n="blog_subtitle">Latest insights, methodology updates, and community news.</p>
        </div>
    </section>

    <!-- Research Log / Blog Section -->
    <section id="blog" style="padding-top: 0;">
        <div class="blog-grid">
            <!-- Featured Log Entry -->
            <article class="blog-card featured">
                <div class="blog-date">Jan 18, 2026</div>
                <h3 data-i18n="blog_1_title">Optimizing Basis Sets for Large Scale Systems</h3>
                <p data-i18n="blog_1_desc">A look into the trade-offs between accuracy and computational cost when
                    dealing with macromolecules...</p>
                <a href="#" class="read-more">Read Entry <i class="fas fa-arrow-right"></i></a>
            </article>
            <!-- Secondary Entries -->
            <article class="blog-card">
                <div class="blog-date">Dec 12, 2025</div>
                <h3 data-i18n="blog_2_title">Python vs. Fortran in 2026</h3>
                <p data-i18n="blog_2_desc">Why modern Python libraries are closing the gap in high-performance computing
                    pipelines.</p>
                <a href="#" class="read-more">Read Entry <i class="fas fa-arrow-right"></i></a>
            </article>
            <article class="blog-card">
                <div class="blog-date">Nov 30, 2025</div>
                <h3 data-i18n="blog_3_title">Chess & Strategy</h3>
                <p data-i18n="blog_3_desc">How competitive chess influences problem-solving in computational chemistry.
                </p>
                <a href="#" class="read-more">Read Entry <i class="fas fa-arrow-right"></i></a>
            </article>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="social-links">
            <a href="mailto:ochoadr@gmail.com" class="social-icon"><i class="fas fa-envelope"></i></a>
            <a href="https://github.com/dochoar" target="_blank" class="social-icon"><i class="fab fa-github"></i></a>
            <a href="https://www.researchgate.net/profile/David-Ochoa-Resendiz" target="_blank" class="social-icon"><i
                    class="fab fa-researchgate"></i></a>
            <a href="https://youtube.com/c/CompendiodeClases" target="_blank" class="social-icon"><i
                    class="fab fa-youtube"></i></a>
        </div>
        <p>&copy; 2026 David Ochoa Resendiz. Cuernavaca, Morelos.</p>
    </footer>

    <script src="script.js"></script>
</body>

</html>