wjunjie01.github.io/index.html at main · wjunjie01/wjunjie01.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
112
113
114
115
116
117
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="UTF - 8" name = "viewport" content = "width = device-width, initial-scale = 1">
    <!-- <link rel = "stylesheet" href = "css/main.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
-->

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- <link rel = "shortcut icon" type ="image/png" href="icon/coding (1).png" > -->
    <link rel = "shortcut icon" type = "image/favicon" href="icon/favicon.ico">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body{
            padding-top: 70px;
        }

        @keyframes animation_type{
            from {width: 0;}
            to {width: 100%;}
        }
        @keyframes animation_blink{
            from, to{
                border-color: transparent;
            }
            50%{
                border-color: olivedrab;
            }
        }

        section{
            display: inline-block;
            justify-content: center;
            margin-left: 36%;
        }

        .animation_play{
    font-size: 3.5vw;
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .10em solid; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation:
        animation_type 2s steps(30, end),
        animation_blink 1s step-end infinite;
        }
        .animation_text{
    font-size: 1.5vw;
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .10em; /* Adjust as needed */
    animation:
        animation_type 3s steps(50,end)
        }
    </style>
    <title> Home</title>
</head>
<section>
<h1 class = "animation_play"> Hello World</h1>
</section>
<body>
<nav class = "navbar navbar-expand-md bg-dark navbar-dark fixed-top">

    <img src = "https://www.comp.nus.edu.sg/images/resources/content/undergraduates/2020_UG_Icons_ISC_2.png" alt="Logo" class = "mx-2" style="width:40px;">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <!-- Hamburger icon navbar-toggler when it reaches min width display none -->
    <span class="navbar-toggler-icon"></span>
  </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- the iD makes it collapse when it's being pressed -->
        <ul class = "navbar-nav nav-justified">
        <li class = "nav-items"> <a class = "nav-link active" aria-current = "true" href = "index.html"> Home </a>
        </li>
        <li class = "nav-items"> <a class = "nav-link" href="webpages/projects.html"> Projects </a>
        </li>
  <li class="nav-items dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Info Sec</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="webpages/course_requirements.html">Course requirements</a></li>
      <li><a class="dropdown-item" href="webpages/mods_planner.html">Mods Planner</a></li>
        <li> <a class = "dropdown-item" href="bid_mods.html"> How to bid for mods? </a> </li>
      <li><a class="dropdown-item" href="webpages/resources.html"> Resources </a></li>
    </ul>
  </li>
        <li class = "nav-items"> <a class = "nav-link" href="webpages/rvrc.html"> RVRC </a></li>
        <li class = "nav-items"> <a class = "nav-link" href="webpages/credits.html"> Credits </a>
        </li>
    </ul>
    </div>
    </nav>
    <div class = "container text-center">
    <p class = "animation_text"> This is an experimental site developed during the summer. </p>
    <p class = "animation_text"> It contains resources to guide freshmen. </p>
     </div>
    <div class = "container text-center">
        <img class="img-fluid" style = "width: 50%"
             src = "img/IT.png" alt = "Cute Information Technology Picture">
    </div>

    <p> Photo extracted from: <a href="https://nusit.nus.edu.sg/wp-content/uploads/2022/06/bITbIT_security-11-440x260.png"> NUS Information Technology </a></p>
    <footer> &copy; Wong Jun Jie 2023</footer>
</body>

</html>