bryan/itme-brain.github.io
1
0
Fork 0
mirror of https://github.com/itme-brain/itme-brain.github.io.git synced 2026-03-23 20:19:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #3 from codecologist/master

Browse source 
Simple Website Refactor
This commit is contained in:
Bryan 2022-10-28 01:41:12 -04:00 • committed by GitHub
commit 8ca1a2aaaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 68 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1 +1,3 @@
# codecologist.dev # codecologist.dev
Personal Website, contributions & feedback are welcome.

BIN
assets/btctipjar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

40
css/styles.css Normal file
View file

@ -0,0 +1,40 @@
html {
display: inline-block;
margin: auto;
}
body {
padding: 10px 10px;
margin: 20px auto;
font-size: 1.0rem;
max-width: 800px;
font-family: sans-serif;
}
h1 {
margin: 0;
border: 0;
padding: 0;
}
h2 {
font-size: 95%;
}
li {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 25px;
border: 0;
margin: 0;
}
a, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
.tipjar {
width: 15em;
height: 15em;
}

67
index.html
View file

@ -1,60 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Bryan Ramos :: Developer</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="bryan, ramos, developer, freelance, fullstack">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/f26d369dc4.js" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/f26d369dc4.js" crossorigin="anonymous">
</script> </script>
<title>Bryan Ramos - Technologist</title>
</head> </head>
<body> <body>
<h1>Bryan Ramos</h1>
<ul>
<li><a href="mailto:bryan@codecologist.dev" class="fa-solid fa-envelope"></a></li>
<li><a href="https://twitter.com/Codecologist" class="fa-brands fa-twitter"></a></li>
<li><a href="https://github.com/codecologist" class="fa-brands fa-github"></a></li>
<li><a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg" class="fa-brands fa-youtube"></a></li>
<li><a href="pgpkey.html" class="fa-sharp fa-solid fa-key"></a></li>
</ul>
<h2>I invest my time and energy towards returning
self-sovereignty in the digital age.</br></br>
<section class="navbar"> I believe that peer-to-peer protocols and cryptography are
<div class="socialicons"> the key to achieve this through the establishment of digital data privacy tools,
<a href="mailto: bryan@codecologist.dev"><i class="fa-solid fa-square-envelope"></i></a> increased user transparency and the disintermediation of the web.</br></br>
<a href="https://github.com/codecologist"><i class="fa-brands fa-github"></i></a>
<a href="https://twitter.com/Codecologist"><i class="fa-brands fa-square-twitter"></i></a>
<a href="https://www.youtube.com/channel/UCqr3HoBvla1s9hK5CCKI_Kg"><i class="fa-brands fa-youtube"></i></a>
<a href="pgpkey.html"><i class="fa-solid fa-key"></i></a>
</section>
<section class="heading"> Visit my GitHub to view my work. Contact me with inquiries using the links above.
<h1>Bryan Ramos</h1>
</section> <!-- <h1>Projects</h1>
-->
<h1>Tips for Coffee!</h1>
BTC: bc1qa8tqxcahjxe63yvn50v5jzxqxez2mfntynv2dc</br></br>
<img class="tipjar" src="assets/btctipjar.png">
<section class="technologies">
<div class="technologiesIconsGrid">
<i class="fa-brands fa-html5 fa-3x"></i>
<i class="fa-brands fa-css3 fa-3x"></i>
<i class="fa-brands fa-js fa-3x"></i>
<i class="fa-brands fa-git-alt fa-3x"></i>
<!-- <i class="fa-brands fa-digital-ocean fa-3x"></i>
<i class="fa-brands fa-aws fa-3x"></i> -->
<i class="fa-brands fa-vuejs fa-3x"></i>
<i class="fa-brands fa-bitcoin fa-3x"></i>
<i class="fa-solid fa-bolt fa-3x"></i>
<i class="fa-brands fa-ethereum fa-3x"></i>
<i class="fa-brands fa-rust fa-3x"></i>
<i class="fa-brands fa-react fa-3x"></i>
<i class="fa-brands fa-docker fa-3x"></i>
<i class="fa-brands fa-android fa-3x"></i>
<i class="fa-brands fa-wordpress fa-3x"></i>
<i class="fa-brands fa-linux fa-3x"></i>
<i class="fa-brands fa-node-js fa-3x"></i>
<i class="fa-brands fa-angular fa-3x"></i>
<i class="fa-solid fa-cloud-arrow-up fa-3x"></i>
<i class="fa-brands fa-python fa-3x"></i>
</div>
</section>
</body> </body>
</html> </html>

2
pgpkey.html
View file

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Bryan Ramos PGP Key</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bryan Ramos - PGP Key</title>
</head> </head>
<body> <body>

333
styles.css
View file

