portfolio-website/index.html at main · KitchiHerbst/portfolio-website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Poppins:wght@200;500&display=swap" rel="stylesheet">    <link rel='stylesheet' href='./styles/index.css'>
    <!-- stylesheets -->
    <link rel='stylesheet' href="./styles/hero.css">
    <link rel='stylesheet' href="./styles/about.css">
    <link rel='stylesheet' href="./styles/projects.css">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Triston Herbst</title>
</head>
<body>

    <!-- -------------------------------------------------------- -->
    <!-- ------------------------Main---------------------------- -->
    <!-- -------------------------------------------------------- -->


    <section class='main'>
        <!-- <nav>
            <ul>
                <li>About</li>
                <li>Projects</li>
                <li>Blogs</li>
                <li>Contact</li>
            </ul>
        </nav> -->
        <div class='main-div'>
            <div class='title'>
                <h1>Triston Herbst</h1>
                <p>Full Stack Software Developer</p>
            </div>


            <img src='./resources/AISES.jpg' alt='Picture of Triston Herbst at AISES conference' id='main-img'/>

        </div>
    </section>

    <!-- -------------------------------------------------------- -->
    <!-- -----------------------About---------------------------- -->
    <!-- -------------------------------------------------------- -->

    <section class='about'>
        <div class='break'>
            <h2>About</h2>
            <hr>
        </div>
        <p>Hello, my name is Triston Herbst. I am a recent Flatiron Software Development and Kansas State University graduate. I was born in raised in Wichita, Kansas but recently moved to Austin, Texas to be closer to family.
            Many of my passions and interests include: Tennis, Weightlifting, Running, Health, Self-improvement, Fatherhood, Software Development, Video Games, Boating, and more.
        </p>
        <p>
            The langauges/frameworks/libraries that I use are
            React, Node, JavaScript, Express, Ruby, Ruby on Rails, Postgresql, MongoDB, HTML, CSS, BootStrap, external APIs and I am always learning more.
        </p>

    </section>

    <!-- -------------------------------------------------------- -->
    <!-- ----------------------Projects--------------------------- -->
    <!-- -------------------------------------------------------- -->


    <section >
        <div class='break'>
            <h2>Projects</h2>
            <hr>
        </div>
        <div class='section-projects'>
        <div class='project'>
            <div class='project-inner'>
                <div class='memory front'>
                    <img src='./resources/Memory picture.png' alt="my project MEMORY showing a users timeline">
                <p>MEMORY</p>
                </div>
                <div class='memory back'>
                    <p><a href="https://youtu.be/JoXp_QeTsDw">MEMORY</a> is a social media app where
                         users can only post onto other users timelines.
                         MEMORY uses a React Front-end, Ruby on Rails back-end with a PostgreSQL database.
                         </p>
                         <p>
                         Additional tools I used are: Google locations api, Bootstrap, Facebook and Google login/signup, OOP to handle relationships between models, and JWTAuth
                        </p>
                </div>
            </div>


        </div>
        <div class='project'>
            <div class="project-inner">
                <div class='trekked front'>
                    <img src="./resources/trekked-picture.png" alt='my project trekked on the route building page' >
                    <p>trekked</p>
                </div>
                <div class='trekked back'>
                    <p><a href="https://youtu.be/fdYH8beZb2o">trekked</a> is a trip tracker website for those who like to visit National Parks. trekked uses a React Front-end, Ruby on Rails back-end with a PostgreSQL database.
                        </p>
                        <p>
                        Additional tools my partner and I used are: Google maps/locations/Autofill apis, Bootstrap, National Parks api, OOP to handle relationships between models, and JWTAuth
                       </p>
                </div>
            </div>


        </div>

        <div class="project">
            <div class="project-inner">
                <div class='fruit-stand front'>
                    <img src="./resources/fruit-stand.png" alt='my project fruit-stand'>
                    <p>Fruit Stand</p>
                </div>
                <div class='fruit-stand back'>
                    <p><a href="https://youtu.be/RgKWnr4mW18">Fruit Stand</a> is a game where you are a basket that has to move left to right to catch fruit and avoid bugs. Fruit Stand is a plain JavaScript front-end, RoR back-end with a SQLite database.
                    </p>

                </div>
            </div>


        </div>
    </div>
    </section>

    <!-- <section>
        <div class='break'>
            <h2>Blogs</h2>
            <hr>
        </div>
    </section> -->

    <!-- -------------------------------------------------------- -->
    <!-- ----------------------Contact--------------------------- -->
    <!-- -------------------------------------------------------- -->


    <footer>
        <div class='break'>
            <h2>Let's Connect!</h2>
            <hr>
        </div>
        <div class='icons'>
            <a href='https://www.linkedin.com/in/triston-herbst/'><img src="./resources/icons/linkedin-logo.png" alt="linkedin logo"></a>
            <a href="mailto:tristonherbst97@gmail.com"><img src="./resources/icons/mail-logo.png" alt="email logo"></a>
            <a href="https://github.com/KitchiHerbst"><img src="./resources/icons/Github.png" alt="email logo"></a>
            <a href="https://tristonherbst97.medium.com/"><img src="./resources/icons/medium-logo.png" alt="medium logo"></a>
        </div>
    </footer>
    <script type='module' src='./js/index.js'></script>
</body>
</html>