-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
139 lines (133 loc) · 6.2 KB
/
index.html
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
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="contact-info">
<div class="profile">
<img src="https://styles.redditmedia.com/t5_5pq0bo/styles/profileIcon_0uhzk56mi2d81.png?width=256&height=256&frame=1&auto=webp&crop=256:256,smart&s=a9bab2190338877765e3209c580d83a97b3564af" alt="Profile Picture">
<div class="profile-text">
<div class="name">Developer: <br> Michael R. Gibson</div>
<div class="email">[email protected]</div>
<div class="phone">xxx.xxx.4923</div>
</div>
</div>
</div>
<nav>
<ul>
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Project Details</a></li>
<li><a href="#" class="nav-link">Skills</a></li>
<li><a href="#" class="nav-link">Recommendations</a></li>
</ul>
</nav>
</header>
<section class="about-me">
<h2>About Me</h2>
<div class="profile-bio">
<div class="profile-image">
<img src="https://styles.redditmedia.com/t5_5pq0bo/styles/profileIcon_0uhzk56mi2d81.png?width=256&height=256&frame=1&auto=webp&crop=256:256,smart&s=a9bab2190338877765e3209c580d83a97b3564af" alt="Profile Picture">
</div>
<div class="bio">
<p>Welcome to my corner of the web! I'm Michael R. Gibson, an aspiring IBM Developer passionate about all things tech. With a background in full-stack development, I thrive on bringing innovative ideas to life through code.</p>
<p>My journey in the world of development began years ago, sparked by a fascination with how technology can shape and revolutionize industries. Since then, I've honed my skills in various programming languages, frameworks, and methodologies to tackle diverse challenges.</p>
<p>Whether it's crafting elegant front-end interfaces or architecting robust backend systems, I enjoy every aspect of the development process. I believe in the power of collaboration and continuously seek opportunities to learn and grow alongside fellow developers.</p>
</div>
</div>
<div class="contact">
<h3>Get in Touch</h3>
<ul>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Phone: xxx.xxx.4923</li>
</ul>
</div>
</section>
<section class="skills-gallery">
<h2>Skills</h2>
<div class="skill-box-container">
<div class="skill-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsubI1xnS2EsbFC7IKOtHXy3o2yp5zNGHX8-mLk-0nVw&s" alt="HTML Logo">
<p>HTML5</p>
</div>
<div class="skill-box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS Logo">
<p>CSS3</p>
</div>
<div class="skill-box">
<img src="https://repository-images.githubusercontent.com/657736250/efe020c3-cfc2-41f9-be41-ad581ffc9969" alt="JavaScript Logo">
<p>JavaScript</p>
</div>
<div class="skill-box">
<img src="https://www.webfx.com/wp-content/uploads/2022/08/github-logo.png" alt="Github Logo">
<p>GitHub</p>
</div>
<div class="skill-box">
<img src="https://qph.cf2.quoracdn.net/main-qimg-28cadbd02699c25a88e5c78d73c7babc" alt="Python Logo">
<p>Python</p>
</div>
<!-- Add more skill boxes for additional skills -->
</div>
<section class="projects">
<h2>Project Details</h2>
<div class="project-details">
<div class="project">
<h3>Project 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum eget ante sed tristique.</p>
<p>Client: Self Made Culture Inc.</p>
<p>Duration: 2 years</p>
</div>
<div class="project">
<h3>Project 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<p>Client: GRYY Corp.</p>
<p>Duration: 4 months</p>
</div>
<div class="project">
<h3>Project 3</h3>
<p>Etiam nec lectus sit amet felis tristique hendrerit. Vestibulum ultrices, orci nec suscipit laoreet, ante lorem efficitur nisl.</p>
<p>Client: Fox LLc.</p>
<p>Duration: 5 months</p>
</div>
<div class="recommendations-block">
<h2>Recommendations</h2>
<div class="recommendation-box">
<h3>Recommendation 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendation-box">
<h3>Recommendation 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendation-box">
<h3>Recommendation 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero in felis commodo, id tristique libero vehicula.</p>
</div>
<div class="recommendations-form">
<h2>Leave a Recommendation</h2>
<form id="recommendation-form">
<div class="form-group">
<label for="name"></label>
<input type="text" id="name" name="name" placeholder="Name (Optional):">
</div>
<div class="form-group">
<label for="message"></label>
<textarea id="message" name="message" required placeholder="Message"></textarea>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
<div id="recommendation-box"></div>
</div>
<!-- New recommendation box will be added here -->
</div>
</div>
</section>
</section>
</body>
</html>