Created a basic website

pharo-project · Jun 18, 2024 · 65c1bc6 · 65c1bc6
1 parent 6a8be6f
commit 65c1bc6
Show file tree

Hide file tree

Showing 9 changed files with 364 additions and 0 deletions.
diff --git a/website/img/icons/64x64.png b/website/img/icons/64x64.png
diff --git a/website/img/montpellier.jpg b/website/img/montpellier.jpg
diff --git a/website/img/portraits/guillermo.jpeg b/website/img/portraits/guillermo.jpeg
diff --git a/website/img/portraits/oleksandr.jpeg b/website/img/portraits/oleksandr.jpeg
diff --git a/website/img/portraits/sebastian.jpeg b/website/img/portraits/sebastian.jpeg
diff --git a/website/img/portraits/stephane.jpeg b/website/img/portraits/stephane.jpeg
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html
+  lang="en"
+  dir="ltr"
+  itemscope
+  itemtype="https://schema.org/WebPage"
+  prefix="og:http://ogp.me/ns#"
+>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Pharo Summer School</title>
+
+    <link rel="canonical" href="https://newcomers.pharo.org" />
+    <link rel="icon" type="image/png" href="./img/icons/64x64.png" />
+    <!-- <link rel="manifest" href="./manifest.json" /> -->
+
+    <!-- General -->
+    <meta name="application-name" content="Pharo Summer School" />
+    <meta name="author" content="Oleksandr Zaitsev" />
+
+    <meta
+      name="description"
+      content="Learn advanced object-oriented programming in Pharo"
+    />
+    <meta
+      name="keywords"
+      content="pharo, summer school, object-oriented programming,
+      programming, live programming, learn programming"
+    />
+    <meta name="referrer" content="strict-origin" />
+
+    <!-- JSON-LD -->
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "Webpage",
+        "url": "https://newcomers.pharo.org/",
+        "name": "Pharo Summer School",
+        "headline": "Pharo Summer School",
+        "description": "Learn advanced object-oriented programming in Pharo",
+        "mainEntityOfPage": {
+          "@type": "WebPage",
+          "@id": "https://newcomers.pharo.org"
+        },
+        "publisher": {
+          "@type": "Person",
+          "name": "Oleksandr Zaitsev"
+        },
+        "image": {
+          "@type": "ImageObject",
+          "url": "./img/montpellier.jpg",
+          "width": 1000,
+          "height": 667
+        },
+        "datePublished": "2024-06-18",
+        "keywords": "pharo, summer school, object-oriented programming,
+                     programming, live programming, learn programming"
+      }
+    </script>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <div class="nav-buttons">
+          <a href="" rel="noopener noreferrer">Home</a>
+          <a href="" rel="noopener noreferrer">Venue</a>
+          <a href="" rel="noopener noreferrer">Program</a>
+          <a href="" rel="noopener noreferrer">Learning Resources</a>
+        </div>
+      </nav>
+    </header>
+
+    <main>
+      <h1><span style="color: var(--color-dark-gray)">isLoop 2024:</span> International School on Live
+        Object-Oriented Programming</h1>
+
+      <p>Dear students,</p>
+      <p>We are happy to announce that once again, Pharo Consortium is
+        organizing an international cost-free summer school.</p>
+      <p>Pay attention the places are limited because this is a cool summer
+        school in a cool place.</p>
+      <p>
+        If you have any additional questions, feel free to contact us at
+
+        <!-- Obfuscated email address -->
+        <a id="mlink1" href="#">
+          <span class="ltrText">
+            rf&#46;dar<!-- bots -->ic&#64;<!--
+            -->vest<!-- go -->iaz&#46;rdnask<!-- away -->elo
+          </span>
+        </a> 
+
+        &nbsp;or 
+
+        <!-- Obfuscated email address -->
+        <a id="mlink2" href="#">
+          <span class="ltrText">
+            rf&#46;air<!-- bots -->ni&#64;<!-- 
+            -->essa<!-- go -->cud&#46;enahp<!-- away -->ets
+          </span>
+        </a>
+      </p>
+
+      <h2>Registration</h2>
+
+      To register, please fill the following
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href=""
+      >Form</a>.
+      The deadline for applications is July 20, 2024.
+
+      <h2>Timeline</h2>
+
+      <ul>
+        <li><b>09h00 - 10h30:</b> Morning courses</li>
+        <li><b>10h30 - 10h45:</b> Coffee break</li>
+        <li><b>10h45 - 12h15:</b> Morning courses</li>
+        <li><b>12h15 - 13h15:</b> Lunch time</li>
+        <li><b>13h15 - 14h45:</b> Afternoon courses</li>
+        <li><b>14h45 - 15h00:</b> Coffee break</li>
+        <li><b>15h00 - 16h30:</b> Afternoon courses</li>
+      </ul>
+
+      <h2>Summer School Teachers</h2>
+
+      <div class="teacher-container">
+        <img class="teacher-photo" src="./img/portraits/stephane.jpeg" />
+
+        <div class="teacher-text">
+          <h3>Stéphane Ducasse</h3>
+
+          <p>I'm an expert in object design, object language design, reflective
+            programming, and the maintenance and evolution of large applications
+            (visualization, metrics, meta-modeling). My work on traits has been 
+            introduced in AmbientTalk, Slate, Pharo, Perl-6, PHP 5.4 and Squeak.
+            They have been ported to JavaScript. It has influenced the Scala an
+            Fortress languages.</p>
+
+          <p>I'm one of the founders of <a href="http://pharo.org">Pharo</a>.
+            I head its industry consortium http://consortium.pharo.org. I'm one
+            of the designers of <a href="https://modularmoose.org">Moose</a>, an
+            analysis platform. I regularly work with companies such as Arolla,
+            Berger-Levrault, Thales, Framatome, Siemens, CIM, Worldline to solve
+            their challenges.</p>
+        </div>
+      </div>
+
+      <div class="teacher-container">
+        <img class="teacher-photo" src="./img/portraits/guillermo.jpeg" />
+
+        <div class="teacher-text">
+          <h3>Guillermo Polito</h3>
+
+          <p>Coding enthusiast. Mad hatter. Software engineer and researcher.
+            I am currently an Inria Researcher at the CRIStAL laboratory, where
+            I am expert in software engineering and language implementations,
+            with a particular focus on test generation. I work in the Evref
+            team from Inria Lille-Nord Europe.</p>
+
+          <p>I actively participate in the development of the open source Pharo
+            programming language and environment since 2010, and I am a member
+            of its technical board since 2018.</p>
+        </div>
+      </div>
+
+      <div class="teacher-container">
+        <img class="teacher-photo" src="./img/portraits/sebastian.jpeg" />
+
+        <div class="teacher-text">
+          <h3>Sebastian Jordan-Montaño</h3>
+
+          <p>I am a PhD student working on memory profilers. I work at Inria,
+            France in the Evref team.</p>
+
+          <p>I was one of the main developers of the pharo-ai project contributing
+            and building different libraries for machine learning algorithms,
+            statistical metrics, data preprocessing, and AI in general. At Inria,
+            I also worked for 5 months as a Moose engineer mostly developing tools
+            for Moose IDE project.</p>
+        </div>
+      </div>
+
+      <div class="teacher-container">
+        <img class="teacher-photo" src="./img/portraits/oleksandr.jpeg" />
+
+        <div class="teacher-text">
+          <h3>Oleksandr Zaitsev</h3>
+
+          <p>I am a computer science researcher at CIRAD - a French agricultural
+            research and international cooperation organization working for the
+            sustainable development of tropical and Mediterranean regions.
+            I work on software engineering and AI techniques for participatory
+            agent-based modelling and serious games. In 2022, I defended my PhD at
+            Inria Lille; my thesis was about data mining-based tools to support
+            software evolution.</p>
+
+          <p>I contribute to many open-source projecs (Pharo, DataFrame,
+            PolyMath, pharo-ai). I am currently the lead developer of the Cormas
+            modelling platform.</p>
+        </div>
+      </div>
+
+    </main>
+
+    <footer>
+      <p>
+        &copy; 2024. All rights reserved by
+        <a href="" target="_blank" rel="noopener">Pharo Consortium</a>
+      </p>
+      <p>The source code of this website is licensed under <a href="https://github.com/olekscode/pharo-summer-school//blob/main/LICENSE" target="_blank" rel="license noopener noreferrer">The MIT License</a> and available on <a href="https://github.com/olekscode/pharo-summer-school" target="_blank" rel="noopener noreferrer">GitHub</a>.</p>
+    </footer>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/website/script.js b/website/script.js
@@ -0,0 +1,7 @@
+function insertMailto(id, place, me) {
+  var elink = document.getElementById(id);
+  elink.href = `mailto:${me}@${place}`;
+}
+
+insertMailto("mlink1", "cirad.fr", "oleksandr.zaitsev");
+insertMailto("mlink2", "inria.fr", "stephane.ducasse");
diff --git a/website/style.css b/website/style.css
@@ -0,0 +1,128 @@
+:root {
+  --page-width: 60rem;
+  --text-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+  'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  sans-serif;
+  --text-font-size: 1.1rem;
+  --color-pharo-blue: #3297d4;
+  --color-pharo-light-blue: #dcedf7;
+  --color-dark-gray: #616161;
+  --color-light-gray: #f5f5f5;
+}
+
+body {
+  margin: 0;
+  font-family: var(--text-font-family);
+  font-size: var(--text-font-size);
+  font-weight: 400;
+  font-style: normal;
+}
+
+nav {
+  display: flex;
+  overflow: visible;
+  border-bottom: 5px solid var(--color-light-gray);
+}
+
+.nav-buttons {
+  margin: 0 auto;
+  text-align: center;
+}
+
+nav a {
+  display: inline-block;
+  padding: 15px 14px;
+  color: var(--color-pharo-blue);
+  text-decoration: none;
+}
+
+nav a:hover {
+  background-color: var(--color-pharo-light-blue);
+}
+
+nav a:active {
+  background-color: var(--color-pharo-blue);
+  color: white;
+}
+
+main {
+  max-width: var(--page-width);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-pharo-blue);
+  line-height: 130%;
+  margin-top: 2rem;
+}
+
+h1 {
+  text-align: center;
+  margin: 2rem auto;
+  max-width: 45rem;
+}
+
+a {
+  color: var(--color-pharo-blue);
+}
+
+main li {
+  padding: 0.3rem;
+}
+
+span.ltrText {
+  unicode-bidi: bidi-override;
+  direction: rtl;
+}
+
+.teacher-container {
+  margin-bottom: 2em;
+}
+
+img.teacher-photo {
+  width: 10em;
+  height: 10em;
+  border-radius: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  /* margin: 0 1.5em 1em 0;
+  float: left; */
+}
+
+.teacher-text {
+  text-align: center;
+}
+
+footer {
+  margin-top: 2rem;
+  padding: 3rem;
+  text-align: center;
+}
+
+footer p {
+  margin: 0;
+}
+
+@media only screen and (min-width: 768px) {
+  .teacher-container {
+    display: flex;
+  }
+
+  img.teacher-photo {
+    float: left;
+    margin: 0 1.5em 1em 0;
+  }
+
+  .teacher-text {
+    display: inline;
+    text-align: left;
+  }
+
+  .teacher-text h3 {
+    margin-top: 0;
+  }
+}