-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (136 loc) · 6.64 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
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Meet Me</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
<script src="https://kit.fontawesome.com/ac6d0c0a18.js" crossorigin="anonymous"></script>
</head>
<body id="top">
<div id="bg-img"></div>
<header>
<div id="header">
<h1>About Me</h1>
</div>
</header>
<main>
<section id="card-section">
<div id="card">
<div>
<img src="images/profile.jpg" alt="An image of a character with two thumbs up">
</div>
<div id="card-info">
<div id="info-text">
<h3>Hey There!</h3>
<p>
I've been learning Web Developement for about 2 months now.
This is my second site that I've made from scratch!
You can check out my other <a id="link" href="#projects">Projects</a> down below in this page.
</p>
</div>
<table>
<tr>
<td class="row-cat">Name</td>
<td class="row-data">Joseph</td>
</tr>
<tr>
<td class="row-cat">Experience</td>
<td class="row-data">2 Months</td>
</tr>
<tr>
<td class="row-cat">Location</td>
<td class="row-data">Malaysia, Cheras</td>
</tr>
<tr>
<td class="row-cat">Email</td>
<td class="row-data">johndoe@gmail.com</td>
</tr>
</table>
<div class="card-btns">
<a class="card-btn" href="https://github.com/jos3ph1205" target="_blank"><i class="fa-brands fa-github"></i> Github</a>
</div>
</div>
</div>
</section>
<section id="skill-section">
<div id="skill-container">
<h2>SKILLS</h2>
<div id="skill-card-container">
<div class="skill-card">
<h3>HTML & CSS</h3>
<p>Basic Html & Css skills & fundamentals</p>
</div>
<div class="skill-card">
<h3>Javascript</h3>
<p>Basic javascript</p>
</div>
<div class="skill-card">
<h3>3D</h3>
<p>3D Modelling & Animation</p>
</div>
<div class="skill-card">
<h3>2D</h3>
<p>2D Animation</p>
</div>
</div>
</div>
</section>
<section id="edu-prj-section">
<div id="edu-prj-container">
<div class="edu-prj-cards-cont">
<h2>Education</h2>
<div class="edu-card edu-prj-card">
<h3>Mimo</h3>
<p>Oct, 2023 - Now</p>
<p>Course lessons at <a href="https://mimo.org/" target="_blank">Mimo.org</a></p>
</div>
<div class="edu-card edu-prj-card">
<h3>FreeCodeCamp</h3>
<p>Oct, 2023 - Now</p>
<p>Course lessons at <a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp.org</a></p>
</div>
</div>
<div id="projects" class="edu-prj-cards-cont">
<h2>Projects</h2>
<a class="prj-card edu-prj-card" href="https://jos3ph1205.github.io/unit-calculator/" target="_blank"><div>
<h3>Unit Calculator <i class="fa-solid fa-calculator"></i></h3>
<p>20/12/23</p>
<p>A site for calculating unit conversions</p>
</div></a>
<div class="prj-card edu-prj-card">
<h3>Pending</h3>
<p>...</p>
<p>...</p>
</div>
</div>
</div>
</section>
<section id="work-section">
<div id="work-container">
<h2>Works</h2>
<div id="work-imgs-cont">
<img src="images/work-img-1.jpg" class="work-img">
<img src="images/work-img-2.jpg" class="work-img">
<img src="images/work-img-3.jpg" class="work-img">
<img src="images/work-img-4.jpg" class="work-img">
<img src="images/work-img-5.jpg" class="work-img">
<img src="images/work-img-6.jpg" class="work-img">
</div>
</div>
</section>
</main>
<footer>
<div id="footer-links">
<a href="https://facebook.com/" target="_blank"><i class="fa-brands fa-facebook foot-link"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter foot-link"></i></a>
<a href="https://instagram.com/" target="_blank"><i class="fa-brands fa-instagram foot-link"></i></a>
<a href="https://linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin-in foot-link"></i></a>
<a href="https://google.com/" target="_blank"><i class="fa-brands fa-google foot-link"></i></a>
</div>
<a id="top" href="#top">Back To Top <i class="fa-solid fa-arrow-up"></i></a>
</footer>
</body>
</html>