-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (93 loc) · 5.67 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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hubert Brychczynski's Portfolio Page</title>
<script src="https://kit.fontawesome.com/74bba79c40.js" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto+Mono"><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<header>
<nav id="navbar">
<a href="#welcome-section">About me</a>
<a href="#projects-section">Projects</a>
<a href="#ach">Achievements</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="welcome-section" class="grid-container">
<div id="profile"><img src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/brychczynski_hubert-1.jpg" id="profile-pic" alt="Hubert Brychczynski's profile picture"></div>
<div id="welcome-msg"><h1>Hello World!</h1>
<p>My name is Hubert Brychczyński and I am an aspiring web developer.</p>
<p>This portfolio is the final project in the <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a> Responsive Web Design program.
</p>
<p>It was built using HTML, CSS, Flexbox, and CSS Grid.<br>
<a href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage" target="_blank">See the user stories</a>.
</p>
<a href="https://github.com/hubertbrychczynski" id="profile-link" target="_blank"><span style="color: white; font-size: 2em"><i class="fab fa-github"></i></span></a></div>
</section>
<section id="projects-section" class="grid-container">
<div class="title"><h1>Projects</h1>
<p>The following projects were all created for the <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a> Responsive Web Design program:</p>
</div>
<div id="projects">
<div class="project-tile">
<a href="https://hubertbrychczynski.github.io/tribute-to-libraries/" target ="_blank">
<figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/tribute-page.jpg" alt="freeCodeCamp Tribute Page project" />
<figcaption>A tribute to libraries</figcaption></figure></a>
<p>(HTML / CSS)</p>
<p><a href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page" target="_blank">See the user stories</a></p>
</div>
<div class="project-tile">
<a href="https://hubertbrychczynski.github.io/magic-potion-trial-run/" target="_blank">
<figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/survey-form.jpg" alt="freeCodeCamp Survey Form project"/><figcaption>A magic potion trial run</figcaption></figure></a>
(HTML / CSS)<br>
<a href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form" target="_blank">See the user stories</a>
</div>
<div class="project-tile">
<a href="https://hubertbrychczynski.github.io/predictor-landing-page/" target="_blank"><figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/product-landing-page-e1590167396780.jpg" alt="freeCodeCamp Product Landing Page project"><figcaption>A landing page for Ted Chiang's Predictor</figcaption></figure></a>
(HTML / CSS / RWD / Flexbox)<br>
<a href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page" target="_blank">See the user stories</a>
</div>
<div class="project-tile">
<a href="https://hubertbrychczynski.github.io/arithmetic-with-cats/" target="_blank"><figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/technical-documentation.jpg" alt="freeCodeCamp Technical Documentation Page project"><figcaption>Arithmetic with cats</figcaption></figure></a>
(HTML / CSS / RWD)<br>
<a href="https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page" target="_blank">See the user stories</a>
</div>
</div>
</section>
<section id="ach" class="grid-container">
<h1 class="title">Achievements</h1>
<div id="achievements">
<div class="ach-tile">
<a href="https://coursera.org/verify/CPB3NMJZ95S7" target ="_blank">
<figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/brychczynski-hubert-technical-writing.png" alt="Technical Writing Certificate from Coursera"/><figcaption>Technical Writing Certificate</figcaption></figure></a>
</div>
<div class="ach-tile">
<a href="https://www.freecodecamp.org/certification/hubertbrychczynski/responsive-web-design" target="_blank">
<figure><img class="image-tile" src="https://hubertbrychczynski.com/wp-content/uploads/2020/05/brychczynski-hubert-fcc-rwd.jpg" alt="The freeCodeCamp Responsive Web Design Certificate"/><figcaption>Responsive Web Design Certificate</figcaption></figure></a>
</div>
</div>
</section>
<section id="contact">
<h1 class="title">Contact</h1>
<p>Feel free to contact me at htbrch at gmail.com</p>
</section>
</main>
<footer>
Coded and designed by <a href="https://github.com/hubertbrychczynski" target="_blank">Hubert Brychczyński</a>.
</footer>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>