web-development/index.html at main · ub-victor/web-development · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Learn - Get Started Today</title>
  <meta name="description" content="Learn is a platform that offers free courses for everyone. Start learning today!" />
  <head>
    <!-- Standard Favicons (Most Browsers) -->
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">

    <!-- Fallback for Old Browsers (IE, etc.) -->
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- Apple Touch Icon (iOS/Safari) -->
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">

    <!-- Android/Chrome Icons (PWA) -->
    <link rel="icon" type="image/png" sizes="192x192" href="images/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="images/android-chrome-512x512.png">

    <!-- Optional: Web Manifest (PWA) -->
    <link rel="manifest" href="images/site.webmanifest">

    <!-- Optional: Chrome Theme Color -->
    <meta name="theme-color" content="#ffffff">
</head>
  <!-- CSS -->
  <link rel="stylesheet" href="main.css"/>
</head>

<body>
    <!-- Navbar section -->
   <header>
    <div>
      <a href="index.html"><img src="images/logo.png" alt="logo"></a>
      <nav>
        <ul>
          <li><a href="#about">About Me</a></li>
          <li><a href="#journey">Journey</a></li>
          <li><a href="#goals">Goals</a></li>
        </ul>
      </nav>
    </div>
   </header>
  <main>

    <!-- Hero section -->
    <div class="hero-section">
      <h2>Hello! <br/>I'm Victor Ushindi</h2>
      <p>A Web Developer</p>
      <a href="mailto:victoireushindi371@gmail.co"><button>Contact Me</button></a>
    </div>

    <!-- About me section -->
    <section class="about-me-section" id="about">
      <div class="container">
          <h1 class="section-title">About Me</h1>
          <div class="about-content">
              <p class="about-text">
                  I'm a passionate web developer dedicated to creating engaging and user-friendly websites.
                  From the moment <br> I started coding, I knew I wanted to build digital experiences that people
                  love to use. I thrive on turning creative ideas into functional websites that make a difference.
              </p>
          </div>
      </div>
    </section>

    <!-- Coding journey section -->
    <section class="Coding-journey-section" id="journey">
      <h2 class="title">Coding Journey</h2>

      <div class="journey-container">
          <div class="journey-card intro">
              <img src="images/intro-to-web.png" alt="Web Development" class="journey-icon">
              <h2 class="journey-title">Intro To Web Development</h2>
              <p class="journey-description">Learned how to build<br>Web Html Projects</p>
          </div>

          <div class="journey-card react">
              <img src="images/react.png" alt="React Development" class="journey-icon">
              <h2 class="journey-title">React Development</h2>
              <p class="journey-description">Learned how to build Single <br> Page Application</p>
          </div>

          <div class="journey-card backend">
              <img src="images/backend.png" alt="Backend Development" class="journey-icon">
              <h2 class="journey-title">Back-end Development</h2>
              <p class="journey-description">Learn how to build back-<br>end services</p>
          </div>
      </div>
    </section>
    <!-- About me section -->
    <section class="about-me-section" id="goals">
      <div class="container">
          <h1 class="section-title">My goals</h1>
          <div class="about-content">
              <p class="about-text">
                I aspire to mentor and support other aspiring developers, sharing the knowledge and experience I’ve gained along the way. <br> By fostering a collaborative and encouraging environment, I hope to help others achieve their own goals and grow in their careers. Building strong, supportive communities is important to me, as I believe we can achieve more together.
              </p>
          </div>
      </div>
    </section>
  </main>
  <footer class="website-footer">
    <!-- Footer section -->
    <div class="footer-content">
        <p class="footer-text">Website Made by <span class="heart">Victor</span> From DRC © <span id="current-year"></span></p>
    </div>
</footer>
  <!-- JavaScript -->
  <script src="script.js"></script>
</body>

</html>