mafro28.github.io/index.html at master · mafro28/mafro28.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Matthew Francis - Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/455b2cf655.js" crossorigin="anonymous"></script>

<body>
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>
        <label class="logo">Portfolio</label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#">CV</a></li>
        </ul>
    </nav>

    <main>
        <h1>I'm Matthew</h1>
        <br>
        <br>
        <h2>I’m studying BSc(Hons) Web Design & Development at Edinburgh Napier University.</h2>
        <br>
        <br>
        <h3>I have a passion for minimalistic user interfaces and clean designs.</h3>
        <br>
        <br>
        <h3>You can see my <a class="link" href="https://github.com/mafro28?tab=repositories" target="_blank">Github</a>
            here,
            and find me on <a class="link" href="https://twitter.com/themafro" target="_blank">Twitter</a>, <a
                class="link" href="https://www.instagram.com/mafro/">Instagram</a> or <a class="link"
                href="https://www.linkedin.com/in/matthewfrancis/">LinkedIn</a>.</h3>
    </main>

    <br>
    <br>

    <section id="portfolio">
        <h3>Below are some examples of my projects:</h3>
        <br>
        <br>
        <div class="parent">
            <div class="child1">

                <a class="projecttitle" href="https://mafro28.github.io/jqueryapp/" target="_blank">jQuery Mobile Health
                    App</a>
                <br>
                <br>
                <p class="projectdescription">A jQuery mobile app created during my NC Web & Mobile Applications
                    Development course. It was a health app based around healthy eating and exercise. It demonstrates
                    features such as an image carousel, calorie counter using JavaScript, responsive image grid,
                    expandable text sections and embedded media</p>
            </div>

            <div class="child2">

                <a class="projecttitle" href="https://mafro28.github.io/hexcalculator/" target="_blank">Javascript
                    Hexadecimal
                    Calculator</a>
                <br>
                <br>
                <p class="projectdescription">A Javascript web application created during my HND Software Development
                    course that carries out the addition of two Hexadecimal numbers and
                    will
                    have a
                    menu that presents the user with two choices: prompt the user for two hexadecimal values and perform
                    the
                    necessary validation and
                    conversion in order to display the result of their addition, and a quit option will display a
                    goodbye
                    message and end the program </p>
            </div>

            <div class="child3">


                </a>
                <a class="projecttitle" href="https://mafro28.github.io/quiz/" target="_blank">Javascript Quiz</a>
                <br>
                <br>
                <p class="projectdescription">A quiz created for my Web Technologies module in 2nd year using HTML, CSS
                    and JavaScript. This was the first major project I've coded using manipulation of the HTML DOM to
                    display the questions and answers, and using the Web Storage API to save a user's name and high
                    score.</p>
            </div>

            <div class="child4">

                <a class="projecttitle" href="https://mafro28.github.io/quiz/" target="_blank">Android Mobile App</a>
                <br>
                <br>
                <p class="projectdescription">This app was coded in Java using Android Studio for my Mobile Applications Development module. It uses a modern, minimalistic design to give the user information on different types of coffee drinks. This project demonstrates the use of a splash screen with an animated logo, as well as the use of swipe gestures for navigation and the implementation of the Google Maps API. </p>
            </div>

        </div>
    </section>


    <footer>&copy; 2022 Matthew Francis </footer>
</body>

</html>