-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (131 loc) · 8.44 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="oJB8TeyfHBI81cuFVl7QBX2RjuAc67mX1HOZZN4CFvY" name="google-site-verification"/>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="ie=edge" http-equiv="X-UA-Compatible"/>
<title location="title">Michael Bleuez | Software Engineer</title>
<meta content="" name="author"/>
<meta content="Personnal website" name="description"/>
<meta content="website, personnal, portfolio" name="keywords"/>
<link href="tailwind.min.css" rel="stylesheet"/>
</head>
<body class="bg-gray-200 font-sans leading-normal tracking-normal">
<!--Header-->
<div class="w-full m-0 p-0 bg-cover bg-bottom" style="background-image:url('cover.jpg'); height: 60vh; max-height:460px;">
<div class="container max-w-4xl mx-auto pt-16 md:pt-32 text-center break-normal">
<!--Title-->
<p class="text-white font-extrabold text-3xl md:text-5xl" configurable="title">Hi, I'm Michael</p>
<p class="text-xl md:text-2xl text-gray-500" configurable="welcome">How do you do?</p>
</div>
</div>
<!--Container-->
<div class="container px-4 md:px-0 max-w-6xl mx-auto -mt-32">
<div class="mx-0 sm:mx-6">
<!--Nav-->
<nav class="mt-0 w-full">
<div class="container mx-auto flex items-center">
<div class="flex w-1/2 pl-4 text-sm">
<ul class="list-reset flex justify-between flex-1 md:flex-none flex-wrap items-center" location="nav_list">
<a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="index.html">HOME</a><a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="projects.html">PROJECTS</a><a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="jobs.html">JOBS</a><a class="inline-block py-2 px-2 text-white no-underline hover:underline" configurable="link_name" href="contact.html">CONTACT</a></ul>
</div>
<div class="flex w-1/2 justify-end content-center">
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="Share on @Twitter" href="https://twitter.com/intent/tweet?url=#">
<svg class="fill-current h-4" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg>
</a>
<a class="inline-block text-gray-500 no-underline hover:text-white hover:text-underline text-center h-10 p-2 md:h-auto md:p-4 avatar" data-tippy-content="Share on Facebook" href="https://www.facebook.com/sharer/sharer.php?u=#">
<svg class="fill-current h-4" viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg>
</a>
</div>
</div>
</nav>
<div class="bg-gray-200 w-full text-xl md:text-2xl text-gray-800 leading-normal rounded-t">
<!--Lead Card-->
<!--/Lead Card-->
<!--Posts Container-->
<div class="flex h-full bg-white rounded overflow-hidden shadow-lg">
<a class="flex flex-wrap no-underline hover:no-underline" href="about_me.html" location="linkto">
<div class="w-full md:w-2/3 rounded-t">
<img class="h-full w-full shadow" location="cover" src="assets/perso_cover.jpg"/>
</div>
<div class="w-full md:w-1/3 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<p class="w-full text-gray-600 text-xs md:text-sm pt-6 px-6" configurable="lead_card_title">ABOUT ME</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="lead_card_welcome_bold_message">A man of few words, but (too?) many ideas</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="lead_card_message" style="white-space:pre-wrap">TDLR: I'm a junior software engineer who likes challenge and automation.
I want to keep creating and learning things, but obviously there's much more to it than a short description...</p>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
<div class="flex items-center justify-between">
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Michael Bleuez" location="avatar" src="assets/avatar.jpg"/>
<p class="text-gray-600 text-xs md:text-sm" configurable="lead_card_read_time"></p>
</div>
</div>
</div>
</a>
</div>
<div class="flex flex-wrap justify-between pt-12 -mx-6" location="card_container">
<!--1/3 col -->
<div class="w-bfull md:w-1/3 p-6 flex flex-col flex-grow flex-shrink" location="size">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a class="flex flex-wrap no-underline hover:no-underline" href="https://michaelb.github.io/cv" location="linkto">
<img class="h-64 w-full rounded-t pb-6" location="cover" src="assets/cv.png"/>
<p class="w-full text-gray-600 text-xs md:text-sm px-6" configurable="card_title">resume</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="bold_message">My updated resume</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="message">Available in French, English, web and PDF versions</p>
</a>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
<div class="flex items-center justify-between">
<a href="#" location="avatarlink">
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="Michael Bleuez" location="avatar" src="assets/blank.jpg"/>
</a>
<p class="text-gray-600 text-xs md:text-sm" configurable="read_time"></p>
</div>
</div>
</div>
<!--1/3 col -->
<div class="w-bfull md:w-2/3 p-6 flex flex-col flex-grow flex-shrink" location="size">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow-lg">
<a class="flex flex-wrap no-underline hover:no-underline" href="liked.html" location="linkto">
<img class="h-64 w-full rounded-t pb-6" location="cover" src="assets/hobbies.gif"/>
<p class="w-full text-gray-600 text-xs md:text-sm px-6" configurable="card_title">I like..</p>
<div class="w-full font-bold text-xl text-gray-900 px-6" configurable="bold_message">The awesome curiosities I've stumbled upon along my journey</div>
<p class="text-gray-800 font-serif text-base px-6 mb-5" configurable="message"></p>
</a>
</div>
<div class="flex-none mt-auto bg-white rounded-b rounded-t-none overflow-hidden shadow-lg p-6">
<div class="flex items-center justify-between">
<a href="#" location="avatarlink">
<img alt="Avatar of Author" class="w-8 h-8 rounded-full mr-4 avatar" data-tippy-content="" location="avatar" src="assets/blank.jpg"/>
</a>
<p class="text-gray-600 text-xs md:text-sm" configurable="read_time"></p>
</div>
</div>
</div>
</div>
<!--/ Post Content-->
</div>
<!--Author-->
<div class="flex w-full items-center font-sans p-8 md:p-24" location="credits">
<img alt="Avatar of Author" class="w-10 h-10 rounded-full mr-4" location="author_icon" src="assets/avatar.jpg"/>
<div class="flex-1">
<p class="text-base font-bold text-base md:text-xl leading-none" configurable="bottom_author_name">Michael Bleuez</p>
<p class="text-gray-600 text-xs md:text-base">Configurable rework of the Casper Tailwind CSS toolbox theme<a class="text-gray-800 hover:text-green-500 no-underline border-b-2 border-green-500" href="https://www.tailwindtoolbox.com"> TailwindToolbox.com</a></p>
</div>
<div class="justify-end">
<a class="button bg-transparent border border-gray-500 hover:border-green-500 text-xs text-gray-500 hover:text-green-500 font-bold py-2 px-4 rounded-full" href="https://github.com/michaelb/michaelb.github.io">See sources</a>
</div>
</div>
<!--/Author-->
</div>
</div>
<script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@4"></script>
<script>
//Init tooltips
tippy('.avatar')
</script>
</body>
</html>