3
\$\begingroup\$

My goal was to create a portfolio site for my motion design work. The website should be modern and intuitive, yet pose a good gallery. Please also comment on the dark mode functionality and responsiveness.

The full website is hosted under timlwsk.bplaced.net (good domain coming soon). The contact form isn't working yet.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name=”viewport” content=”width=device-width,initial-scale=1″>
    <script src="https://kit.fontawesome.com/43017aa80c.js" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Chivo&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/master.css">
    <title>timlwsk</title>
  </head>
  <body>
    <div class="container">
      <div class="item header" id="header-l">
        <h1>timlwsk</h1>
      </div>
      <div class="item header" id="header-r">
        <ul>
          <li><a href="#contact">Contact</a></li>
          <li><span title="Twitter"><a href="https://twitter.com/timlwsk" target="_blank"><i class="fab fa-twitter"></i></a></span></li>
          <li><span title="Instagram"><a href="https://instagram.com/lwskdesign" target="_blank"><i class="fab fa-instagram"></i></a></span></li>
          <li><span title="Unsplash"><a href="https://unsplash.com/@lwskphotography" target="_blank"><i class="fa fa-camera"></i></a></span></li>
          <li><span title="Reddit"><a href="https://reddit.com/u/timlwsk" target="_blank"><i class="fab fa-reddit-alien"></i></a></span></li>
          <li><span title="Toggle Dark Mode"><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></span></li>
        </ul>
      </div>
      <div class="gallery">
        <div class="img-wrapper"><img src="./images/15.jpg" title="everybody gets high" alt="gallery image 15"></div>
        <div class="img-wrapper"><img src="./images/14.jpg" title="spilt blood" alt="gallery image 14"></div>
        <div class="img-wrapper"><img src="./images/13.jpg" title="drippin' gold" alt="gallery image 13"></div>
        <div class="img-wrapper"><img src="./images/12.jpg" title="suffocated (white)" alt="gallery image 12"></div>
        <div class="img-wrapper"><img src="./images/11.jpg" title="suffocated (black)" alt="gallery image 11"></div>
        <div class="img-wrapper"><img src="./images/10.jpg" title="hannover" alt="gallery image 10"></div>
        <div class="img-wrapper"><img src="./images/09.jpg" title="head in the clouds" alt="gallery image 09"></div>
        <div class="img-wrapper"><img src="./images/08.jpg" title="arm" alt="gallery image 08"></div>
        <div class="img-wrapper"><img src="./images/07.jpg" title="wilted" alt="gallery image 07"></div>
        <div class="img-wrapper"><img src="./images/06.jpg" title="Honey, I am drowning" alt="gallery image 06"></div>
        <div class="img-wrapper"><img src="./images/05.jpg" title="discobolus" alt="gallery image 05"></div>
        <div class="img-wrapper"><img src="./images/04.jpg" title="AF1" alt="gallery image 04"></div>
        <div class="img-wrapper"><img src="./images/03.jpg" title="sadness" alt="gallery image 03"></div>
        <div class="img-wrapper"><img src="./images/02.jpg" title="happiness" alt="gallery image 02"></div>
        <div class="img-wrapper"><img src="./images/01.jpg" title="嗳 (Love)" alt="gallery image 01"></div>
      </div>
      <div class="contact" id="contact">
        <form class="contact-form" action="email.php" method="post">
          <label for="name">Your Name</label>
          <input type="text" name="name">

          <label for="email">Your Email</label>
          <input type="text" name="email">

          <label for="message">Your Messages</label>
          <textarea name="messahge"></textarea>

          <input type="submit"></input>
        </form>
      </div>
      <div class="footer">
        <p>Copyright 2020</p>
      </div>
    </div>
    <script src="./js/darkmode.js"></script>
  </body>
</html>

master.css

/*   grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; */

:root, [data-theme="light"] {
  --bg-color: #ffffff;
  --bg-color-inv: #000000;
  --outline-color: #000000;
  --text-primary: #000000;
  --text-primary-inv: #ffffff;
  --text-secondary: #a4a4a4;
  --text-secondary-hover: #000000;
  --chivo: 'Chivo', sans-serif;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --bg-color-inv: #dadada;
  --outline-color: #dadada;
  --text-primary: #dadada;
  --text-primary-inv: #000000;
  --text-secondary: #919191;
  --text-secondary-hover: #dadada;
}

html {
  margin: 0;
  padding: 0;
  font-family: 'Chivo', sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-color);
  font-size: 100%;
  scroll-behavior: smooth;
}

/* Transitions */
html, #header-r ul li a:link, #header-r ul li a:visited, #header-r ul li a:hover, input[type=submit], input[type=submit]:hover, html {
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.container {
  display: grid;
  grid-template-columns: 10% auto 10%;
  grid-template-rows: auto;
}

#header-l {
  grid-area: 1/2/1/2;
  justify-self: left;
  align-self: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

#header-r {
  grid-area: 1/2/1/2;
  justify-self: right;
  align-self: center;
}

#header-r ul li {
  list-style: none;
  float: left;
  margin-left: 22px;
}

#header-r ul li a:link, #header-r ul li a:visited {
  color: var(--text-secondary);
  text-decoration: none;
  text-transform: uppercase;
}

#header-r ul li a:hover {
  color: var(--text-secondary-hover);
}

.gallery {
  font-size: 0;
  grid-column: 2/2;
}

.img-wrapper {
  width: calc(100%/1);
  display: inline-block;
}

