[BER-WDPT-2024] Yujiro Akihiro

app.js

@@ -0,0 +1,49 @@
+const express = require('express');
+const path = require('path');
+const hbs = require('hbs');
+const app = express();
+
+// Set view engine to hbs
+app.set('view engine', 'hbs');
+app.set('views', path.join(__dirname, 'views'));
+
+// Register the partials directory
+hbs.registerPartials(path.join(__dirname, 'views/partials'));
+
+// Middleware for serving static files
+app.use(express.static('public'));
+
+// Routes for each page
+app.get('/', (req, res) => {
+    res.render('index', { title: 'Shada Mustafa' });
+});
+
+app.get('/about', (req, res) => {
+    res.render('about', { title: 'About Shada Mustafa' });
+});
+
+app.get('/works', (req, res) => {
+    res.render('works', { title: 'Works' });
+});
+
+app.get('/gallery', (req, res) => {
+    const artworks = [];
+    for (let i = 2; i <= 24; i++) {
+        artworks.push({
+            title: `Artwork ${i}`,
+            artist: 'Shada Mustafa',
+            year: 2024,
+            medium: 'Acrylic on Canvas',
+            dimensions: '30 x 40 inches',
+            description: `Description for Artwork ${i}`,
+            image: `/images/${i}.jpg`
+        });
+    }
+    res.render('gallery', { title: 'Gallery', artworks });
+});
+
+// Start server
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => {
+    console.log(`Server running on port ${PORT}`);
+});

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "lab-express-basic-site",
+  "version": "1.0.0",
+  "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "express": "^4.19.2",
+    "hbs": "^4.2.0"
+  }
+}

public/stylesheets/style.css

