-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (166 loc) · 10.1 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>João's Portfolio Website</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="icon" type="image/x-icon" href="./imgs/code-solid.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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=Noto+Sans+Mono:wght@400;700;900&family=Urbanist:wght@400;700;900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a666a27cfb.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<header class="header">
<div class="logo">
<i class="fa-solid fa-code"></i>
<!-- <img src="./imgs/code-solid.svg" alt=""> -->
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">My Services</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About Me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">My Work</a></li>
</ul>
</nav>
</header>
<!-- Intoduction -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
👋 Hi, I am <strong>João Pedro</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">Software Developer</br>(wannabe)</p>
<img src="./imgs/headshot.png" alt="a beautiful image of João" class="intro__img">
</section>
<!-- My Services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">What I do</h2>
<div class="services">
<div class="service">
<h3>Front-End</h3>
<p><b>HTML</b> and <b>CSS</b>. CSS frameworks (Bootstrap, Tailwind, Bulma) and pre-processors (SASS).<br>
Responsive webdesign.<br>
<strong>React</strong>, both functional and class-based. <strong>React Router.</strong><br />
And <strong>JavaScript</strong>, my main programming language.</p>
</div>
<div class="service">
<h3>Back-End</h3>
<p><b>Node.js</b> with <b>Express</b> for my JavaScript backbone.<br/>Also capable in Flask and Python. Continuous work on the development of Back-End skills.<br>API development and integration.</p>
</div>
<div class="service">
<h3>And More</h3>
<p><b>SQL</b> - PostgreSQL, MySQL, SQLite. CRUD operations, queries.<br>
<b>NoSQL</b> - MongoDB with Mongoose.
Aggregation pipeline.<br>
<b>Git</b> - version control.<br>
<b>Terminal, Bash</b> - script writing<br>
Willing to learn new tools.
</p>
</div>
</div>
<a href="#work" class="btn">My work</a>
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<div class="section__subtitle section__subtitle--about"><p>Avid Learner with the will to make it</p></div>
<div class="about-me__body">
<p>Hey, you. Thanks for scrolling this far. Me in a few words?<br/>I live in Porto, PT and I'm
currently walking the path from pharmacist to software developer,
actively looking for an opportunity to make the dream come true.<br>
Always been passionate about solving problems and making life easier for everyone.
Coding allows me to do this better.</p>
<p>I like to work in groups, big or small, learning together and accomplishing common goals. Every difficulty becomes a challenge and I don't give up until I conquer it.
And I always do it with humor.</p>
<p>I enjoy spending my free time traveling ✈️ and I'm a committed foodie 🍜.</p>
</div>
<img src="./imgs/foto3.jpeg" alt="" class="about-me__img">
</section>
<!-- My work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">My work</h2>
<p class="section__subtitle section__subtitle--work">Some examples of what I've done so far</p>
<div class="portfolio">
<!-- Portfolio item -->
<div class="portfolio__item">
<img src="imgs/quote-generator-pic.png" alt="Quote Generator Screenshot" class="portfolio__img--beta">
<div class="portfolio__item--insert">
<h4>React Quote Generator</h4>
<p>
React Front-End<br/>
Data from external API<br/>
Search parameters implemented through form<br/>
</p>
<div class="portfolio--links">
<a class="portfolio--links__link" href="https://github.com/jonascotch/react-quote-generator" target="_blank"><i class="fa-brands fa-github"></i><p><code></p></a>
<a class="portfolio--links__link" href="https://jonascotch.github.io/react-quote-generator" target="_blank"><i class="fa-solid fa-globe"></i><p>www.</p></a>
</div>
</div>
</div>
<!-- Portfolio item -->
<div class="portfolio__item">
<img src="imgs/drug-shortage.png" alt="Quote Generator Screenshot" class="portfolio__img--beta">
<div class="portfolio__item--insert">
<h4>Drug Shortage Management</h4>
<p>
Webapp in Python (Flask and Jinja)<br/>
External MySQL database. Performs all CRUD operations.<br/>
CS50 final project.<br/>
</p>
<div class="portfolio--links">
<a class="portfolio--links__link" href="https://github.com/jonascotch/drug-shortage-management" target="_blank"><i class="fa-brands fa-github"></i><p><code></p></a>
<a class="portfolio--links__link" href="https://drug-shortage-management.onrender.com/login" target="_blank"><i class="fa-solid fa-globe"></i><p>www.</p></a>
</div>
</div>
</div>
<!-- Portfolio item -->
<div class="portfolio__item">
<img src="imgs/natours_screenshot.png" alt="Quote Generator Screenshot" class="portfolio__img--beta">
<div class="portfolio__item--insert">
<h4>Natours Website</h4>
<p>
Node.js / Express webapp.<br/>
MongoDB / Mongoose database.<br/>
MVC architecture implementation.<br/>
Authentication, authorization and payments implemented<br/>
Guided project from Udemy Node.JS course
</p>
<div class="portfolio--links">
<a class="portfolio--links__link" href="https://github.com/jonascotch/Natours-NodeJS-Udemy" target="_blank"><i class="fa-brands fa-github"></i><p><code></p></a>
<a class="portfolio--links__link" href="https://natours-by-jp.onrender.com/" target="_blank"><i class="fa-solid fa-globe"></i><p>www.</p></a>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mailto:joaopbpires@gmail.com" class="footer__link">joaopbpires@gmail.com</a>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="http://www.twitter.com/jonascotch" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="http://www.github.com/jonascotch" target="_blank"><i class="fa-brands fa-github"></i></a>
</li>
<li class="social-list__item">
<a class="social-list__link" href="http://www.linkedin.com/in/joaopbpires" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
</li>
<!-- <li class="social-list__item">
<a class="social-list__link" href="http://www.google.com"><i class="fa-brands fa-google"></i></a>
</li> -->
</ul>
</footer>
<script src="./js/index.js">
</script>
</body>
</html>