.img-wrapper img {
  max-width: 100%;
  max-height: 100%;
}

.contact {
  grid-area: 3/2/3/2;
  justify-self: center;
  align-self: center;
  width: calc(2/3);
  margin-top: 10%;
}

label {
  font-size: 100%;
  display: inline-block;
}

input[type=text],  textarea{
  margin-bottom: 30px;
}

input[type=text], input[type=submit], select, textarea {
  font-size: 100%;
  font-family: var(--chivo);
  border: 1px solid var(--outline-color);
  width: 100%;
  background-color: var(--background-color);
  padding: 10px;
  border-radius: 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: var(--text-primary);
}

input[type=submit]:hover {
  background-color: var(--bg-color-inv);
  color: var(--text-primary-inv);
}

textarea {
  height: 20vh;
}

.footer {
  grid-area: 4/2/4/2;
  justify-self: center;
  align-self: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

@media (min-width: 1080px) /* Large Devices */ {
  html {
    font-size: 1rem;
  }
  .img-wrapper {
    width: calc(100%/3);
  }
}

@media (min-width: 2560px) /* Large Devices */ {
  html {
    font-size: 1.25rem;
  }

  .img-wrapper {
    width: calc(100%/5);
  }
}

darkmode.js

var isOn = false;
function darkMode () {
    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
    isOn = !isOn;
}
\$\endgroup\$
5
  • 1
    \$\begingroup\$ Is the code posted in the question working? If so remove the comment about the contact form which makes the question off-topic. \$\endgroup\$
    – pacmaninbw ♦
    Commented Feb 18, 2020 at 16:09
  • \$\begingroup\$ Just an FYI, if you are first starting out with a new website, then a content management system such as WordPress or Drupal is a better way to go. There will be a lot less code required to implement it. \$\endgroup\$
    – pacmaninbw ♦
    Commented Feb 18, 2020 at 16:10
  • \$\begingroup\$ @BCdotWEB done, I edited the title! \$\endgroup\$
    – timlwsk
    Commented Feb 18, 2020 at 17:14
  • \$\begingroup\$ @pacmaninbw Sorry, but I am not quite sure why the question becomes off-topic, when I state that a part of the website isn't coded yet. Furthermore, I love to code but thanks for the tip! \$\endgroup\$
    – timlwsk
    Commented Feb 18, 2020 at 17:14
  • 1
    \$\begingroup\$ To explain why a comment about the code not working would make the question off-topic please see our help center on how to ask a good question. codereview.stackexchange.com/help. Content management systems simply reduce the amount of code necessary, they don't remove the need for code unless the site doesn't do anything. I can code in HTML, CSS and JavaScript, but if I was starting a new website I would use a content management system to reduce the amount of work. \$\endgroup\$
    – pacmaninbw ♦
    Commented Feb 18, 2020 at 17:55

1 Answer 1

Reset to default
2
\$\begingroup\$

First of all: good job! I like the simple layout and only-one-breakpoint-design. But like always there are some little things I would change.

1 HTML5 Semantic Elements

Tell your browser what is a header, section, footer and so on.

<header>
  <div class="container">
    <div class="center-vertically justify-space-between">
      <div>Logo</div>
      <div>Stuff</div>
    </div>
  </div>
</header>
<section id="gallery" class="panel">
  <div class="container">
    <div class="grid grid-3-3-3">
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
      <div class="grid-item"><img src="" alt=""></div>
    </div>
  </div>
</section>
<section id="contact">
  <div class="container">
    <form action=""></form>
  </div>
</section>
<footer id="footer">
  <div class="container">
  </div>
</footer>

2 Grid

I think it isn't necessary to make your whole container a CSS grid. I think it makes it harder to build on top of it/less scalable. For example if, at some point, you would like to add a full width section you would need to work with negative margins. Of course this is possible, but I think it is kind of "hacky". I would suggest to use a container class in every section. That way there would be no problem to add a full width section without the container class in the future. These programmers... always trying to predict the future...

Also, if you like to expand your knowledge, you could have a look at Sass. It helps you to keep your CSS modular. Here is an example how I use Sass. I know you didn't ask for that, but I hope it is interesting for you nonetheless .

variables.sass

// TYPOGRAPHY
$primaryFont: 'Public Sans', 'Helvetica', Arial, sans-serif
$secondaryFont: 'Public Sans', 'Helvetica', Arial, sans-serif
$baseTextSize: 1.6rem
$textColor: #222

// MARGINS
$margin: 2rem
$margin-2: 4rem

// BREAKPOINTS
$mobileS: "max-width: 374px"
$mobileM: "min-width: 375px"
$tablet: "min-width: 768px"

layout.sass

.container
    margin: 0 auto

@media($mobileS)
    .container
        width: 100%

@media($tablet)
    .container
        width: 700px

helper-classes.sass

.justify-space-between
    display: flex
    justify-content: space-between

.center-vertically
    display: flex
    align-items: center
\$\endgroup\$
2
  • \$\begingroup\$ Hi Dennis! Thank you for your feedback, I really appreciate it! I actually tried to have a look at Sass but was quickly turned down by the lack of good-looking apps for windows. Do you got any recommendations (using atom atm)? \$\endgroup\$
    – timlwsk
    Commented Feb 27, 2020 at 20:28
  • \$\begingroup\$ I'm not on Windows, so I don't really know what is popular there. But maybe this might help you: atom.io/packages/sass-autocompile \$\endgroup\$
    – Moglash
    Commented Feb 27, 2020 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.