Skip to content

Commit 3b706b3

Browse files
Mihael SandroMihael Sandro
Mihael Sandro
authored and
Mihael Sandro
committed
finished
1 parent becb3f0 commit 3b706b3

28 files changed

+269
-165
lines changed

Diff for: ‎about.html

+15-10
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
78
<link rel="stylesheet" href="css/style.css">
89
<style type="text/css">
910
.st0 {
@@ -22,7 +23,7 @@
2223
}
2324

2425
</style>
25-
<title>Mihael Sandro</title>
26+
<title>About | Mihael Sandro</title>
2627
</head>
2728

2829
<body>
@@ -55,6 +56,7 @@
5556

5657
<div id="side-menu" class="side-nav">
5758
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
59+
<li><a href="index.html">Home</a></li>
5860
<li><a href="projects.html">Projects</a></li>
5961
<li><a href="about.html">About</a></li>
6062
</div>
@@ -63,22 +65,25 @@
6365

6466
</header>
6567
<h1 class="verticaltxt">About</h1>
68+
6669
<main>
6770
<article>
71+
<img class="gifresponsive" src="images/about.gif">
6872
<div class="wrapper">
6973
<div><img class="portrait" src="images/Mihael%20Sandro.jpg" alt="selfportrait"></div>
7074
<div>
71-
<h2> It's all about passion.</h2>
75+
<h2 class="abouth2"> It's all about passion.</h2>
7276
<p>20 years old Multimedia design and communication student at KEA, Copenhagen.</p>
7377

7478

75-
<p>And I'm most passionate about typography, design and animation. Love for typography started with pure fascination how some letters can look so good, but than again so ugly with the wrong font. Than again with some graphic design and typography you can create beautiful stuff. What's better why to advertise everything than put togther cool animations about your project. </p>
79+
<p>Passionate about typography, handlettering, photography, design and animation / motion graphics. </p>
7680

7781

7882
</div>
7983
</div>
80-
<h3> Connect with me </h3>
81-
<span> <a href="https://www.behance.net/sandromihael"><svg class="svgicons" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
84+
<h3> Get in touch! </h3>
85+
<div class="icons">
86+
<span> <a href="https://www.behance.net/sandromihael"><svg class="svgicons" id="svgiconsdesktop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
8287
viewBox="0 0 69.4 65.6" style="enable-background:new 0 0 69.4 65.6;" xml:space="preserve">
8388
<g>
8489
<g>
@@ -133,10 +138,10 @@ <h3> Connect with me </h3>
133138

134139

135140
</a></span>
136-
<span><a href="https://www.linkedin.com/in/mihael-sandro/"> <img class="svgicons" src="css/linkedin_icon.svg"></a></span>
137-
<span> <a href="https://www.instagram.com/mihaelsandro"><img class="svgicons" src="css/instagram_icno-03.svg"></a></span>
138-
<span> <a href="mailto:[email protected]" subject="Hello!"><img class="svgicons" src="css/mail_icona-03.svg"></a></span>
139-
141+
<span><a href="https://www.linkedin.com/in/mihael-sandro/"> <img class="svgicons" id="svgiconsdesktop" src="css/linkedin_icon.svg"></a></span>
142+
<span> <a href="https://www.instagram.com/mihaelsandro"><img class="svgicons" id="svgiconsdesktop" src="css/instagram_icno-03.svg"></a></span>
143+
<span> <a href="mailto:[email protected]" subject="Hello!"><img id="svgiconsdesktop" class="svgicons" src="css/mail_icona-03.svg"></a></span>
144+
</div>
140145
</article>
141146

142147

Diff for: ‎css/style.css

+47-14
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
background-color: #1946bb;
99
}
1010

11-
@import url('https://fonts.googleapis.com/css?family=Raleway');
1211
.projectpg {
1312
background: url(pattern.svg) repeat center fixed;
1413
background-size: 15%;
@@ -24,7 +23,7 @@
2423
}
2524

2625
.burgermenu {
27-
width: 10%;
26+
width: 70%;
2827
background: url(burger.svg) no-repeat;
2928
background-size: 100%;
3029
margin-right: 3%;
@@ -34,8 +33,8 @@
3433
h1 {
3534
margin: 3%;
3635
font-family: 'Raleway', serif;
37-
font-size: 6em;
38-
font-weight: 200;
36+
font-size: 4em;
37+
font-weight: 100;
3938
font-style: italic;
4039
color: #fc4f00;
4140
}
@@ -45,6 +44,9 @@
4544
color: grey;
4645
margin: auto;
4746
}
47+
.abouth2{
48+
color: #fc4f00;
49+
}
4850

