My-Portfolio/index.html at master · MJ-RWA/My-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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio Website</title>

    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"/>
</head>
<body class="body">
    <header class="header1">
        <h1>Welcome to My Portfolio</h1>
         MJ | Dev Portfolio


    <div class="header2">
        <nav class="nav1">
                <a href="#AboutMe">About Me</a>
                <a href="#skills">Skills</a>
                <a href="#Myprojects">My Projects</a>
                <a href="#Contact">Contact</a>
        </nav>
    </div>
    </header>
<section id="AboutMe">
    <br>
    <br>
    <h2>About Me</h2>
     <img src="picture.jpeg" alt="My photo" class="about-img" sizes="20px">
     <p>Hello! My name is Mekjah Bassey, I am a <em><b>passionate</b></em> Frontend Developer and <em><b>Web3 enthusiast</b></em> with a strong interest in building user-friendly interfaces and exploring the future of decentralized technology. I enjoy creating clean, responsive, and functional web experiences while staying curious about emerging trends in blockchain and crypto.

My journey into Web3 has exposed me to areas such as airdrops, DeFi platforms, wallets, and NFT ecosystems, and I actively engage with Web3 communities to stay current with industry developments. I’m <em><b>continually learning</b></em> new technologies and refining my skills to create interfaces that are not only visually appealing but also intuitive and efficient.

As a frontend developer, I work with HTML, CSS, JavaScript, and modern frameworks to bring ideas to life. I believe good design is more than appearance it’s about usability, performance, and accessibility. My goal is to build products that are easy to use and powerful under the hood.

I’m driven by innovation, eager to collaborate, and excited about shaping the future of the web through Web3 technology.</p>
</section>

<section id="skills">
    <br>
    <h2>Skills</h2>
    <ul>
        <p><div class="skilldiv1">HTML5, CSS, JavaScript</div></p>
        <p><div class="skilldiv2">Responsive Web Design</div></p>
        <p><div class="skilldiv3">Web3 Technologies (Blockchain, DeFi, NFTs)</div></p>
        <p><div class="skilldiv4">Version Control (Git)</div></p>
    </ul>
</section>

<section id="Myprojects">
    <br>
    <h2>My Projects</h2>

    <div class="projects-container">

    <article class="project-card">
        <h3>Notes App</h3>
        <p>A simple notes application that allows users to create, save, and delete notes.</p>
        <a href="https://mj-rwa.github.io/Notes-App/" target="_blank">View Project</a>

    </article>
    <article class="article2">
        Project 2
        <br>
        <em>(Currently Unavailable)</em>
    </article>
    <article class="article3">
        Project 3
        <br>
        <em>(Currently Unavailable)</em>
    </article>
    </div>
</section>

<section id="Contact">
    <br>
    <h2>Contact Me</h2>

    <form id="Contactform"  class="form" action="https://formspree.io/f/xwpgnqpq" method="POST">
    <input class="input1" type="text"placeholder="Name"minlength="3" name="Name" maxlength="20" required
         oninvalid="this.setCustomValidity('Field cannot be empty')"
         oninput="this.setCustomValidity('')"/>
    <br>
    <input class="input2" type="email"placeholder="Email Address"  required name="Email"
         oninvalid="this.setCustomValidity('Please enter a valid email address')"
         oninput="this.setCustomValidity('')"/>
    <br>
    <textarea class="input3" type="text"placeholder="Your Message" minlength="10" required name="Message"
         oninvalid="this.setCustomValidity('Message must be at least 10 characters')"
         oninput="this.setCustomValidity('')"></textarea>
    <br>
    <button type="submit">Send Message</button>
    </form>
</section>


<footer class="footer">
    <div >
        <h1 style="font-size: 70px;">MJ | Dev</h1>
    </div>
    <div class="nav">
        <Navigation>
            <ul>
                <h3>nav</h3>
                <li><a href="#AboutMe">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#Myprojects">My Projects</a></li>
                <li><a href="#Contact">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="connect">
        <ul>
             <h3>Connect</h3>
             <p>Connect with me on</p>
             <a href="https://x.com/jus_debug" target="_blank"><i class="fa-brands fa-x-twitter fa-flip"></i> X</a>
             <br>
             <a href="https://www.linkedin.com/in/mekjah-bassey-8914b7393/" target="_blank"><i class="fa-brands fa-linkedin fa-flip"></i> LinkedIn</a>
             <br>
             <a href="https://github.com/MJ-RWA" target="_blank"><i class="fa-brands fa-github fa-flip"></i> GitHub</a>
             <br>
             <a href="https://www.figma.com/@mjdev" target="_blank"><i class="fa-brands fa-figma fa-flip fa-1x"></i>
 Figma</a>
        </ul>

    </div>


    <div class="footer1">
    <p>&copy; 2024 MJ | Dev Portfolio. All rights reserved.</p>
    </div>
</footer>
<script>
  const form = document.getElementById('Contactform');

  form.addEventListener('submit', function(e) {
    // Optional: prevent page reload (for AJAX submission)
    e.preventDefault();

    // Send the form using fetch
    fetch(form.action, {
      method: 'POST',
      body: new FormData(form),
      headers: { 'Accept': 'application/json' }
    })
    .then(response => {
      if (response.ok) {
        alert('Message sent!');
        form.reset(); // <-- This clears all input fields
      } else {
        alert('Oops! Something went wrong.');
      }
    })
    .catch(() => alert('Oops! Something went wrong.'));
  });
</script>

</body>
</html>