Portfolio/index.html at main · youweb3/Portfolio · 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
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Yousef Shaikhan - Portfolio</title>
    <link rel="stylesheet" href="styles.css" />

    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
  </head>

  <body>
    <header>
      <div class="logo">
        <a class="highlight" href="https://github.com/youweb3" target="_blank"
          >youweb3</a
        >Portfolio
      </div>
      <nav class="navbar">
        <ul class="nav-links" id="navLinks">
          <li><a href="./index.html">Home</a></li>
          <li><a href="./project.html">Project</a></li>
          <li><a href="./service.html">Service</a></li>
          <li><a href="./about.html">About</a></li>
          <li><a href="./contact.html">Contact</a></li>
        </ul>
        <div class="hamburger" id="hamburger">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </nav>
    </header>

    <main>
      <!-- Hero Section -->
      <section class="hero">
        <div class="hero-container">
          <div class="hero-content">
            <h1 class="hero-text">
              Hi, I'm <span class="highlight">Yousef</span>
            </h1>
            <h2 class="hero-subtext">Software Developer</h2>
            <p class="hero-describe">
              and designer passionate about building web applications that are
              fast, responsive, and visually appealing. I combine creativity
              with problem-solving to deliver projects that make an impact.<br />
              <i>"Turning ideas into elegant digital solutions is what I do best."</i>
              <button class="read-more-btn" type="button">Read More</button>
            </p>
            <div class="hero-buttons">
              <a href="./contact.html" class="btn btn-hero">
                Work With Yousef <i class="fas fa-arrow-right"></i>
              </a>
              <a
                href="./Resume/Yousef-Shaikhan-CV.pdf"
                download
                class="btn btn-link"
                >Download Resume <i class="fas fa-download"></i
              ></a>
              <a href="./project.html" class="btn btn-link">Portfolio</a>
            </div>
          </div>
          <div class="hero-image">
            <div class="image-glow"></div>
            <img
              src="./images/Yousef.jpg"
              alt="Yousef - Software Developer"
              class="profile-image"
            />
          </div>
        </div>
      </section>
    </main>

    <!-- Modal -->
    <section>
      <div class="modal" id="read">
        <div class="modal-content">
          <span class="close">&times;</span>
          <!-- <h2>Profile</h2> -->
          <p class="p-read-more">
            Software Developer with a background in Mechanical
            Engineering. experience in front-end development using HTML, CSS,
            JavaScript, React, and Git for version control.<br />
            I have over Four years of experience in roles that required
            problem-solving, communication, and project management. My work in
            mechanical design helped me develop strong attention to detail and
            creative thinking, I have successfully increased lead generation by
            20%.<br />
            Additionally, as a Bank Administrator I improved my organizational
            and data management skills, helping me handle complex projects, and
            boosting user engagement by 30%.<br />
            I’m passionate about using Agile methodologies in web development
            and keeping up with new technologies. I’m eager to learn and create
            effective solutions. I am highly motivated and enjoy working in
            teams where I can contribute to innovative software projects.
          </p>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-content">
        <div class="contact-info">
          <p>
            Email:
            <a href="mailto:yousef.shaikhan@gmail.com"
              >yousef.shaikhan@gmail.com</a
            >
          </p>
        </div>
        <div class="media-icons">
          <a href="#"><i class="fa-brands fa-facebook"></i></a>
          <a href="#"><i class="fa-brands fa-linkedin"></i></a>
          <a href="https://github.com/youweb3" target="_blank"
            ><i class="fa-brands fa-github"></i
          ></a>
          <a href="#"><i class="fa-brands fa-twitter"></i></a>
          <a href=""><i class="fa-brands fa-instagram"></i></a>
        </div>
        <div class="copy-right">
          <p>&copy; 2025 Yousef Shaikhan. All rights reserved</p>
        </div>
      </div>
    </footer>

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