ys112.github.io/index.html at master · ys112/ys112.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Homepage</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="shortcut icon" href="./favicon.ico" />
</head>
<body>
    <!-- Header contains profile and a landscape picture and headings of introduction-->
    <header class="about_me bg_lightgrey">
        <!--main picture-->
        <img src="./images/main.jpg" id="home_gallery" alt="main picture">

        <div class="quote_container">
            <p class="quote text_align_center">"It is not the mountain we conquer but ourselves"</p>
            <p class="quote_author">-Edmund Hillary</p>
        </div>
        <h3 class="underline about_me_title" id="about_me_title">About me</h3>
        <h1 class="introduction">Hi, I am Yong Yu Sian</h1>
        <p class="description_of_me text_align_center word_wrap">
            An IT enthusiast currently studying Diploma in Information Technology in Singapore Polytechnic.Currently taking on the solution development path and has vested interests in Artficial Intelligent. Always hungry for knowledge and speak a variety of "languages".
        </p>
        <!--Profile picture-->
        <img src="./images/profile.jpg" id="profile" alt="profile picture">
    </header>
    <!-- Navigation menu containing a list of 4 links-->
    <nav>
        <ul>
            <li class="button"><a href="./index.html">Home</a></li>
            <li class="button"><a href="./index.html#about_me_title">About me</a></li>
            <li class="button"><a href="./MyExpertise.html">My Expertise</a></li>
            <li class="button"><a href="./Milestones.html">Milestones</a></li>
        </ul>
    </nav>

    <div class="linebreak">
    </div>

    <!--3 columns with short descriptions to lead the user to different pages-->
    <main class="column_container clearfix bg_darkgrey">
        <article class="column">
            <a href="./MyExpertise.html">
                <img class="column_image" src="./images/skills.jpg" alt="My expertise collage">
            </a>
            <h2 class="columnTitle">My Expertise</h2>
            <p class="columnParagraph text_align_center word_wrap">From hard skills to soft skills, learn more about my strengths!</p>
            <p class="columnParagraph text_align_center word_wrap"><p class="columnParagraph text_align_center word_wrap"> <a href="./MyExpertise.html"> See more 	&rarr;</a> </p>
        </article>

        <article class="column">
            <a href="./Milestones.html">
                <img class="column_image" src="./images/milestone.jpg" alt="Milestone collage">
            </a>
            <h2 class="columnTitle">My Milestones</h2>
            <p class="columnParagraph text_align_center word_wrap">Find out more about my life events and achievements!</p>
            <p class="columnParagraph text_align_center word_wrap"><p class="columnParagraph text_align_center word_wrap"> <a href="./Milestones.html"> See more 	&rarr;</a> </p>
        </article>

        <article class="column projects_column clear_right">
            <a href="./MyExpertise.html#before_my_project_title">
                <img class="column_image" src="./images/project.jpg" alt="Project collage">
            </a>
            <h2 class="columnTitle">Projects</h2>
            <p class="columnParagraph text_align_center word_wrap"> Check out what I did for my assigments and during my free time</p>
            <p class="columnParagraph text_align_center word_wrap"><p class="columnParagraph text_align_center word_wrap"> <a href="./MyExpertise.html#before_my_project_title"> See more 	&rarr;</a> </p>
        </article>
    </main>
    <!--footer with 5 social media links to my profiles-->

    <footer>
        <h2>Chat with me at the social medias below!</h2>
        <div>
            <a href="https://www.facebook.com/ys112" target="_blank">
                <img class="social_icon facebook" src="./images/facebook.png" alt="facebook">
            </a>
            <a href="https://plus.google.com/u/0/105505888121349614278" target="_blank">
                <img class="social_icon" src="./images/google-plus.png" alt="google plus">
            </a>
            <a href="https://www.instagram.com/yongyusian/" target="_blank">
                <img class="social_icon" src="./images/instagram.png" alt="instagram">
            </a>
            <a href="https://www.linkedin.com/in/yu-sian-441b0a69/" target="_blank">
                <img class="social_icon" src="./images/linkedin.png" alt="linkedin">
            </a>
            <a href="https://twitter.com/yusian112" target="_blank">
                <img class="social_icon" src="./images/twitter.png" alt="twitter">
            </a>
        </div>
    </footer>
</body>
</html>
<!--References-->
<!--Freepik.com.Social Media Logos [images]. Available from: https://www.flaticon.com/packs/social-media-logos-2 [Accessed 26 November 2017].-->