zzaassaa2.github.io/index.html at main · zzaassaa2/zzaassaa2.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
118
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>George Zorn Portfolio</title>
    <link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css">
    <style>
        .image_hover:hover{
            filter: brightness(50%);
        }
        .image_hover:hover + .show_on_hover{
            display: block;
        }

        .show_on_hover{
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <!-- Navbar -->
    <div class="row">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <a class="navbar-brand" href="index.html">Home</a>

            <div class="collapse navbar-collapse" id="navbarPrime">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="html/indicies/python_index.html">Python</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="html/indicies/cpp_index.html">C++</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="html/indicies/r_index.html">R</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

    <!-- Profile -->
    <div style="margin: 60px 10px 0 10px">
        <div class="row">
            <div class="col">
                <div class="row card border-primary mb-3">
                    <div class="card-header">Work Experience/Education</div>
                    <div class="card-body">
                        <p class="card-text">Graduate from University of Toronto with a Bachelor of Science in Cell and Molecular Biology</p>
                        <p class="card-text">Three years of work experience at Red Lobster</p>
                    </div>
                </div>
                <div class="row card border-primary mb-3">
                    <div class="card-header">Skills</div>
                    <div class="card-body">
                        <h5 class="card-title">Science</h5>
                        <p class="card-text">Knowledge of Biology, Chemistry, and Physics</p>
                        <h5 class="card-title">Programming</h5>
                        <p class="card-text">Knowledge of C++, Python, R, and Java</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="row card border-primary mb-3" style="margin-left: 5px">
                    <div class="card-header text-center">George Zorn</div>
                    <div class="card-body">
                        <p class="card-text">This page is the portfolio page of George S. Zorn. The goal of the portfolio is to demonstrate to the viewer my knowledge with various programming languages by demonstrating some public projects that I have created.</p>
                        <p class="card-text">Below, is all of the projects, with a clickable image, that will take the viewer to the projects home page.</p>
                        <p class="card-text">To view all current projects for a specific language, at the top of all pages is a navbar that will take the user to an index page, where all of the associated projects can be found.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Code demonstration area -->
    <div class="row">
        <div class="col-6">
            <!-- R -->
            <a href="html/uniprotProteinView.html">
                <img class="img-fluid image_hover" src="media/r_uniprotproteinview.png" alt="R package image" style="height:100%"/>
                <div class="show_on_hover">
                    uniprotProteinView (R Package with Python Port)
                </div>
            </a>
        </div>
        <div class="col-6">
            <!-- C++ -->
            <a href="html/mazeRunner.html">
                <img class="img-fluid image_hover" src="media/cpp_mazerunner.png" alt="Picture of George Zorn"/>
                <div class="show_on_hover">
                    MazeRunner
                </div>
            </a>
        </div>
        <div class="col-12">
            <!-- Python -->
            <a href="html/bioTestView.html">
                <img class="img-fluid image_hover" src="media/biotestview/python_bioview.png" alt="Picture of George Zorn"/>
                <div class="show_on_hover">
                    BioTestView
                </div>
            </a>
        </div>
    </div>
</div>

</body>
</html>