-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (122 loc) · 5.07 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
152
153
154
155
156
157
158
<!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>Dimitri Tsampiras | Portfolio</title>
<link rel="stylesheet" href="css/styles2.css">
<script src="https://kit.fontawesome.com/c78a273edb.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- personal logo -->
<div class="icon-logo">
<img src="assets/images/logo.png" alt="Logo" class="logo">
</div>
<!-- links -->
<div class="portfolio-links">
<a class="portfolio" href="https://www.behance.net/dimitritsampir" target="_blank"><i class="fab fa-behance"></i></a>
<a class="portfolio" href="https://github.com/dimitritsampiras" target="_blank"><i class="fab fa-github"></i></a>
<a class="portfolio" href="https://www.linkedin.com/in/dimitritsampiras1306/" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</div>
<!-- scroll down -->
<div class="scroll-down-btn">
<h3 class="scroll">SCROLL DOWN</h3>
</div>
<section class="page home">
<div class="title name">
<h1 class="section-header">Dimitri <br> Tsampiras</h1>
<h2 class="subtitle"> FRONTEND DEVELOPER</h2>
</div>
<div class="info athena">
<img src="assets/images/athena.png" alt="Athena" class="athena-mural">
</div>
</section>
<section class="page projects">
<div class="title name">
<h1 class="section-header">Side <br> Projects</h1>
<h4 class="subtitle"> This is a selection of my recent work.</h4>
</div>
<div class="info projects">
<div class="project" onclick="openInNewTab('https:\/\/pokemonarena-dt.netlify.com/')">
<h2 class="project-title"> Pokemon <br> Arena</h2>
<h5 class="project-num">01</h5>
<img src="assets/images/project1.jpg" alt="Project 02" class="project-preview">
</div>
<div class="project" onclick="openInNewTab('https:\/\/platformgame-dt.netlify.com/');">
<h2 class="project-title"> A Platform <br> Game </h2>
<h5 class="project-num">02</h5>
<img src="assets/images/project2_1.jpg" alt="Project 02" class="project-preview">
</div>
<div class="project" onclick="openInNewTab('https:\/\/axianpreregister.netlify.com/');">
<h2 class="project-title"> Sign Up <br> Form </h2>
<h5 class="project-num">03</h5>
<img src="assets/images/project3.jpg" alt="Project 02" class="project-preview">
</div>
</div>
</section>
<section class="page skills">
<div class="title name">
<h1 class="section-header"><br>Skills</h1>
<h4 class="subtitle"> Skills and technologies I have <br> learned and used.</h4>
</div>
<div class="info skills">
<h4 class="subtitle"> What I'm best at: <strong class="display1"></strong> </h4>
<div class="skill-list">
<div class="skill HTML 1">
<i class="fab fa-html5"></i>
</div>
<div class="skill CSS 1">
<i class="fab fa-css3-alt"></i>
</div>
<div class="skill Javascript 1">
<i class="fab fa-js-square"></i>
</div>
<div class="skill SASS 1">
<i class="fab fa-sass"></i>
</div>
<div class="skill Photoshop 1">
<h6 class="photoshop"> Ps </h6>
</div>
</div>
<h4 class="subtitle"> What I'm still learning: <strong class="display2"></strong> </h4>
<div class="skill-list">
<div class="skill React 2">
<i class="fab fa-react"></i>
</div>
<div class="skill Node 2">
<i class="fab fa-node"></i>
</div>
<div class="skill C 2">
<h6 class="Clang"> C </h6>
</div>
<div class="skill Python 2">
<i class="fab fa-python"></i>
</div>
<div class="skill Illustrator 2">
<h6 class="Ai"> Ai </h6>
</div>
<div class="skill Xd 2">
<h6 class="Xd"> Xd </h6>
</div>
</div>
</div>
</section>
<section class="page about">
<div class="title name">
<h1 class="section-header"> About <br>Me </h1>
<h4 class="subtitle"> A brief introduction of who I am.</h4>
</div>
<div class="info about">
<p>My name is Dimitri Tsampiras.</p>
<p>Currently, I am pursuing a Software Engineering degree at McMaster University. I specialize in full-stack development and website UI/UX design. As of now, I am most confident with my front-end abilities but I am eager to continue learning and practicing my back-end skills as well. </p>
<p>Learning is something I truly enjoy. I spend a good portion of my day reading and learning as
much as I can about new technologies related to my field of study. I am currently reading the <em>"You Don't Know JS"</em> series to further enhance my knowledge of JavaScript.
</p>
<a href="assets/dt_resume.pdf" class="btn resume" download> Resume </a>
<a href="mailto: [email protected]" class="btn resume">Send Email</a>
</div>
</section>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>