@ -1,333 +0,0 @@
:root {
--primaryBackgroundColor: #22303c;
--secondaryBackgroundColor: #192734;
--tertiaryBackgroundColor: #111c26;
--consoleBackgroundColor: #292929;
--lightconsoleBackgroundColor: #404040;
--primaryTextColor: #ffffff;
--secondaryTextColor: #FFD866;
--tertiaryTextColor: #A9DC76;
--codeColor: #d3d3d3;
--elementColor: #bc0457;
--variableColor: #d152f7;
}
/* Document Styling */
* {
margin: 0;
padding: 0;
border: 0;
text-align: center;
box-sizing: border-box;
}
a, a:visited, a:active {
color: inherit;
}
h1 {
text-align: center;
font-size: 60px;
font-family: 'Righteous', cursive;
margin: 30px 0 0 0;
color: var(--primaryTextColor);
}
h2 {
display: inline-block;
text-align: center;
font-size: 20px;
font-family: 'Righteous', cursive;
margin-bottom: 10px;
color: var(--secondaryTextColor);
}
h3 {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
font-size: 40px;
color: var(--primaryTextColor);
margin-bottom: 10px;
text-align: center;
display: inline-block;
}
/* Code-Like Syntax Highlighting Styling */
.code {
color: var(--codeColor);
white-space: nowrap;
}
.element {
color: var(--elementColor);
white-space: nowrap;
}
.class {
color: var(--secondaryTextColor);
font-style: italic;
white-space: nowrap;
}
.className {
color: var(--tertiaryTextColor);
white-space: nowrap;
}
.plaintext {
color: var(--primaryTextColor);
white-space: nowrap;
}
.variableName {
color: var(--variableColor);
}
/* Navigation Bar Styling */
.navbar {
background-color: var(--consoleBackgroundColor);
width: 100%;
border: 0;
padding: 0;
margin: 0;
position: fixed;
top: 0;
z-index: 1;
}
.socialicons {
justify-content: center;
font-size: 25px;
display: grid;
align-items: center;
grid-auto-flow: column;
border: 0;
padding: 0;
margin: 0;
}
/* Navigation Bar Icon Styling */
.fa-square-envelope {
display: inline-block;
color: #00bb00;
border: 0;
padding: 0;
margin: 0px 10px 0 10px;
font-size: 25px;
}
.fa-square-envelope:hover {
color: lightgreen;
}
.fa-github {
display: inline-block;
color: #d3d3d3;
border: 0;
padding: 0;
margin: 0 10px 0 10px;
}
.fa-github:hover {
color: #ffffff;
}
.fa-square-twitter {
display: inline-block;
color: #1da1f2;
border: 0;
padding: 0;
margin: 0 10px 0 10px;
}
.fa-square-twitter:hover {
color: lightblue;
}
.fa-youtube {
display: inline-block;
color: #e62117;
border: 0;
padding: 0;
margin: 0 10px 0 10px;
}
.fa-youtube:hover {
color: lightcoral;
}
.fa-key {
display: inline-block;
color: #e5f503;
border: 0;
padding: 0;
margin: 0 10px 0 10px;
}
.fa-key:hover {
color: lightyellow;
}
/* Heading Styling */
.heading {
border-bottom: 2px solid black;
width: 100%;
background-color: var(--primaryBackgroundColor);
border: 0;
padding: 0;
margin: 0;
}
/* Portfolio Section Styling */
.portfolio {
background-color: var(--secondaryBackgroundColor);
border: 0;
padding: 20px 0 20px 0;
margin: 0;
}
.projectsGalleryGrid {
justify-content: center;
color: var(--primaryTextColor);
font-family: 'Ubuntu', sans-serif;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 40vw);
opacity: 0;
animation:
fadeIn 5s 3s forwards;
}
.project {
width: 300px;
height: 300px;
border-radius: 50%;
}
/* Technologies Section Styling */
.technologies {
background-color: var(--tertiaryBackgroundColor);
border: 0;
padding: 20px 0 20px 0;
margin: 0;
}
.technologiesIconsGrid {
display: flex;
justify-content: center;
align-items: center;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 10vw);
}
/* Brand Colors */
.fa-html5 {
color: #f06529;
}
.fa-css3 {
color: #2965f1;
}
.fa-aws {
color: #FF9900;
}
.fa-git-alt {
color: #f1502f;
}
.fa-js {
color: #F0DB4F;
}
.fa-android {
color: #a4c639;
}
.fa-digital-ocean {
color: #123cff;
}
.fa-vuejs {
color: #42b883;
}
.fa-bitcoin {
color: #f2a900;
}
.fa-ethereum {
color: #3c3c3d;
}
.fa-rust {
color: #b7410e;
}
.fa-linux {
color: #d3d3d3;
}
.fa-react {
color: #61DBFB;
}
.fa-docker {
color: #0db7ed;
}
.fa-wordpress {
color: #21759b;
}
.fa-node-js {
color: #6cc24a;
}
.fa-angular {
color: #dd1b16;
}
.fa-bolt {
color: #8a2be2;
}
.fa-apple {
color: #ffffff;
}
.fa-cloud-arrow-up {
color: #add8e6;
}
.fa-python {
color: #FFE873;
}
/* Contact Section Styling */
.contact {
background-color: var(--lightconsoleBackgroundColor);
display: flex;
align-items: center;
width: 100vw;
}
.contactForm {
background-color: inherit;
width: 60vw;
height: 400px;
border-radius: 5%;
}