alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revamped website + built API ;O

Browse Source
This commit is contained in:
Alex / Awex
2021-08-10 09:36:58 -04:00
parent b8ead176f9
commit 65fec1140b
40 changed files with 1100 additions and 11555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap.css
Vendored
-8975
View File
File diff suppressed because it is too large Load Diff
assets/css/nav.css
+6
View File
@@ -0,0 +1,6 @@
.social-part .fa{
padding-right:20px;
}
ul li a{
margin-right: 20px;
}
assets/css/screenshot.css
-28
View File
@@ -1,28 +0,0 @@
.container {
position: absolute;
padding-top:40px;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* width: 600px; */
height: 100px;
border-radius: 3px;
}
.jumbotron {
background-color:#4a4a4a;
}
.jumbotron img {
max-width:75%;
}
.jumbotron h3 {
color:white;
}
body {
background-color:#b3b3b3;
text-align:center;
}
assets/css/style-new.css
-336
View File
@@ -1,336 +0,0 @@
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Quicksand", sans-serif;
font-size: 62.5%;
font-size: 10px;
background-color:#a3a3a3;
}
#panel {
margin: 50px auto;
width: 300px;
padding: 30px 25px;
background: white;
border-radius: 25px;
display:none;
}
#panel a {
color:black;
}
a{
color:#ababab;
}
a:hover {
color:white;
}
hr{
border-color:white;
width:50%;
}
/* Navbar section */
#rc_logo {
left: 30px;
padding: 22px;
padding-left:2px;
position: absolute;
color: #fff;
font-size: 19px;
text-decoration: none;
}
#rc_logo a {
color: inherit;
text-decoration: none;
}
.rc_nav {
overflow: hidden;
background-color: #363841;
text-align: center;
z-index: 6;
}
.rc_nav a {
display: inline-block;
margin-right: -4px; /* inline-block gap fix */
color: #fff;
padding: 22px 22px;
text-decoration: none;
font-size: 18px;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-ms-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;
z-index: 9;
}
.rc_nav a:hover {
color: gray;
}
.rc_nav .icon {
display: none;
}
.rc_content {
text-align: center;
padding-left:14px;
margin-top: 100px;
color: #8e909b;
}
@media screen and (max-width: 820px) {
.rc_nav a {display: none;}
.rc_nav a.icon {
float: right;
display: block;
width: 60px;
}
}
@media screen and (max-width: 820px) {
.rc_nav responsive {position: relative; top: 73px;}
.rc_nav .icon {
position: fixed;
right: 0;
top: 0;
border-radius: 20%;
}
.rc_nav.responsive a {
float: none;
display: block;
text-align: center;
}
#rc_logo {
position: fixed;
}
}
/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
@-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
@keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
@-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
@keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
@-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
@-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
@keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align:center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left:15%;
padding-right:15%;
font-size: 20px;
}
@media all and (max-width:700px){
.myP {
padding:2%;
}
}
assets/css/style.css
+89 -191
View File
@@ -1,205 +1,103 @@
/* Univ Attributes */
#logo{
float:center;
html, body {
font-family: 'Quicksand', sans-serif;
margin:0;
padding:0;
line-height:30px;
}
/*
Welcome/Home Styling
*/
#welcome {
height: 933px;
line-height: 10px;
text-align: center;
border: 2px solid black;
background-color:#474747;
color:#cfcfcf;
}
hr{
width:100px;
border-color:black;
#welcomespan {
display: inline-block;
vertical-align: middle;
line-height: normal;
padding-top:200px
}
.center {
display:block;
margin:0 auto;
margin-left: auto;
margin-right: auto;
width:20%;
padding-top:20px;
/* ----------------- */
/*
About
*/
#about {
text-align:center;
white-space:normal;
}
#center {
display:block;
margin:0 auto;
margin-left: auto;
margin-right: auto;
width:30%;
#aboutContainer {
white-space:normal;
padding-top:30px;
}
body{
/* ----------------- */
/*
Projects
*/
#projects {
text-align:center;
line-height:20px;
white-space:normal;
}
#projectsContainer {
white-space:normal;
}
/* ----------------- */
/*
Skills
*/
#experienced {
text-align:center;
}
h1{
text-align:center;
color:#6b6b6b;
}
h2{
text-align:center;
color:#6b6b6b;
}
h3{
text-align:center;
color:#6b6b6b;
}
i{
/* ----------------- */
/*
Universal Styling
*/
h3 {
font-size:40px;
}
h4 {
font-size:30px;
}
p {
font-size:20px;
}
body p{
text-align:center;
color:#6b6b6b;
font-size:20px;
}
a{
color:black;
hr {
border-color:gray;
width:50%;
}
a:hover{
#intermission {
text-align:center;
}
ion-icon {
font-size:64px;
color:gray;
}
/* Home Page Attribs */
#welcome{
background-color:#474747;
padding-top:20px;
padding-bottom:15px;
}
#welcome h2{
color:#c2c2c2;
}
#welcome p{
color:#c2c2c2;
}
/*Socials Color Changing*/
#medal a{
color:orange;
text-decoration:none;
font-size:28px;
padding-right:15px;
#form {
text-align:center;
}
#medal a:hover{
color:white;
}
#twitter a{
color:#467175;
text-decoration:none;
font-size:28px;
padding-right:15px;
padding-bottom:20px;
text-align:center;
}
#twitter a:hover{
color:white;
}
#discordbtn {
background-color: #7289da; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 20%;
}
/* Navigation Bar Styling */
#navbar{
color:#333;
}
#navbar ul{
padding:0px;
list-style:none;
text-align:center;
}
#navbar li{
display:inline;
text-align:center;
}
#navbar a{
color:#333;
text-decoration:none;
font-size:18px;
padding-right:15px;
text-align:center;
}
/* Footer Styling */
.footer-p{
color:white;
}
.footer-basic {
padding:40px 0;
background-color:#454545;
color:white;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-radius:50%;
border:1px solid white;
margin:0 8px;
color:inherit;
opacity:0.75;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:white;
margin-bottom:0;
}