Skip to content

Commit

Permalink
RENEWED. old fixer upper, but she's still got some spirit (new ui, ne…
Browse files Browse the repository at this point in the history
…w design, new me)
  • Loading branch information
julesiet committed Jul 4, 2024
1 parent 3a28bb2 commit fd253bc
Show file tree
Hide file tree
Showing 5 changed files with 234 additions and 54 deletions.
38 changes: 17 additions & 21 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,27 @@
<head>
<title>jules' page!</title> <!-- favicon title -->
<link rel="icon" type="image/x-icon" href="static/favicon.png"> <!-- favicon -->
<link href="style.css" rel="stylesheet"> <!-- css file linked -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- icon import :') (this is so confusing)-->
<link href="renew_style.css" rel="stylesheet"> <!-- css file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- icon import -->
</head>

<body>
<div class="card">
<div class="card-image">
<!-- <img src="static/avatar.png" alt="jules profile picture"> -->
</div>
<div class="card-content">
<h2 class="card-title">jules!</h2>
<div class="card-text">
<p>hey there, it's nice to meet you! :]</p>
<p>my name is jules, and i'm an avid computer science student learning how to become a half stack web developer in hopes that one day i'll be to make a job and live of it. in my free time, i enjoy listening to my indecisive music choices, wasting time on mechanical keyboards, and making videos for the people that i love!</p>
<p>thank you for visiting, i appreciate you being here. enjoy your stay, or come say hi! :D &lt;3</p>
</div>
<div class="card-buttons">
<a href="mailto:juleselvandrade@gmail.com" class="btn"><i class="fa fa-envelope icon-large"></i></a>
<a href="https://github.com/julesiet" class="btn"><i class="fa fa-github icon-large"></i></a>
<a href="https://www.instagram.com/juleselv.andrade/" class="btn"><i class="fa fa-instagram icon-large"></i></a>
<a href="https://monkeytype.com/profile/smeme" class="btn"><i class="fa fa-keyboard-o icon-large"></i></a>
</div>
</div>

<!-- this is the most basic concept ever... BUT IT WORKS. AND IT IS INSANE. I AM THE CODER. -->
<div class="photocard">
<div class="photo"></div>
</div>

<h1 id="frntheader"> jules! </h1>

<div id="frnttext">
<h2> yap yap yap yap yap yap </h2>
<h2> another yapping another yapping more yapping </h2>
<h2> wow! there's even more :D isn't that great :] </h2>
<h2> okay one more. </h2>
</div>


</body>

</html>
35 changes: 35 additions & 0 deletions oldindex.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
<title>jules' page!</title> <!-- favicon title -->
<link rel="icon" type="image/x-icon" href="static/favicon.png"> <!-- favicon -->
<link href="style.css" rel="stylesheet"> <!-- css file linked -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- icon import :') (this is so confusing)-->
</head>

<body>
<div class="card">
<div class="card-image">
<!-- <img src="static/avatar.png" alt="jules profile picture"> -->
</div>
<div class="card-content">
<h2 class="card-title">jules!</h2>
<div class="card-text">
<p>hey there, it's nice to meet you! :]</p>
<p>my name is jules, and i'm an avid computer science student learning how to become a half stack web developer in hopes that one day i'll be to make a job and live of it. in my free time, i enjoy listening to my indecisive music choices, wasting time on mechanical keyboards, and making videos for the people that i love!</p>
<p>thank you for visiting, i appreciate you being here. enjoy your stay, or come say hi! :D &lt;3</p>
</div>
<div class="card-buttons">
<a href="mailto:juleselvandrade@gmail.com" class="btn"><i class="fa fa-envelope icon-large"></i></a>
<a href="https://github.com/julesiet" class="btn"><i class="fa fa-github icon-large"></i></a>
<a href="https://www.instagram.com/juleselv.andrade/" class="btn"><i class="fa fa-instagram icon-large"></i></a>
<a href="https://monkeytype.com/profile/smeme" class="btn"><i class="fa fa-keyboard-o icon-large"></i></a>
</div>
</div>
</div>
</body>

</html>
108 changes: 108 additions & 0 deletions oldstyle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
* {
/* this affects every single element */
font-family: ProximaNova;
font-weight: bold;
color: #FAF9F6;
}

