summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMartial Simon <msimon_fr@hotmail.com>2023-07-07 17:00:57 +0200
committerMartial Simon <msimon_fr@hotmail.com>2023-07-07 17:00:57 +0200
commit156302fded32688a0dd38083673e20e5977ef9c3 (patch)
tree6d93f3ae5dcf1a2e16af00acf591f2045b877802
parent5fe9db9eb57e76bbf081685f9e851d70596d3417 (diff)
feat: started implementing side scrolling
Diffstat
-rw-r--r--img/button.pngbin0 -> 3289242 bytes
-rw-r--r--index.html8
-rw-r--r--log.html5
-rw-r--r--moa.html88
-rw-r--r--musique.html3
-rw-r--r--style.css18
6 files changed, 93 insertions, 29 deletions
diff --git a/img/button.png b/img/button.png
new file mode 100644
index 0000000..acef24e
--- /dev/null
+++ b/img/button.png
Binary files differ
diff --git a/index.html b/index.html
index 904ab58..442be8e 100644
--- a/index.html
+++ b/index.html
@@ -9,22 +9,22 @@
<h1>Marcellus</h1>
<a href="en/index.html" class="language">🤮🇬🇧</a>
<div class="links">
- <a href="moa.html" class="link">
+ <a href="moa.html#aboutme" class="link">
<img src=img/aboutme.png width=60% />
<span>Qui suis-je ?</span>
</a>
</div>
<div class="links">
- <a href="info.html" class="link">
+ <a href="moa.html#it" class="link">
<img src="https://www.your3dsource.com/images/laptopB.gif">
<span>Informatique</span>
</a>
- <a href="musique.html" class="link">
+ <a href="moa.html#music" class="link">
<img src=img/music.png width=60% />
<span>Musique</span>
</a>
</div>
- <a href="log.html">trop long pas lire</a>
+ <small><small><small><a href="log.html" style="position: absolute; bottom:0; right:0;">trop long pas lire</a></small></small></small>
</body>
</html>
diff --git a/log.html b/log.html
index 44a3a46..4910626 100644
--- a/log.html
+++ b/log.html
@@ -8,13 +8,16 @@
<body>
<small style="color: #0002;">Fait rigolo: je compte pas forcément traduire cette page, désolé</small>
<div class="content">
- <h2>Mémoire 1</h2>
+ <h2 id="mem1">Mémoire 1</h2>
<p>4 Juin 2023<br>
Je viens d'avoir l'idée de cette page. Pour avoir déjà tenté le journal intime, je doute que ça marche beaucoup...<br>
Je pense au projet initié par neocities, melonland, tous ceux dont j'ai pas encore entendu parler. Au final le but c'est de revenir au web comme il a commencé, sans suggestions de recherche, sans tri personnalisé des résultats. En quelque sorte, c'est faire d'internet le seul réseau social global, dans lequel le profil individuel est un site web réalisé et personnalisé à la main, et le contenu est ce que les gens vont chercher eux même sans que ça leur soit <s>proposé</s> imposé paresseusement.<br>
Et pour les abonnements ? Il y a les flux RSS pour ça (note temporelle : là tout de suite maintenant je sais très peu comment ça fonctionne, et mon avis peut être biaisé).<br>
<i>J'espère que ça fait pas trop coup de gueule</i>
<hr class="section-sep">
+ <h2>Mémoire 2</h2>
+ <p>7 juillet 2023<br>
+ En fait la <a class="text-link" href="#mem1">Mémoire 1</a> date du 4 juillet, et je crois qu'il y a pas d'accents sur les mois...
</div>
<a href="index.html" class="footer">Return</a>
</body>
diff --git a/moa.html b/moa.html
index 9c2484f..59342ba 100644
--- a/moa.html
+++ b/moa.html
@@ -7,22 +7,78 @@
</head>
<body>
<a href="en/aboutme.html" class="language">🤮🇬🇧</a>
- <div class="content">
- Marcellus est mon pseudo, pour raisons évidentes je ne donnerai pas mon vrai prénom... hem <br>
- D'habitude, je suis pas spécialement doué pour parler de moi, mais bon, j'ai envie de faire l'effort pour une fois.
- <br>
- Je suis étudiant en informatique à l'EPITA, musicien depuis l'enfance, grand frère, euuuh c'est tout (je crois).<br>
- J'ai eu l'idée de faire ce petit site/blog perso en regardant les projets (et notamment le site) d'un ami de l'école, <a style="color: darkorchid;" class="text-link" href="https://ratakor.com">Ratakor</a>, qui m'a appris pas mal de trucs sur l'utilisation des systèmes libres et open source. C'est un peu mon mentor, même si on est de la même promo.<br>
- En explorant le site de Ratakor, je suis tombé sur sa webring, et une chose en entraînant une autre, j'ai découvert le concept des webrings, ainsi que des blogs personnels très inspirants, le thread lainchan sur les webrings, et la pensée derrière tout ça. Ca m'a donné envie de créer moi aussi mon propre site, d'en faire ma propre safe place.<br>
- J'espère que vous aurez plaisir à faire le tour de mon site, et bonne journée!<br><br>
- <iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=Jem&dob=1687547484&gender=f&element=Fire&pet=https%3A%2F%2Fmedia.discordapp.net%2Fattachments%2F1030791827500052502%2F1121879891751747734%2Fjemjr.png&map=hills.jpg&background=&tablecolor=black&textcolor=black" frameborder="0"></iframe>
- <hr class="section-sep">
- <h2>Du coup, ma webring</h2>
- <div class="webring">
- <a href="https://ratakor.com"><img src="https://ratakor.com/images/based/ratakor.gif"></a>
- <a href="https://gifypet.neocities.org/" ><img src="https://gifypet.neocities.org/images/badge.gif"></a>
- <a href="https://nuange.neocities.org/" ><img src="https://i.imgur.com/q3Fio3i.gif"></a>
- </div>
+ <div class="content-container">
+ <div class="content" id="aboutme">
+ Marcellus est mon pseudo, pour raisons évidentes je ne donnerai pas mon vrai prénom... hem <br>
+ D'habitude, je suis pas spécialement doué pour parler de moi, mais bon, j'ai envie de faire l'effort pour une fois.
+ <br>
+ Je suis étudiant en informatique à l'EPITA, musicien depuis l'enfance, grand frère, euuuh c'est tout (je crois).<br>
+ J'ai eu l'idée de faire ce petit site/blog perso en regardant les projets (et notamment le site) d'un ami de l'école, <a style="color: darkorchid;" class="text-link" href="https://ratakor.com">Ratakor</a>, qui m'a appris pas mal de trucs sur l'utilisation des systèmes libres et open source. C'est un peu mon mentor, même si on est de la même promo.<br>
+ En explorant le site de Ratakor, je suis tombé sur sa webring, et une chose en entraînant une autre, j'ai découvert le concept des webrings, ainsi que des blogs personnels très inspirants, le thread lainchan sur les webrings, et la pensée derrière tout ça. Ca m'a donné envie de créer moi aussi mon propre site, d'en faire ma propre safe place.<br>
+ J'espère que vous aurez plaisir à faire le tour de mon site, et bonne journée!<br><br>
+ <iframe width="314" height="321" scrolling="no" src="https://gifypet.neocities.org/pet/pet.html?name=Jem&dob=1687547484&gender=f&element=Fire&pet=https%3A%2F%2Fmedia.discordapp.net%2Fattachments%2F1030791827500052502%2F1121879891751747734%2Fjemjr.png&map=hills.jpg&background=&tablecolor=black&textcolor=black" frameborder="0"></iframe>
+ <hr class="section-sep">
+ <h2>Du coup, ma webring</h2>
+ <div class="webring">
+ <a href=#><img width=88px height=31px src=img/button.png /></a>
+ <a href="https://ratakor.com"><img src="https://ratakor.com/images/based/ratakor.gif"></a>
+ <a href="https://gifypet.neocities.org/" ><img src="https://gifypet.neocities.org/images/badge.gif"></a>
+ <a href="https://nuange.neocities.org/" ><img src="https://i.imgur.com/q3Fio3i.gif"></a>
+ </div>
+ </div>
+ <div class="content" id="music">
+
+ <h1>Formation</h1>
+ <p>J'ai commencé les cours de guitare et de formation musicale vers l'âge de 7 ans, et j'ai un assez bon niveau de solfège. J'ai aussi appris la basse pendant quelques années. J'ai suivi 2 ans de cours de MAO, et je suis très à l'aise avec Ableton Live.</p>
+ <hr class="section-sep">
+ <h1 id="matos">Matos</h1>
+ <div class="matos">
+ <div>
+ <h3><u>Instruments</u></h3>
+ <ul>
+ <li>Yamaha APX500 II</li>
+ <li>Cort G254</li>
+ <li>Ibanez JemJR</li>
+ <li>Ibanez TMB30</li>
+ </ul>
+ </div>
+ <div>
+ <h3><u>Amplis / Pédales</u></h3>
+ <ul>
+ <li>Fender Mustang I</li>
+ <li>Zoom G1X Four</li>
+ </ul>
+ </div>
+ </div>
+ <hr class="section-sep">
+ <h1>Groupes</h1>
+ <h2>Orchestre EMC</h2>
+ <p>Mon premier groupe était l'orchestre de l'école de musique de [CACHE]. J'étais leur bassiste jusqu'à juin 2022.</p>
+ <hr class="sub-sep">
+ <h2>Apocalypse</h2>
+ <p>Le nom n'est même pas officiel, mais c'est celui que nous avions donné pour un éventuel concert, sur lequel nous ne nous étions jamais produits. J'ai rencontré les membres de ce groupe déjà formé au lycée, constatant qu'ils n'avaient pas de bassiste (dommage pour un groupe de rock/metal). Ils m'ont intégré après que je me sois proposé pour le poste début avril 2022, puis nous avons répété ensemble jusqu'à juin 2022. Remarquant bien qu'ils ne prenaient plus de plaisir à jouer ensemble, ils ont décidé de dissoudre le groupe.</p>
+ <hr class="sub-sep">
+ <h2>Les Running Gags</h2>
+ <p>À la fin de l'été 2022, j'ai commencé à chercher un groupe plus proche de mon logement étudiant. C'est comme ça que j'ai trouvé les Running Gags. Ils ont décidé de me prendre directement à la fin de la répète de test, et on joue encore ensemble aujourd'hui. Nous avons donné notre premier concert le 17 juin 2023</p>
+ <div class="liens"><a class="text-link" style="color: darkblue" href="https://www.facebook.com/profile.php?id=100092628580525">VisageLivre</a> <a class="text-link" style="color:#f00062" href="https://www.instagram.com/les_running_gags/">Instagram</a></div>
+ <hr class="section-sep">
+ <h1>Compositions & productions</h1>
+ <p>Quand l'inspiration vient, je note ça sur un coin de papier, puis je reporte mes notes dans Guitar Pro. Je voudrais passer sur MuseScore, principalement parce que c'est un logiciel libre, mais l'utilisation est très peu intuitive. Ultimement, en fin de composition, j'enregistre tout via Ableton, puis je termine en faisant le mixage.<br>
+ J'ai quelques productions à mon actif, mais celle sur laquelle j'ai le plus travaillé est la BO du projet de groupe du 2è semestre.
+ La plupart des mes productions sont trouvables sur <a class="text-link" style="color: #fa7b12;" href=https://on.soundcloud.com/VmXE8>SoundCloud</a></p>
+ </div>
+ <div class="content" id="it">
+ <h1>Projets</h1>
+ <p>La plupart de mes projets sont trouvables sur <a class="text-link" href="https://github.com/Laitram31" style="color:#333333">Github</a>.</p>
+ <hr class="section-sep">
+ <h1>Mes machines</h1>
+ <p>
+ <ul>
+ <li>PCs : J'utilise un Dell Inspiron 7390 2n1 sous Windaube (ouais je sais, je suis pas prêt à faire la transition complète) comme PC portable, et un Asus X550 sous Artix Linux comme PC fixe.</li>
+ <li>Son : J'utilise une M-AUDIO Solo comme carte son, reliée à 2 enceintes ou mon casque audio. (Voir mon <a class="text-link" href="#music" style="color:salmon">matériel de musique</a>)</li>
+ </ul>
+ </p>
+ </div>
</div>
<a href=index.html class="footer">Retour</a>
</body>
diff --git a/musique.html b/musique.html
index 3b9a19e..5ada83a 100644
--- a/musique.html
+++ b/musique.html
@@ -5,8 +5,9 @@
<link rel="stylesheet" type="text/css" href=style.css />
</head>
<body>
+ <a href="en/music.html" class="language">🤮🇬🇧</a>
<div class="content">
- <a href="en/music.html" class="language">🤮🇬🇧</a>
+
<h1>Formation</h1>
<p>J'ai commencé les cours de guitare et de formation musicale vers l'âge de 7 ans, et j'ai un assez bon niveau de solfège. J'ai aussi appris la basse pendant quelques années. J'ai suivi 2 ans de cours de MAO, et je suis très à l'aise avec Ableton Live.</p>
<hr class="section-sep">
diff --git a/style.css b/style.css
index 7384a50..bc8fbb1 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,4 @@
body{
- display: flex;
- flex-direction: column;
- justify-content: center;
background: url(img/wp.gif) no-repeat fixed;
background-size:cover;
text-align:center;
@@ -84,12 +81,17 @@ a.text-link::after{
top: 3%;
}
+.content-container{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+}
+
.content{
- margin: auto;
- margin-top: 2%;
- margin-bottom: 2%;
+ margin: 3%;
padding: 1%;
- width: 75%;
+ min-width: 90vw;
+ width: auto;
background-color: rgba(220, 237, 200, 0.65);
border-radius: 5px;
border: 5px dotted #b4d545;
@@ -124,6 +126,8 @@ a.text-link::after{
}
.footer{
+ position: fixed;
+ top: 5px;
margin:auto;
animation-name: foot-anim;
animation-duration: 6s;
generated by cgit v1.2.3 (git 2.39.1) at 2026-03-14 16:52:18 +0000