AC11002_Website/index.html at master · ca-logan/AC11002_Website · GitHub

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
123
124
125
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS, My own CSS, and Fontawesome icon links -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/master.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  <title>Calum Logan - Home</title>
</head>

<!--Set up a standard bootstrap navbar for the top, and fix it to the top of the screen whn scrolling-->
<body>
  <nav class="header navbar navbar-expand-lg navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="index.html">Calum Logan</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="navbarlinks navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="projects.html">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="mycv.html">My CV</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact me</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!--Setting up a small grid to include info about myself and a couple of images-->
  <div class="container">
    <div class="home-info-bg">
      <div class="row">
        <p class="introtitle">About me</p>
      </div>
      <div class="row">
        <div class="col-8">
          <p class="maintext mt-5">Hey! I'm Calum, a 20 year old computing student at the University of Dundee. This website was made for one of my first assignments at uni, and hopefully more
            gets added to it in the future!
            <p class="maintext">I grew up near Brighton and lived in the same place for 19 years before moving to Scotland for uni, and I went on my first journey abroad to New Zealand at the tender young age of 18 -
              despite all of this, I'm passionate about travel and I'd love to volunteer all over the world in the near future.</p>
            <p class="maintext">I've been interested in video games ever since my brother introduced me to games he was passionate about, which are some of my earliest memories. I've had an interest in going into astrophysics and have worked in an
              observatory that was converted into a science center (big up Herstmonceux) but I always knew the job I wanted, since I come into contact with it every day, was in the games industry.</p>
            <p class="maintext">In my previous education I've always achieved my best grades in maths and the sciences, but recently I've wanted to shift that to a more creative focus, which
              should be interesting in computing.</p>
            <p class="maintext">I'm also a keen cook and baker, so if you're in dire need of cake or bread, I'm your guy!</p>

        </div>
        <div class="col-4">
          <img class="home-image" src="images/fearless.jpg" alt="Picture of me in Manhattan">
          <img class="home-image" src="images/latitude.jpg" alt="Picture of me at Latitude festival">
        </div>
      </div>
    </div>

    <!--Then set up a new row with some cards, linking to other pages-->
    <div class="row">
      <div class="col-md">
        <div class="homecard card card-img-top mt-5">
          <img class="button-image" src="images/projectstock.jpg" alt="Picture for projects page">
          <!-- Adding buttons to cards - I've used the default bootstrap info button as changing the background hover colour would require
          modifying bootstrap's css file, and the colour fits okay already-->
          <a href="projects.html" class="btn btn-outline-info button-text">My Projects</a>
        </div>
      </div>
      <div class="col-md">
        <div class="homecard card mt-5">
          <img class="button-image" src="images/cvstock.jpg" alt="Picture for CV page">
          <a href="mycv.html" class="btn btn-outline-info button-text">My CV</a>
        </div>
      </div>
      <div class="col-md">
        <div class="homecard card mt-5">
          <img class="button-image" src="images/contactstock.jpg" alt="Picture for contact page">
          <a href="contact.html" class="btn btn-outline-info button-text">Contact me</a>
        </div>

      </div>
    </div>
  </div>

  <!--Set up a footer as a navbar so the user can click on icon links to social media-->
  <!--This footer uses absolute positioning in the CSS compared to the rest of the code, so it will always be on the bottom of the page but not fixed to the screen-->
  <nav class="footer navbar navbar-expand-lg navbar-dark">
    <div class="footext">Copyright © 2018 Calum Logan - No rights reserved, take anything you'd like.</div>
    <ul class="navbarlinks navbar-nav ml-auto">
      <!--Notice there's no hamburger option, so the links will just disappear when the device isn't L/XL-->
      <li class="nav-item">
        <!--Using fontawesome links to facebook, twitter, instagram and linkedin. I'm not brave enough to link my own so they just go to the normal site-->
        <a class="nav-link" href="https://www.facebook.com"><i class="fab fa-facebook-square fa-3x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.twitter.com"><i class="fab fa-twitter-square fa-3x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.instagram.com"><i class="fab fa-instagram fa-3x"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.linkedin.com"><i class="fab fa-linkedin fa-3x"></i></a>
      </li>
    </ul>
  </nav>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>


</html>