HTMLPortfolioProject/src/index.html at bd212f87f837b52eeec1311a2ee7123d00d3ae83 · codeschool-projects/HTMLPortfolioProject · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main.css" />
    <title>Sergio Cruz - Portfolio</title>
  </head>
  <body>
    <header>
      <nav>
        <div class="logo">Sergio Cruz</div>
        <ul class="nav-links">
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section id="home">
      <h1>Welcome to My Portfolio</h1>
      <p>Hi! I’m Sergio Cruz, a software engineer passionate about building innovative and scalable web applications. Take a look at my work and skills below!</p>
    </section>

    <section id="about">
      <h2>About Me</h2>
      <p>I’m a seasoned engineering leader with over 8 years of experience in software development. I specialize in leading teams that ship high-quality software quickly, while focusing on user experience and maintainable code. My expertise spans full-stack development, cloud infrastructure, and agile methodologies.</p>
      <p>When I’m not coding or managing projects, I enjoy mentoring junior developers, exploring new technologies, and contributing to open-source.</p>
    </section>

    <section id="services">
      <h2>Services</h2>
      <ul>
        <li><strong>Full-Stack Web Development:</strong> Building responsive and performant web applications using modern frameworks like React, Node.js, and Django.</li>
        <li><strong>Technical Leadership:</strong> Leading engineering teams, fostering collaboration, and implementing agile best practices.</li>
        <li><strong>Cloud Architecture:</strong> Designing scalable cloud solutions with AWS and Azure.</li>
        <li><strong>Consulting & Mentorship:</strong> Providing guidance on software architecture, code reviews, and career development.</li>
      </ul>
    </section>

    <section id="portfolio">
      <h2>Portfolio</h2>
      <div class="project">
        <h3>Project Atlas</h3>
        <p>A SaaS platform for logistics companies to track shipments in real-time. Built with React, Node.js, and AWS Lambda to ensure scalability and low latency.</p>
        <a href="https://github.com/sergiocruz/project-atlas" target="_blank" rel="noopener">View on GitHub</a>
      </div>
      <div class="project">
        <h3>DevConnect</h3>
        <p>A community platform for developers to share projects, blog posts, and tutorials. Created with Django and PostgreSQL, featuring OAuth authentication and a custom CMS.</p>
        <a href="https://devconnect.example.com" target="_blank" rel="noopener">Live Site</a>
      </div>
      <div class="project">
        <h3>TaskFlow</h3>
        <p>A task management app designed for teams to collaborate seamlessly, with real-time updates and drag-and-drop interface using React and Firebase.</p>
        <a href="https://taskflow.example.com" target="_blank" rel="noopener">Live Demo</a>
      </div>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>If you want to get in touch, feel free to reach out via the following channels:</p>
      <ul>
        <li>Email: <a href="mailto:sergio.cruz@example.com">sergio.cruz@example.com</a></li>
        <li>LinkedIn: <a href="https://linkedin.com/in/sergiocruz" target="_blank" rel="noopener">linkedin.com/in/sergiocruz</a></li>
        <li>GitHub: <a href="https://github.com/sergiocruz" target="_blank" rel="noopener">github.com/sergiocruz</a></li>
      </ul>
    </section>

    <footer>
      <p>&copy; 2025 Sergio Cruz</p>
    </footer>
  </body>
</html>