barrett/barrettruth.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: terminal

Browse source
This commit is contained in:
Barrett Ruth 2024-06-07 22:11:54 -05:00
parent a8cbedbcdf
commit ac76a4eb16
2 changed files with 55 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

55
index.css
View file

@ -48,9 +48,36 @@ header,
footer { footer {
font-size: 1.5em; font-size: 1.5em;
display: flex; display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px; padding: 20px;
align-items: center;
}
header {
justify-content: space-between;
}
footer {
justify-content: flex-end;
}
.cursor {
display: inline-block;
width: 10px;
height: 1em;
background-color: white;
border: 1px solid black;
vertical-align: text-top;
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
background-color: transparent;
border-color: transparent;
}
}
.terminal-prompt {
font-family: "Courier New", monospace;
} }
.main { .main {
@ -59,9 +86,9 @@ footer {
align-items: center; align-items: center;
} }
header a, .header-links a,
footer a { .footer-links a {
margin-left: 20px; margin-left: 25px;
} }
ul { ul {
@ -75,26 +102,18 @@ a {
.topics { .topics {
font-size: 2.5em; font-size: 2.5em;
flex: 1;
justify-content: flex-begin;
align-items: center;
} }
.topic { .software a:hover {
margin-bottom: 25px;
transition: color 0.5s ease;
}
.topic.software:hover {
color: #0073e6; color: #0073e6;
} }
.topic.economics:hover { .economics a:hover {
color: #009975; color: #009975;
} }
.topic.trading:hover { .trading a:hover {
color: #d50032; color: #d50032;
} }
.topic.interview-problems:hover { .interview-problems a:hover {
color: #6a0dad; color: #6a0dad;
} }
@ -107,6 +126,8 @@ a {
display: inline-block; display: inline-block;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
margin-bottom: 25px;
transition: color 0.5s ease;
} }
.topic a::after { .topic a::after {

13
index.html
View file

@ -10,11 +10,16 @@
</head> </head>
<body> <body>
<header> <header>
<!-- <img src="public/logo.webp" alt="Barrett Ruth Logo" class="logo" /> --> <div class="terminal-prompt">
<span class="prompt">barrett@ruth:~$</span>
<span class="cursor"></span>
</div>
<div class="header-links">
<a target="_blank" href="public/resume.pdf">Resume</a> <a target="_blank" href="public/resume.pdf">Resume</a>
<a target="_blank" href="public/transcript.pdf">Transcript</a> <a target="_blank" href="public/transcript.pdf">Transcript</a>
<!-- <a target="_blank" href="about.html">About</a> --> <!-- <a href="about.html">About</a> -->
<a target="_blank" href="/wip.html">About</a> <a href="/wip.html">About</a>
</div>
</header> </header>
<main class="main"> <main class="main">
<ul class="topics"> <ul class="topics">
@ -37,11 +42,13 @@
</ul> </ul>
</main> </main>
<footer> <footer>
<div class="footer-links">
<a target="_blank" href="https://github.com/barrett-ruth/">GitHub</a> <a target="_blank" href="https://github.com/barrett-ruth/">GitHub</a>
<a target="_blank" href="https://www.linkedin.com/in/barrett-ruth/" <a target="_blank" href="https://www.linkedin.com/in/barrett-ruth/"
>LinkedIn</a >LinkedIn</a
> >
<a target="_blank" href="mailto:br.barrettruth@gmail.com">Email</a> <a target="_blank" href="mailto:br.barrettruth@gmail.com">Email</a>
</div>
</footer> </footer>
</body> </body>
</html> </html>