-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
194 lines (171 loc) · 10.8 KB
/
portfolio.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
186
187
188
189
190
191
192
193
194
<!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">
<meta name="description" content="Portfolio | Lilla Csanaky">
<title>Portfolio | Lilla Csanaky</title>
<link rel="icon" type="image/x-icon" href="/images/favicon-32x32.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Candal&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/src/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/5f2132b421.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: var(--primary-color);">
<div class="container-fluid">
<a class="navbar-brand" href="/" title="About me">
<img src="/images/logo-flower.png" alt="Yellow flower logo" class="nav-bar-logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="/" title="Introduction - Lilla Csanaky">About</a>
<a class="nav-link" href="/resume.html" title="Resume - Lilla Csanaky">Resume</a>
<a class="nav-link active" href="/portfolio.html" title="Portfolio - Lilla Csanaky">Portfolio</a>
<a class="nav-link" href="/contact.html" title="Contact - Lilla Csanaky">Contact</a>
</div>
</div>
</div>
</nav>
</header>
<main class="pages-main">
<section class="title mt-5">
<h1>Portfolio</h1>
<p class="portfolio-text">Here are some of my projects that I have been working on.</p>
</section>
<div class="portfolio-container">
<div class="portfolio-image-box">
<img src="/images/dictionary-min.png" alt="Start page of the Dictionary Application" class="app-image img-float">
</div>
<div class="portfolio-text-box">
<h3 class="app-title">Dictionary App with React</h3>
<p class="app-description">With this web app you can search for almost any words and it will display
the meanings, phonetics and pictures of that word. You can also listen to the pronunciation of
the word. This app is built with React components and API integration, it is responsive and it
is SEO friendly. It also has a dark mode button where you can change the background color of the
app.</p>
<br />
<a href="https://adoring-colden-97a16c.netlify.app/" title="Go to the Dictionary Application" target="_blank" rel="noopener noreferrer"
class="primary-button open-button">Dictionary</a>
</div>
<div class="portfolio-image-box">
<img src="/images/simple-weather-min.png" alt="Start page of the Simple Weather Application" class="app-image img-float">
</div>
<div class="portfolio-text-box">
<h3 class="app-title">Simple Weather App with React</h3>
<p class="app-description">This web app will display the current weather conditions and a five-day
forecast for each city you search for with API integration and animated weather icons with React
components. You can also use the "My location" button to show the weather and forecast for your
location. It has improved responsiveness and it is SEO friendly. You also get a random quote
whenever you load the page.</p>
<br />
<a href="https://vigorous-swartz-f1085f.netlify.app/" title="Go to the Simple Weather Application" target="_blank" rel="noopener noreferrer"
class="primary-button open-button">Simple Weather</a>
</div>
<div class="portfolio-image-box">
<img src="/images/clock-min.png" alt="Start page of the World Clock App" class="app-image img-float">
</div>
<div class="portfolio-text-box">
<h3 class="app-title">World Clock App</h3>
<p class="app-description">Discover the World Clock web application, where you can effortlessly explore the current times and dates across
different global locations. The app offers an intuitive interface and dark and light modes and leverages JavaScript,
HTML, CSS, and moment.js to ensure precise timekeeping.</p>
<br />
<a href="https://astounding-boba-ba0f20.netlify.app/" title="Go to World Clock Application" target="_blank" rel="noopener noreferrer"
class="primary-button open-button">World Clock</a>
</div>
<div class="portfolio-image-box">
<img src="/images/tea-lover-min.png" alt="Start page of the Vanilla Weather App" class="app-image img-float">
</div>
<div class="portfolio-text-box">
<h3 class="app-title">Tea Lover Landing Page</h3>
<p class="app-description">"Tea Lover Landing Page" is a responsive web project with a beautiful, simple design and pastel colours. This engaging
page features dark and light modes, interactive image hover effects, embedded videos and Instagram posts to showcase
different tea types.</p>
<br />
<a href="https://papaya-salamander-497ddc.netlify.app/" title="Go to Tea Lover" target="_blank"
rel="noopener noreferrer" class="primary-button open-button">Tea Lover</a>
</div>
<div class="portfolio-image-box">
<img src="/images/weather-app-min.png" alt="Start page of the Vanilla Weather App" class="app-image img-float">
</div>
<div class="portfolio-text-box">
<h3 class="app-title">Vanilla Weather App</h3>
<p class="app-description">The first design of the weather application. This web app will display
the current weather conditions and a six-day forecast for each city you search for with API
integration. You can also use the "My location" button to show the weather and forecast for your
location.</p>
<br />
<a href="https://compassionate-curie-8f3546.netlify.app/" title="Go to Simple Weather Application" target="_blank" rel="noopener noreferrer"
class="primary-button open-button">Vanilla Weather</a>
</div>
</div>
<div class="portfolio-links">
<div class="portfolio-link">
<h3>My code</h3>
<p>Most of my projects are open-sourced; take a closer look at my projects and activities by
visiting my GitHub account.</p>
<br />
<a href="https://github.com/cslylla" title="Go to my GitHub profile" target="_blank" rel="noopener noreferrer"
class="secondary-button">My GitHub</a>
</div>
<div class="portfolio-link">
<h3>My design</h3>
<p>Explore my portfolio to discover how my creative and innovative designs combine visually stunning aesthetics with
user-centric solutions.</p>
<br />
<a href="https://dribbble.com/cslylla" title="Go to my Dribbble profile" target="_blank" rel="noopener noreferrer"
class="secondary-button">My Dribbble</a>
</div>
<div class="portfolio-link">
<h3>My writing</h3>
<p>Delve into my technical writing portfolio to explore how I communicate complex concepts with clarity and precision,
providing insightful documentation for diverse audiences.</p>
<br />
<a href="https://www.codecademy.com/resources/docs" title="Go to Codecademy" target="_blank" rel="noopener noreferrer"
class="secondary-button">Codedacemy Docs</a>
</div>
</div>
</main>
<footer class="page-footer">
<div class="container footer-icon-container">
<a href="https://www.linkedin.com/in/lillacsanaky/" title="Go to LinkedIn" target="_blank"
rel="noopener noreferrer" class="footer-link">
<img src="./images/linkedin-square_.png" alt="LinkedIn icon" class="footer-icon">
</a>
<a href="https://github.com/cslylla" title="Go to GitHub" target="_blank" rel="noopener noreferrer"
class="footer-link">
<img src="./images/github-square_.png" alt="GitHub icon" class="footer-icon">
</a>
<a href="https://medium.com/@cslylla" title="Go to Medium" target="_blank" rel="noopener noreferrer"
class="footer-link">
<img src="./images/medium-square_.png" alt="Medium icon" class="footer-icon">
</a>
<a href="https://www.instagram.com/creative.debugger/" title="Go to Instagram" target="_blank" rel="noopener noreferrer"
class="footer-link">
<img src="./images/insta-square_.png" alt="Instagram icon" class="footer-icon">
</a>
</div>
<p class="m-0">This webpage was coded by
<a href="https://www.linkedin.com/in/lillacsanaky/" target="_blank" rel="noopener noreferrer"
title="Go to LinkedIn profile" class="footer-link">cslylla</a>
and it is
<a href="https://github.com/cslylla/lilac-portfolio" target="_blank" rel="noopener noreferrer"
title="Go to GitHub repository" class="footer-link">open-sourced</a>
</p>
</footer>
</body>
</html>