-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (161 loc) · 8.08 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="My frontend projects">
<link rel="stylesheet" href="style/custom.min.css">
<title>Liviu Iancu</title>
</head>
<body>
<header>
<div class="header-container text--center">
<h1 class="giga">Front End Web Developer</h1>
<h3 class="subtitle">Solving problems, team player, enjoy coding</h3>
<a href="" class="button button--xlg fade-in1" rel="nofollow" onclick="this.href='mailto:' + 'liviuiancu' + '@' + 'gmx.com'"><span>@</span> Get in touch</a>
</div>
<div class="section-description text--center">
<h5 class="menu-links">
<a href="#projects" class="fade-in2">Projects</a>
<a href="#about" class="fade-in3">About</a>
<a href="https://medium.com/@liviuiancu/latest" class="fade-in4">Blog</a>
</h5>
<div class="fade-in5">
<span class="git-ico"><a href="https://github.com/LiviuLvu"></a></span>
<span class="tw-ico"><a href="https://twitter.com/john_liviu"></a></span>
<span class="li-ico"><a href="https://www.linkedin.com/in/ianculiviu"></a></span>
</div>
</div>
</header>
<h1 id="projects" class="mega">Projects</h1>
<p class="section-description">Below are some of my projects with a short description added. Each have a link to a live preview and a link to view the code on GitHub.
<br>
<span class="email-link"><a href="" rel="nofollow" onclick="this.href='mailto:' + 'liviuiancu' + '@' + 'gmx.com'">You have feedback or questions? Get in touch.</a></span>
</p>
<ul>
<li>
<a href="https://liviulvu.github.io/comic-books/"><img src="img/comic-books.png" alt="Comic books app preview"></a>
<h3>
<b>Comic Books API</b>
</h3>
<p>Search and display comic books from MARVEL API.
Clicking one item in the list shows a big image and more info.
Using angular animations to improve the user experience.
<br> <i>Implemented using: Angular 4, Angular CLI, TypeScript, Bootstrap 4</i></p>
<span class="external-link">
<a href="https://liviulvu.github.io/comic-books/">Live Preview</a>
<a href="https://github.com/LiviuLvu/comic-books">Inspect Code</a>
</span>
</li>
<li>
<a href="https://liviulvu.github.io/angular4-ui-animations-examples/"><img src="img/angular-ui-animations.png" alt="Angular UI examples image preview"></a>
<h3>
<b>Angular <i>4</i> UI animations</b>
</h3>
<p>Tested some of the UI animations possible in Angular 4. The purpouse of this project was to learn how to work with the Angular animations module.
<br> <i>Implemented using: Angular 4, Angular CLI, TypeScript, Bootstrap 4</i></p>
<span class="external-link">
<a href="https://liviulvu.github.io/angular4-ui-animations-examples/">Live Preview</a>
<a href="https://github.com/LiviuLvu/angular4-ui-animations-examples">Inspect Code</a>
</span>
</li>
<li>
<a href="http://liviulvu.github.io/free-code-camp/advanced-frontend-projects/simon-game/"><img src="img/simons.png" alt="SimonsGame image preview"></a>
<h3>
<b>Melodic SimonSays Game</b>
</h3>
<p>Each time you input a series of button presses correctly, you see the same series of button presses but with an additional step.
You can win the game by getting a series of 20 steps correct.
<br> <i>Implemented using: jquerry, javascript</i></p>
<span class="external-link">
<a href="http://liviulvu.github.io/free-code-camp/advanced-frontend-projects/simon-game/">Live Preview</a>
<a href="https://github.com/LiviuLvu/free-code-camp/tree/gh-pages/advanced-frontend-projects/simon-game">Inspect Code</a>
</span>
</li>
<li>
<a href="http://liviulvu.github.io/free-code-camp/advanced-frontend-projects/calculator/"><img src="img/calculator.png" alt="Calculator image preview"></a>
<h3>
<b>Calculator App</b>
</h3>
<p>Performs basic calculations plus square root and pi
<br> <i>Implemented using: jquerry, javascript</i></p>
<span class="external-link">
<a href="http://liviulvu.github.io/free-code-camp/advanced-frontend-projects/calculator/">Live Preview</a>
<a href="https://github.com/LiviuLvu/free-code-camp/tree/gh-pages/advanced-frontend-projects/calculator">Inspect Code</a>
</span>
</li>
<li>
<a href="https://liviulvu.github.io/weather-app-simpleweather/"><img src="img/weather-app.png" alt="App image preview"></a>
<h3>
<b>Local Weather</b>
</h3>
<p>Minimal app to show local weather based on your location
<br> <i>Implemented using: jquerry, simpleweather.js, yahoo-weather API</i></p>
<span class="external-link">
<a href="https://liviulvu.github.io/weather-app-simpleweather/">Live Preview</a>
<a href="https://github.com/LiviuLvu/weather-app-simpleweather">Inspect Code</a>
</span>
</li>
<li>
<a href="http://liviulvu.github.io/composers-list/"><img src="img/composers-list.png" alt="App image preview"></a>
<h3>
<b>Composers List</b>
</h3>
<p>Sortable, searchable list of classical composers
<br> <i>Implemented using: list.js, jquery, skeleton.css</i></p>
<span class="external-link">
<a href="http://liviulvu.github.io/composers-list/">Live Preview</a>
<a href="https://github.com/LiviuLvu/composers-list">Inspect Code</a>
</span>
</li>
<li>
<a href="http://liviulvu.github.io/parallax-dark-suits/"><img src="img/parallax-dark-suits.png" alt="App image preview"></a>
<h3>
<b>Black Suits Parallax Page</b>
</h3>
<p>Testing parallax possibilities
<br> <i>Implemented using: jquery</i></p>
<span class="external-link">
<a href="http://liviulvu.github.io/parallax-dark-suits/">Live Preview</a>
<a href="https://github.com/LiviuLvu/parallax-dark-suits/">Inspect Code</a>
</span>
</li>
<li>
<a href="http://liviulvu.github.io/home-agency/"><img src="img/home-agency.png" alt="App image preview"></a>
<h3>
<b>Design Converted to HTML Page</b>
</h3>
<p>Turned a design made in photoshop to a responsive HTML page
<br> <i>Implemented using: grunt browser-sync, watch, stylus.css, flexbox, jquery</i></p>
<span class="external-link">
<a href="http://liviulvu.github.io/home-agency/">Live Preview</a>
<a href="https://github.com/LiviuLvu/home-agency/">Inspect Code</a>
</span>
</li>
</ul>
<footer>
<div id="about" class="section-description">
<h3 class="mega">About</h3>
<p>I enjoy building user interfaces, but also know a bit about backend technologies.
</p>
<p><b>Tools used in my projects</b></p>
<p><b>Front end</b></p>
<p>Javascript, jQery, D3, Angular4, Angular CLI, Typescript, Bootstrap, Css, Sass, Scss, Stylus, HTML, Grunt, Gulp, Babel, Git, Command Line, Illustrator, Photoshop</p>
<p><b>Back end</b></p>
<p>Node.js, NPM, MongoDB, Express.js, JSON, REST API's</p>
<p><b>Short history</b></p>
<p>Started coding back in January 2015, after finding a way to write code in Illustrator and automate repetitive tasks,
hacked a few illustrator scripts, loved it, and continued to learn about javascript and web technologies.
</p>
<p>Let me know if you might have work for me. Thanks for visiting!</p>
<span class="email-link"><a href="" rel="nofollow" onclick="this.href='mailto:' + 'liviuiancu' + '@' + 'gmx.com'">Get in touch</a></span>
<span class="external-link"><a href="https://medium.com/@liviuiancu/latest">Blog</a></span>
<br>
<span class="git-ico"><a href="https://github.com/LiviuLvu"></a></span>
<span class="tw-ico"><a href="https://twitter.com/john_liviu"></a></span>
<span class="li-ico"><a href="https://www.linkedin.com/in/ianculiviu"></a></span>
</div>
</footer>
</body>
</html>