-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (140 loc) · 6.09 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
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/images/favicon.png">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sectionStyles.css">
<link rel="stylesheet" href="css/decor.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
<title>TR - Web Developer</title>
</head>
<body>
<div class="body-particles"><div id="wrapper"></div></div>
<div id="particles-js"></div>
<div class="hamburger-nav">
<div class="hamburger-nav nav-icon">
<img id="hamburger-nav" src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg">
</div>
<div id="hamburger-nav-items" class="hamburger-nav items">
<a>About</a>
<a>Skills</a>
<a>Projects</a>
<a>Contact</a>
<a>Socials</a>
<div id="social-icons">
<img src="images/instagram-xxl.png">
<img src="images/linkedin-6-xxl.png">
<img src="images/twitter-xxl.png">
</div>
</div>
</div>
<div class="main">
<div class="navbar">
<div class="navbar-logo">
<img src="/images/logoTransparentBackground.png"></img>
<h3>Trendon</h3>
<h5>Web Developer</h5>
</div>
<div class="navbar-nav-items">
<a>About</a>
<a>Skills</a>
<a>Projects</a>
<a>Contact</a>
<a>Socials</a>
<div id="social-icons">
<img src="images/instagram-xxl.png">
<img src="images/linkedin-6-xxl.png">
<img src="images/twitter-xxl.png">
</div>
</div>
</div>
<div class="site-setup">
<section id="intro">
<div>
<h1 class="animated-title">Hi,<br> I'm Trendon,<br> web developer</h1>
<h2 id="dev-title">Web Developer</h2>
<button class="waves-effect waves-light">Contact Me</button>
</div>
</section>
<section id="portfolio">
<h1 class="title animated-title">My Portfolio</h1>
<p>
A small gallery of recent projects done by me.
</p>
<div class="display">
<div class="image-container">
<div class="img">
<a href="/pages/demo.html">
<img src="/images/Work.png">
</a>
</div>
<div class="img">
<a>
<img src="/images/Work.png">
</a>
</div>
<div class="img">
<a>
<img src="/images/Work.png">
</a>
</div>
</div>
</div>
</section>
<section id="about">
<div class="about-context">
<h1 class="title animated-title">Me, Myself and I</h1>
<p>
The primary area of my interest is front-end.
My passion for coding started with game development with Lua and then
it went to automation with python by using it in escape rooms, then going from that to making bots
on discord with javascript and finally I started learning how to do web development before going into
a course to gain a concrete foundation for web development skills
</p>
</div>
<div class="about-image">
<img src="/images/logoTransparentBackground.png"></img>
<!-- set image background -->
</div>
</section>
<section id="contact">
<h1 class="title">Contact Me</h1>
<div class="contact-form">
<form>
<div class="name">
<input type="text" id="fname" placeholder="Name">
</div>
<div class="email">
<input type="email" id="email" placeholder="Email">
</div>
<div class="form-bottom">
<input type="text" id="subject" placeholder="Subject">
<input type="text" id="message" placeholder="Message">
</div>
<div class="submit">
<button>Submit</button>
</div>
</form>
</div>
<!-- <div id="map" class="map">
</div> -->
</section>
</div>
</div>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="js/particles.js"></script>
<script src="js/main.js"></script>
</body>
</html>