pPris.github.io/index.html at main · pPris/pPris.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<head>
    <!-- default code from bootstrap guide -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- helps with mobile responsivity + -->

    <!-- bootstrap 3 links from https://www.w3schools.com/bootstrap/bootstrap_get_started.asp -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="scripts.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">


</head>

<body>
    <div id="welcome-section">
        <h1>hi, my name is <strong>pris</strong>
            <!-- <span class="animate-stuff">_</span> -->
        </h1>
        <h3>i like making visual things and productivity tools</h3>
        <h3 id="down-caret"><a href="#about-me-section">⮟</a></h3>
    </div>
    <div id="about-me-section" class="section">
        <h3 class="section-header">a little about me</h3>
        <div id="about-me" class="">
            <div id="profile-pic-holder">
                <!-- <img id="profile-pic" src="" alt="stock-profile-photo"> -->
            </div>
            <div id="about-me-text" class="body-sections">
                <p><strong>My programming story starts with excel trackers and game simulators.</strong> What started as
                    creating excel and VBA applications led me to decide that I want to build even more types of tech
                    applications, so I'm now working on programming. </p>
                <p><strong>I'm a Final Year Computer Science Undergraduate</strong> (graduating June 2023) and I love creating visual projects like websites. I also love to create tools for improving productivity, like timers that use the pomodoro
                    technique, and tools that help you track self-improvement. </p>
                <p>I have experience in frontend and backend, even a little in DevOps. Below are some of my skills and
                works-in-progress.</p>
            </div>
        </div>
    </div>
    <!-- <p class="divider">------</p> -->
    <div id="skills-section" class="section gradient-bg">
        <h3 class="section-header">technical skills</h3>
        <p class="about-me-text text-center">Here are some of the skills I have picked up on my own time, and on the fly during projects and internship.</p>
        <div id="projects" class="body-sections">
            <div class="skills-column short-column-li col-md-3 col-xs-12">
                <h4>Programming Languages</h3>
                <li>Java</li>
                <li>Javascript</li>
                <li>Python</li>
            </div>
            <div class="skills-column col-md-3 col-xs-12">
                <h4>Backend Skills</h4>
                <li>Flask Python</li>
                <li>NoSQL (MongoDB) </li>
                <li>SQL (PostgreSQL)</li>
                <li>NodeJs, Express (MERN Stack)</li>
            </div>
            <div class="skills-column col-md-3 col-xs-12">
                <h4>Frontend Skills</h4>
                <ul>
                    <li>Bootstrap</li>
                    <li>Javascript, HTML, CSS</li>
                    <li>ReactJs</li>
                </ul>
            </div>
            <div class="skills-column col-md-3 col-xs-12">
                <h4>Miscellaneous</h4>
                <ul>
                    <li>Basic Linux (Bash) Experience</li>
                    <li>AWS EC2, AWS Lambda</li>
                    <li>Git, Agile, CI/CD, APIs</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="project-section" class="section offwhite-bg">
        <h3 id="my-projects" class="section-header">my projects</h3>
        <div id="projects" class="body-sections">
            <div class=row>
                <div id="item1" class="project-item col-md-4 col-xs-8 col-xs-offset-2 col-md-offset-0">
                    <!-- xs will apply to any larger size, e.g. to sm. so offset has to be reset for md -->
                    <div class="thumbnail">
                        <a href="https://codepen.io/ppris/full/BajXBjQ" target="_blank">
                            <img src="thumbnail_3_4/quote-gen-thumbnail-1.png" alt="quote generator thumbnail">
                        </a>
                    </div>
                    <div class="caption">
                        <p class="proj-title">Quote Generator</p>
                        <p>Display a quote with a refreshing background image from unsplash.</p>
                    </div>
                    <div class="tech-used">
                        <img src="logos/html_logo.png">
                        <img src="logos/css3_logo.png">
                        <img src="logos/js-logo.png">
                    </div>
                </div>
                <div class="project-item col-md-4 col-xs-8 col-xs-offset-2 col-md-offset-0">
                    <div class="thumbnail">
                        <a href="https://github.com/pPris/cuckoo" target="_blank">
                            <img src="thumbnail_3_4/cuckoo-thumbnail-1.png" alt="thumbnail of a cuckoo clone project">
                        </a>
                    </div>
                    <div class="caption">
                        <p class="proj-title">Cuckoo.team website Clone</p>
                        <p>Recreating a website I personally like using react.</p>
                    </div>
                    <div class="tech-used">
                        <img src="logos/html_logo.png">
                        <img src="logos/css3_logo.png">
                        <img src="logos/js-logo.png">
                        <img src="logos/react.svg">
                    </div>
                </div>
                <div id="item3"  class="project-item col-md-4 col-xs-8 col-xs-offset-2 col-md-offset-0">
                    <div class="thumbnail">
                        <a href="https://github.com/pPris/ip/tree/master/docs" target="_blank">
                            <img src="thumbnail_3_4/ip-ui.png" alt="java task manager thumbnail">
                        </a>
                    </div>
                    <div class="caption">
                        <p class="proj-title">task manager application</p>
                        <p>A chat bot that manages your tasks.</p>
                    </div>
                    <div class="tech-used">
                        <img src="logos/java-longer-logo.png">
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="item4"  class="project-item col-md-4 col-md-offset-2 col-xs-8 col-xs-offset-2">
                    <div class="thumbnail">
                        <a href="https://ay2021s2-cs2103t-t11-4.github.io/tp/" target="_blank">
                            <img src="thumbnail_3_4/tp-ui.png" alt="java cakecollate thumbnail">
                        </a>
                    </div>
                    <div class="caption">
                        <p class="proj-title">cakecollate</p>
                        <p>An application to collate orders for a home business, made by a team of five.</p>
                    </div>
                    <div class="tech-used">
                        <img src="logos/java-longer-logo.png">
                    </div>
                </div>
                <div id="item5" class="project-item col-md-4 col-xs-8 col-xs-offset-2 col-md-offset-0">
                    <div class="thumbnail">
                        <a href="#my-projects">
                            <img src="thumbnail_3_4/portfolio-aspect-3-4.png" alt="portfolio website thumbnail">
                        </a>
                    </div>
                    <div class="caption">
                        <p class="proj-title">web portfolio</p>
                        <p>A place to consolidate my projects and my skills in a visual manner</p>
                    </div>
                    <div class="tech-used">
                        <img src="logos/html_logo.png">
                        <img src="logos/css3_logo.png">
                        <img src="logos/js-logo.png">
                        <img src="logos/bootstrap3_logo.png">
                    </div>
                </div>
            </div>
            <!-- need row class to add extra rows properly. may need container class for any potential bugs -->
        </div>
    </div>
    <div class="more-details complement">
        <h3 class="section-header">open-sourced contributions</h3>
        <p class="center subtitle mx-5">I have also contributed 4 Pull Requests (3 merged) to the open-sourced repo, TEAMMATES. <a href="https://github.com/pPris?tab=overview&from=2021-08-01&to=2021-08-30&org=TEAMMATES#js-contribution-activity" alt="link to github profile for teammates activity"><br>Here's a list of my merged and ongoing PRs</a> on my github profile.</p>
    </div>
    <div id="footer" class="section accent-background-translucent">
        <h3 class="section-header has-subtitle">contact me!</h3>
        <p class="subtitle">i would love to hear from you</p>
        <p><a href="https://github.com/pPris" target="_blank"><img src="logos/github.png" alt="github icon"></a>
        <p><a href="#welcome-section">scroll to top</a></p>
        <!-- <p>(Personal information not published for safety purposes. You might have my resume in which I would have listed some ways of contacting me :)</p> -->
    </div>
</body>