4951
h2 {
5052
text-align: center;
@@ -55,7 +57,7 @@
5557

5658
#active {
5759
text-decoration-line: line-through;
58-
color: black;
60+
text-decoration-color: #fc4f00;
5961
}
6062

6163
.imgproject {
@@ -74,6 +76,14 @@
7476
margin: 7%;
7577
}
7678

79+
h3 {
80+
font-family: 'Raleway', serif;
81+
font-size: 1.5em;
82+
font-weight: 200;
83+
font-style: italic;
84+
text-decoration: underline;
85+
}
86+
7787
@media only screen and (min-width:874px) {
7888
main {
7989
display: grid;
@@ -97,14 +107,34 @@
97107
}
98108
.verticaltxt {
99109
position: fixed;
100-
transform: rotate(-90deg) translate( -300px);
110+
transform: rotate(-90deg) translate( -350px);
101111
transform-origin: left top;
102112
float: left;
113+
font-size: 6em;
103114
z-index: -1;
104115
}
116+
.textbig {
117+
font-size: 6em;
118+
}
105119
.open-slide {
106120
display: none;
107121
}
122+
.wrapper {
123+
display: grid;
124+
grid-template-columns: repeat(2, 1fr);
125+
grid-column: 2/3;
126+
grid-gap: 20px;
127+
align-self: center;
128+
}
129+
#containermarg {
130+
margin: 0;
131+
}
132+
#svgiconsdesktop {
133+
width: 7%;
134+
}
135+
#aux{
136+
margin: 15vh;
137+
}
108138
}
109139

