-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (137 loc) · 6.81 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
<!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">
<title>Tatiana's Portfolio</title>
<!-- Custom CSS -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
</head>
<body>
<header class="neutral-theme">
<h1>Hello! My name is <span>Tatiana</span>.<br>I'm a developer.</h1>
<a href="#about" class="header-link button">Find out more</a>
</header>
<main>
<section class="about primary-theme" id="about">
<h2>About me</h2>
<div class="about-container">
<img src="images/profile.jpg" alt="A photograph of Tatiana." class="about-img">
<div class="about-text">
<p>My name is Tatiana Sanchez. I'm a student of Systems Engineering (also known as Computer Science)
in Colombia.</p>
<p>I discover my love for programming when I started my major, now I'm looking forward to becoming a
software and web developer.</p>
<p>I also love reading, watching movies and tv shows!</p>
<a href="www.resume.com" class="button">My Resume</a>
</div>
</div>
<blockquote>"Sometimes it pays to stay in bed on Monday, rather than spending the rest of the week debugging
Monday’s code"
<cite>-Dan Salomon</cite>
</blockquote>
</section>
<section class="neutral-theme">
<h2>Projects</h2>
<article class="card">
<div class="article-text">
<h3>Terrarium</h3>
<p>A drag and drop terrarium made in HTML, CSS and JavaScript.</p>
<div>
<a href="https://github.com/TatianaSanchez01/terrarium.git" class="button">Github Repository</a>
<a href="https://tatianasanchez01.github.io/terrarium/" class="button">See it live</a>
</div>
</div>
<img src="images/terrarium-project.jpg" alt="project image" class="article-img">
</article>
<article class="card">
<div class="article-text">
<h3>Memory card Game</h3>
<p>A game to pair the cards with the same gem. Made in HTML, CSS and JavaScript.</p>
<div>
<a href="https://github.com/TatianaSanchez01/memory-card-game.git" class="button">Github
Repository</a>
<a href="https://tatianasanchez01.github.io/memory-card-game/" class="button">See it live</a>
</div>
</div>
<img src="images/memory-card-game-project.jpg" alt="project image" class="article-img">
</article>
<article class="card">
<div class="article-text">
<h3>Typing Game - Shadowhunters theme</h3>
<p>This is a typing game with quotes from the show Shadowhunters. Made in HTML, CSS and JavaScript.
</p>
<div>
<a href="https://github.com/TatianaSanchez01/typing-game.git" class="button">Github
Repository</a>
<a href="https://tatianasanchez01.github.io/typing-game/" class="button">See it live</a>
</div>
</div>
<img src="images/typing-game-project.jpg" alt="project image" class="article-img">
</article>
<article class="card">
<div class="article-text">
<h3>Weather App</h3>
<p>This is a weather application, using the OpenWeatherMap API. Made in HTML, CSS and JavaScript.
</p>
<div>
<a href="https://github.com/TatianaSanchez01/weatherapp.git" class="button">Github
Repository</a>
<a href="https://tatianasanchez01.github.io/weatherapp/" class="button">See it live</a>
</div>
</div>
<img src="images/weatherapp-project.jpg" alt="project image" class="article-img">
</article>
<article class="card">
<div class="article-text">
<h3>Memory Card Game in Vue</h3>
<p>A game to pair the cards with the same gem. Made in VueJs, HTML and CSS.
</p>
<div>
<a href="https://github.com/TatianaSanchez01/memory-card-game-vue.git" class="button">Github
Repository</a>
<a href="https://tatianasanchez01.github.io/memory-card-game-vue/" class="button">See it
live</a>
</div>
</div>
<img src="images/memory-card-game-project.jpg" alt="project image" class="article-img">
</article>
<article class="card">
<div class="article-text">
<h3>Weatherme</h3>
<p>Weather app with Login and Signup to search for the weather specifications in each city. Made
with Handlebars, CSS, NodeJs and OpenWeatherMap API. Deployed in Vercel and uses the MongoDB
Database.
</p>
<div>
<a href="https://github.com/TatianaSanchez01/weatherme1.git" class="button">Github
Repository</a>
<a href="https://weatherme-six.vercel.app/" class="button">See it live</a>
</div>
</div>
<img src="images/weatherme-project.jpg" alt="project image" class="article-img">
</article>
</section>
<section class="contact primary-theme">
<h2>Contact</h2>
<p>If you'd like to work with me, you can drop me a message!</p>
<a href="#contact" class="button">Let's Talk</a>
</section>
</main>
<footer id="contact">
<ul class="social">
<li class="social-item">
<a href="https://www.linkedin.com/in/tatiana-sanchez-sanin/" class="social-link linkedin">LinkedIn</a>
</li>
<li class="social-item">
<a href="https://github.com/TatianaSanchez01" class="social-link github">Github</a>
</li>
</ul>
<p>© 2022 - Portfolio design by Tatiana</p>
</footer>
</body>
</html>