@font-face {
font-family: ProximaNova;
src: url(proxima-nova-2/ProximaNovaRegular.otf)
}

body {
background: #22232F;
}

.card {
display: flex;
margin: 20px;
border: 5px solid #b2aec1;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #b2aec1;
animation: gradient 15s ease infinite;
}

/*
.card-image {
display: flex;
min-width: 100px;
align-items: center;
justify-content: center;
}
.card-image img {
width: 100%;
border-radius: 1rem;
max-width: 300px;
}
*/

.card-content {
display: flex;
flex: 2;
flex-direction: column;
padding: 20px;
align-items: center;
justify-content: center;
}

.card-title {
font-size: 48px;
text-align: center;
margin: 0 !important;
color: #FDF9ED;
}

.card-text > p {
font-size: 24px;
text-align: center;
color: #272838;
margin-bottom: 20px;
}

.card-buttons {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5px;
}

.btn {
background-color: #333447;
border-color: #333447;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}

.btn:hover {
background-color: #565776;
border-color: #565776;
color: #fff;
text-decoration: none;
}

@media screen and (max-width: 900px) {
.card-title {
font-size: 24px;
}
.card-text {
font-size: 16px;
}
.card {
flex-direction: column;
}
}


/*
- k.o kings w/ eric
- group coding project w/ jude, dan, other apcs students that want to cause chaos
- album review page :DDD (THIS ONE IS REALLY COOL!!) I AGREE
*/
Binary file added static/polaroid.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 74 additions & 33 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,19 +1,89 @@
/* asterik affects EVERY single element on a page */
* {
/* this affects every single element */
font-family: ProximaNova;
font-weight: bold;
color: #FAF9F6;
}

/* this @ symbol doesn't make sense to me BUT the font-face is specifically meant to import the font that i downloaded :] */
@font-face {
font-family: ProximaNova;
src: url(proxima-nova-2/ProximaNovaRegular.otf)
}

/* affects the body */
body {
background: #22232F;
overflow-x: hidden; /* the viewport isn't messed up muwhahahahahahhahahahahaHAHAHA >:D */
}

.photocard {
background-color: #FAF9F6;
height: 350px;
width: 250px;
position: absolute; /* figure out why absolute vs. relative positioning (there's a reason i just forgot) */
top: 175px;
left: 375px;
}

/* I AM THE CODER. OH MY GOSH. */
.photo {
background-image: url('static/polaroid.jpg');
height: 275px;
width: 220px;
background-size: cover;
position: relative;
top: 15px;
bottom: 15px;
left: 15px;
right: 15px;
}

#frntheader {
font-size: 70px;
letter-spacing: 2px;
position: relative;
top: 125px;
left: 675px;
}

#frnttext {
background-color: #22232F; /* make this transparent PLEASE */
text-align: justify;
height: 400px;
width: 300px;
position: relative;
top: 100px;
left: 665px;
}
/* class for buttons, styling! */
.btn {
background-color: #333447;
border-color: #333447;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}

/* does a quirky little thing (changes the color... that's it) when you HOVER over the button (:hover) */
.btn:hover {
background-color: #565776;
border-color: #565776;
color: #fff;
text-decoration: none;
}

/* responsive css */
@media screen and (max-width: 900px) {

}

/* all the card stuff because i'm omitting it to test something out */

/*
.card {
display: flex;
margin: 20px;
Expand All @@ -24,7 +94,7 @@ body {
animation: gradient 15s ease infinite;
}
/*
.card-image {
display: flex;
min-width: 100px;
Expand All @@ -37,7 +107,7 @@ body {
border-radius: 1rem;
max-width: 300px;
}
*/
.card-content {
display: flex;
Expand Down Expand Up @@ -70,37 +140,8 @@ body {
gap: 5px;
}
.btn {
background-color: #333447;
border-color: #333447;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
text-decoration: none;
display: inline-block;
}

.btn:hover {
background-color: #565776;
border-color: #565776;
color: #fff;
text-decoration: none;
}
*/

@media screen and (max-width: 900px) {
.card-title {
font-size: 24px;
}
.card-text {
font-size: 16px;
}
.card {
flex-direction: column;
}
}


/*
- k.o kings w/ eric
- group coding project w/ jude, dan, other apcs students that want to cause chaos
Expand Down

0 comments on commit fd253bc

Please sign in to comment.