110140
p {
@@ -114,10 +144,14 @@
114144
.responsiveimg {
115145
width: 70%;
116146
margin-left: 10vw;
147+
} .gifresponsive {
148+
width: 100%;
117149
}
118150

119151
.navbar {
120152
overflow: hidden;
153+
float: right;
154+
max-width: 100px;
121155
}
122156

123157
.navbar a {
@@ -180,6 +214,7 @@
180214
.container {
181215
position: relative;
182216
width: 70%;
217+
margin: 5vw 5vh;
183218
}
184219

185220
.overlay {
@@ -212,14 +247,12 @@
212247
}
213248
}
214249

215-
.wrapper {
216-
display: grid;
217-
grid-template-columns: repeat(2, 1fr);
218-
grid-column: 2/3;
219-
grid-gap: 20px;
220-
align-self: center;
250+
.svgicons {
251+
width: 15%;
221252
}
222253

223-
.svgicons {
224-
width: 7%;
254+
.icons {
255+
margin: auto;
256+
text-align: center;
257+
margin-bottom: 5vh;
225258
}

Diff for: ‎images/about.gif

75.9 KB
Loading

Diff for: ‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
77
<link rel="stylesheet" href="css/style.css">
88
<style type="text/css">
99
.st0 {
@@ -69,7 +69,7 @@
6969
</header>
7070
<main>
7171
<section>
72-
<h1>
72+
<h1 class="textbig">
7373
Mihael Sandro
7474
</h1>
7575
<p class="frontp"> Graphic design, motion graphics, UI and love affair with handelttering and typography.</p>

Diff for: ‎projects.html

+13-13
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
77
<link rel="stylesheet" href="css/style.css">
88
<style type="text/css">
99
.st0 {
@@ -16,7 +16,7 @@
1616
}
1717

1818
</style>
19-
<title>Mihael Sandro</title>
19+
<title>Projects | Mihael Sandro</title>
2020
</head>
2121

2222
<body>
@@ -56,48 +56,48 @@
5656
</div>
5757

5858

59-
<h1 class="verticaltxt">Projects</h1>
60-
</header>
6159

60+
</header>
61+
<h1 class="verticaltxt">Projects</h1>
6262

6363

6464

6565
<main>
6666
<article class="projectpg">
6767
<div class="wrapper">
68-
<div class="container">
68+
<div id="containermarg" class="container">
6969
<img class="imgproject" src="images/responsive_1000px.jpg">
7070
<a href="projects/responsive-website.html"><div class="overlay"> Responsive web </div></a>
7171

7272
</div>
73-
<div class="container">
73+
<div id="containermarg"class="container">
7474
<img class="imgproject" src="images/simpleanimation_1000px.jpg">
7575
<a href="projects/simple-animation.html"><div class="overlay"> Simple animation</div></a>
7676

7777
</div>
78-
<div class="container">
78+
<div id="containermarg" class="container">
7979
<img class="imgproject" src="images/Interactive-animation">
8080
<a href="projects/interactive-animation.html"><div class="overlay"> Interactive animation</div></a>
8181

8282
</div>
83-
<div class="container">
83+
<div id="containermarg" class="container">
8484
<img class="imgproject" src="images/pp1_1000px.jpg">
85-
<a href="projects/project-pools.html"><div class="overlay"> Project pool 1 </div></a>
85+
<a href="projects/project-pools.html"><div class="overlay"> Project pool </div></a>
8686

8787
</div>
88-
<div class="container">
88+
<div id="containermarg" class="container">
8989
<img class="imgproject" src="images/thebigsleep_1000px.jpg">
9090
<a href="projects/animation-group-project.html"><div class="overlay"> Animation group project </div></a>
9191

92-
</div><div class="container">
92+
</div><div id="containermarg" class="container">
9393
<img class="imgproject" src="images/rekreate_1000px.jpg">
9494
<a href="projects/basic-ux.html"><div class="overlay"> Basic UX project</div></a>
9595

96-
</div><div class="container">
96+
</div><div id="containermarg" class="container">
9797
<img class="imgproject" src="images/aroundtheclock_1000px.jpg">
9898
<a href="projects/short-video.html"><div class="overlay"> Short video </div></a>
9999

100-
</div><div class="container">
100+
</div><div id="containermarg" class="container">
101101
<img class="imgproject" src="images/cphdare_1000px.jpg">
102102
<a href="projects/cph-dare.html"><div class="overlay"> Group video project </div></a>
103103

Diff for: ‎projects/animation-group-project.html

+20-15
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
77
<link rel="stylesheet" href="style.css">
88
<style type="text/css">
99
.st0 {
@@ -16,7 +16,7 @@
1616
}
1717

1818
</style>
19-
<title>Mihael Sandro</title>
19+
<title>The Big Sleep | Projects</title>
2020
</head>
2121

2222
<body>
@@ -39,28 +39,33 @@
3939
</svg>
4040
</a>
4141
</span>
42-
4342
<ul class="navbar-nav">
44-
<li> <a href="index.html">Home</a></li>
45-
<li><a id="active" href="projects.html">Projects</a></li>
46-
<li><a class="navblue" href="about.html">About</a></li>
47-
43+
<li> <a href="http://mihaelsandro.com/kea/portfolio/">Home</a></li>
44+
<li><a id="active" href="http://mihaelsandro.com/kea/portfolio/projects.html">Projects</a></li>
45+
<li><a class="navblue" href="http://mihaelsandro.com/kea/portfolio/about.html">About</a></li>
4846
</ul>
4947
</nav>
5048

5149
<div id="side-menu" class="side-nav">
5250
<a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a>
53-
<li><a href="home.html">Home</a></li>
54-
<li><a href="projects.html">Projects</a></li>
55-
<li><a href="about.html">About</a></li>
51+
<li><a href="http://mihaelsandro.com/kea/portfolio/index.html">Home</a></li>
52+
<li><a href="http://mihaelsandro.com/kea/portfolio/projects.html">Projects</a></li>
53+
<li><a href="http://mihaelsandro.com/kea/portfolio/about.html">About</a></li>
5654
</div>
57-
58-
59-
<h1 class="verticaltxt">Projects</h1>
6055
</header>
61-
56+
<img class="responsiveimg" src="images/TBS_cover.jpg">
57+
<h2>The Big Sleep - Interactive teaser</h2>
58+
<main>
59+
<article>
60+
<p> This was first big group project. Everything was new to all of us because it was first time we were working in groups for more than a week and we were creating something completely new so we couldn't really look for a reference anywhere. This project definitely challenged everyone in the group to create something new and use new programs. I was really proud of the final animation, and especially SoMe poster. </p>
61+
<a href="http://www.kmjdesign.dk/webpage/the-big-sleep/"> Link to the interactive trailer</a>
62+
<p> Animated poster for SoMe.</p>
63+
<img class="responsiveimg" src="images/TBS_new.gif">
64+
</article>
65+
</main>
6266

6367

6468
</body>
65-
<script src="javas.js"></script>
69+
<script src="javas.js"></script>
70+
6671
</html>

0 commit comments

Comments
 (0)