<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dr. Liz Ghini - About Me</title>

    <style>

        /* Color Palette and Variables */

        :root {

            --burnt-orange: #bf5700; /* UT Austin Burnt Orange */

            --off-white: #f5f5f0;

            --bg-dark: #0a0a0a;

            --terminal-bg: #141414;

        }


        /* Reset and Base Styles */

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }


        body {

            background-color: var(--bg-dark);

            color: var(--off-white);

            /* Modern, clean sans-serif stack */

            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

            line-height: 1.6;

            padding: 20px;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

        }


        /* Terminal Window Container */

        .terminal-window {

            width: 100%;

            max-width: 800px;

            background-color: var(--terminal-bg);

            border: 2px solid var(--burnt-orange);

            border-radius: 6px;

            box-shadow: 0 0 20px rgba(191, 87, 0, 0.15);

            overflow: hidden;

        }


        /* Terminal Top Bar */

        .terminal-header {

            background-color: var(--burnt-orange);

            padding: 10px 15px;

            display: flex;

            align-items: center;

            gap: 8px;

        }


        .terminal-button {

            width: 12px;

            height: 12px;

            background-color: var(--off-white);

            border-radius: 50%;

            opacity: 0.9;

        }


        .terminal-title {

            color: var(--off-white);

            font-size: 0.85rem;

            font-weight: 600;

            margin-left: 10px;

            letter-spacing: 1px;

            text-transform: uppercase;

        }


        /* Content Area */

        .terminal-body {

            padding: 40px;

        }


        h1 {

            color: var(--burnt-orange);

            font-size: clamp(2rem, 5vw, 3rem);

            font-weight: 800;

            letter-spacing: -0.5px;

            margin-bottom: 5px;

        }


        h2 {

            color: var(--off-white);

            font-size: clamp(1.1rem, 3vw, 1.4rem);

            font-weight: 400;

            opacity: 0.9;

            margin-bottom: 40px;

            border-bottom: 1px dashed var(--burnt-orange);

            padding-bottom: 20px;

        }


        .section {

            margin-bottom: 35px;

        }


        .section:last-child {

            margin-bottom: 0;

        }


        h3 {

            color: var(--burnt-orange);

            font-size: 1.2rem;

            text-transform: uppercase;

            letter-spacing: 2px;

            margin-bottom: 15px;

            display: flex;

            align-items: center;

        }


        /* Hacker Prompt Styling */

        h3::before {

            content: "> ";

            margin-right: 8px;

        }


        p {

            font-size: 1.05rem;

            color: var(--off-white);

            opacity: 0.85;

            text-align: justify;

            max-width: 100%;

        }


        /* Blinking Cursor Animation */

        .cursor {

            display: inline-block;

            width: 10px;

            height: 1.2rem;

            background-color: var(--burnt-orange);

            vertical-align: text-bottom;

            animation: blink 1s step-end infinite;

            margin-left: 6px;

        }


        ::selection {

            background-color: var(--burnt-orange);

            color: var(--off-white);

        }


        @keyframes blink {

            0%, 100% { opacity: 1; }

            50% { opacity: 0; }

        }


        /* Mobile Responsiveness */

        @media (max-width: 600px) {

            .terminal-body {

                padding: 25px 20px;

            }

            

            p {

                text-align: left; /* Better readability on small screens */

            }

        }

    </style>

</head>

<body>


<div class="terminal-window">

    <div class="terminal-header">

        <div class="terminal-button"></div>

        <div class="terminal-button"></div>

        <div class="terminal-button"></div>

        <div class="terminal-title">guest@ut-austin: ~</div>

    </div>

    

    <div class="terminal-body">

        <h1>Dr. Liz Ghini</h1>

        <h2>MIS Lecturer at UT Austin</h2>


        <div class="section">

            <h3>About_Me</h3>

            <p>I went to Stanford for my undergrad degree and worked at Apple Computer for 6 years before going back to school to get my MBA and PhD from the University of Chicago. While I was there, I started working for Manhattan GMAT, an education startup that later became Manhattan Prep and then sold itself to Kaplan. After I finished my PhD, I realized that I missed academia and found my way back to teaching at UT Austin.</p>

        </div>


        <div class="section">

            <h3>My_Hobbies</h3>

            <p>I enjoy cooking, powerlifting, and drinking too much coffee.<span class="cursor"></span></p>

        </div>

    </div>

</div>


</body>

</html>