@@ -0,0 +1,131 @@
+body {
+  font-family: "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background: url("/images/1.jpg") no-repeat center center fixed;
+  background-size: cover;
+  color: #fff;
+  font-weight: 300;
+}
+
+.navbar {
+  margin-bottom: 0;
+}
+
+.container {
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.jumbotron {
+  margin-bottom: 0;
+}
+
+.card-img-top {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.project-section {
+  background-size: cover;
+  background-position: center;
+  padding: 20px;
+  border-radius: 10px;
+  color: white;
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.project-section::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
+  z-index: 1;
+}
+
+.project-section h2,
+.project-section p,
+.project-section ul {
+  position: relative;
+  z-index: 2;
+}
+
+.project-section h3 {
+  position: relative;
+  z-index: 2;
+  color: #ffffff;
+  text-shadow: 2px 2px 4px rgba(134, 134, 134, 0.8);
+  font-weight: 300; /* 細めのフォントに設定 */
+}
+
+.project-section ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.project-section li {
+  margin-bottom: 10px;
+}
+
+h1,
+h2 {
+  font-weight: 700;
+}
+
+h3 {
+  font-weight: 300;
+}
+
+.brand-name {
+  font-weight: 700;
+}
+
+.brand-name .lastname {
+  font-weight: 300;
+}
+
+.centered-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  text-align: center;
+  flex-direction: column;
+}
+
+.thin-text {
+  font-weight: 300;
+}
+
+.gallery-title,
+.projects-title {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+  height: 30vh;
+}
+
+.about-content {
+  padding: 0 20px;
+}
+
+.project-description {
+  font-weight: 300;
+}
+
+.highlighted-work {
+  background-color: rgba(255, 255, 255, 0.3);
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+  color: #fff;
+}

views/about.hbs

@@ -0,0 +1,9 @@
+{{!-- about.hbs --}}
+{{> layout}}
+<div class="text-center centered-text about-content" style="background: none;">
+    <h1 class="thin-text">About</h1>
+    <h1><a class="navbar-brand brand-name" href="/">
+                Shada <span class="lastname">Mustafa</span>
+            </a></h1>
+    <p class="lead">Shada Mustafa is an accomplished artist known for her vivid and emotionally evocative paintings. Through her work, she seeks to explore the depths of human emotion and the complexities of the human experience.</p>
+</div>

views/gallery.hbs

@@ -0,0 +1,29 @@
+{{!-- gallery.hbs --}}
+{{> layout}}
+<div class="container gallery-title">
+    <h1 class="thin-text">Gallery of</h1>
+    <h1><a class="navbar-brand brand-name" href="/">
+                Shada <span class="lastname">Mustafa</span>
+            </a></h1>
+</div>
+<div class="container">
+    <div class="row">
+        {{#each artworks}}
+        <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+            <div class="card h-100">
+                <img src="{{this.image}}" class="card-img-top img-fluid" alt="{{this.title}}">
+                <div class="card-body d-flex flex-column">
+                    <h5 class="card-title">{{this.title}}</h5>
+                    <p class="card-text flex-grow-1">
+                        <strong>Artist:</strong> Shada Mustafa<br>
+                        <strong>Year:</strong> {{this.year}}<br>
+                        <strong>Medium:</strong> {{this.medium}}<br>
+                        <strong>Dimensions:</strong> {{this.dimensions}}<br>
+                        <strong>Description:</strong> {{this.description}}
+                    </p>
+                </div>
+            </div>
+        </div>
+        {{/each}}
+    </div>
+</div>

views/index.hbs

@@ -0,0 +1,8 @@
+{{!-- index.hbs --}}
+{{> layout}}
+<div class="jumbotron jumbotron-fluid text-white centered-text">
+    <h1><a class="navbar-brand brand-name" href="/">
+                Shada <span class="lastname">Mustafa</span>
+            </a></h1>
+    <p class="lead">Explore the amazing artworks and projects of Shada Mustafa.</p>
+</div>

views/partials/layout.hbs

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shada Mustafa - {{title}}</title>
+    <link rel="stylesheet" href="/stylesheets/bootstrap.min.css">
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+            <a class="navbar-brand brand-name" href="/">
+                Shada <span class="lastname">Mustafa</span>
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav">
+                    <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/works">Works</a></li>
+                    <li class="nav-item"><a class="nav-link" href="/gallery">Gallery</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    {{{body}}}
+    <script src="/scripts/bootstrap.bundle.min.js"></script>
+</body>
+</html>

views/works.hbs

@@ -0,0 +1,35 @@
+{{!-- works.hbs --}}
+{{> layout}}
+<div class="container projects-title">
+    <h1 class="thin-text">Projects by</h1>
+    <h1>Shada <span class="lastname">Mustafa</span></h1>
+</div>
+<div class="container">
+    <!-- Abstract Emotions Section -->
+    <div class="project-section mb-4" style="background-image: url('/images/4.jpg');">
+        <h2>Abstract Emotions</h2>
+        <p class="project-description">Description: "Abstract Emotions" is a collection that captures the delicate world of human emotions through abstract shapes and vibrant colors. Each piece in this series aims to evoke a strong reaction from the viewer, reflecting the intensity and complexity of our inner feelings.</p>
+        <h3>Highlighted Works</h3>
+        <div class="highlighted-work">
+            <p><strong>Title:</strong> Fury</p>
+            <p><strong>Year:</strong> 2024</p>
+            <p><strong>Medium:</strong> Acrylic on Canvas</p>
+            <p><strong>Dimensions:</strong> 30 x 40 inches</p>
+            <p><strong>Description:</strong> Sharp red and black lines capture the raw intensity of anger.</p>
+        </div>
+    </div>
+
+    <!-- Emotional Landscapes Section -->
+    <div class="project-section" style="background-image: url('/images/21.jpg');">
+        <h2>Emotional Landscapes</h2>
+        <p class="project-description">Description: "Emotional Landscapes" translates the abstract emotions explored in the previous project into expansive and surreal landscapes. Each piece in this series depicts an environment that embodies a specific emotion, blending natural elements with abstract forms to create a unique and immersive experience.</p>
+        <h3>Highlighted Works</h3>
+        <div class="highlighted-work">
+            <p><strong>Title:</strong> Forest of Serenity</p>
+            <p><strong>Year:</strong> 2024</p>
+            <p><strong>Medium:</strong> Oil and Digital Print</p>
+            <p><strong>Dimensions:</strong> 36 x 48 inches</p>
+            <p><strong>Description:</strong> Soft, flowing forms filled with green hues evoke a sense of peace and tranquility.</p>
+        </div>
+    </div>
+</div>