-
Notifications
You must be signed in to change notification settings - Fork 0
/
books.html
122 lines (107 loc) · 5.4 KB
/
books.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<meta name="description" content="Official website of Jules Gomel, a researcher, brain enthusiast and loving video games, board games, reading and music. Explore my work and my hobbies.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="assets/img/icon_fav.png" type="image/png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<script src="https://kit.fontawesome.com/f980ba732e.js" crossorigin="anonymous"></script>
<title>Jules Gomel - Books</title>
</head>
<body>
<!-- En-tête -->
<header>
<nav class="navbar">
<ul class="nav-list">
<li><a href="index.html"><i class="fas fa-user"></i> About Me</a></li>
<li><a href="neuro.html"><i class="fas fa-brain"></i> Research</a></li>
<li><a href="games.html"><i class="fas fa-chess-board"></i> Hobbies</a></li>
<li><a href="books.html"><i class="fas fa-book"></i> Books</a></li>
<li><a href="music.html"><i class="fas fa-music"></i> Music</a></li>
</ul>
</nav>
<section class="profile-section">
<div class="header-content">
<h1 class="retro-font">My litterature interests</h1>
</div>
</section>
</header>
<!-- Contenu principal -->
<main>
<section id="books-interests">
<p>I've always enjoyed spending time reading.</p>
<p>I particularly enjoy fantasy, science-fiction and mystery books.</p>
<p>I also try to learn many things to develop myself : now, I want to learn good coding practices and way of thinking as it will follow me in my carrer :).</p>
<section id="bookshelf">
<div id="current-books" class="book-section">
<h2>Books I'm reading</h2>
<div class="bookshelf-container">
<div class="book-item">
<img src="assets/img/pragmatic.jpg" alt="Jules Gomel The pragmatic coder" class="book-cover">
<div class="book-title">The Pragmatic Coder</div>
<div class="book-author">Andrew Hunt</div>
</div>
</div>
</div>
<div id="to-read-books" class="book-section">
<h2>Books backlog</h2>
<div class="bookshelf-container">
<div class="book-item">
<img src="assets/img/leaves.jpg" alt="Jules Gomel The House of Leaves Book Cover" class="book-cover">
<div class="book-title">The House of Leaves</div>
<div class="book-author">Mark Z. Danielewski</div>
</div>
</div>
</div>
<div id="read-books" class="book-section">
<h2>Books I've read</h2>
<div class="bookshelf-container">
<div class="book-item">
<img src="assets/img/dracula_book.jpg" alt="Jules Gomel Dracula Book Cover" class="book-cover">
<div class="book-title">Dracula</div>
<div class="book-author">Bram Stoker</div>
</div>
<div class="book-item">
<img src="assets/img/witcher3.jpg" alt="Jules Gomel Witcher Book Cover" class="book-cover">
<div class="book-title">The Witcher Tome 3</div>
<div class="book-author">Andrzej Sapkowski</div>
</div>
<div class="book-item">
<img src="assets/img/maupassant.jpg" alt="Jules Gomel Maupassant Book Cover" class="book-cover">
<div class="book-title">Récits Fantastiques</div>
<div class="book-author">Guy de Maupassant</div>
</div>
</div>
</div>
</section>
</section>
</main>
<footer>
<section id="quote">
<blockquote>
<p>"Les livres sont des amis froids et sûrs."</p>
<cite> - Victor Hugo</cite>
</blockquote>
</section>
<section class="social-logos">
<a class="logo link-icon" href="https://github.com/JulesGL" target="_blank" alt="Jules Gomel GitHub">
<i class="fa-brands fa-github"></i>
</a>
<a class="logo link-icon" href="mailto:[email protected]" target="_blank" alt="Jules Gomel Email">
<i class="fas fa-envelope"></i>
</a>
<a class="logo link-icon" href="https://www.linkedin.com/in/julesgomel/" target="_blank" alt="Jules Gomel LinkedIn">
<i class="fa-brands fa-linkedin"></i>
</a>
<a class="logo link-icon" href="CV.pdf" download="CV_Jules_GOMEL.pdf" alt="Jules Gomel Download Resume">
<i class="fas fa-file"></i>
</a>
</section>
<section class="bottom-section">
<p>© 2024 - Jules Gomel</p>
</section>
</footer>
</body>
</html>