Add personal portfolio
This commit is contained in:
parent
c4d57b1c53
commit
403c915320
GPG key ID:
0B696A86A853E955
3 changed files with 299 additions and 2 deletions
102
1-responsive-web-design/5-personal-portfolio/index.html
Normal file
102
1-responsive-web-design/5-personal-portfolio/index.html
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Personal Portfolio - CherryKitten</title>
|
||||
<link href="styles.css" rel="stylesheet">
|
||||
<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav id="navbar">
|
||||
|
||||
<a href="#welcome-section">
|
||||
About
|
||||
</a>
|
||||
|
||||
<a href="#projects">
|
||||
Projects
|
||||
</a>
|
||||
|
||||
<a href="#contact">
|
||||
Contact
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<section id="welcome-section">
|
||||
<h1>Personal Portfolio - CherryKitten</h1>
|
||||
<p class="welcome-text">Hii, I'm Sammy! Welcome! Thank you for looking at my Portfolio :3</p>
|
||||
</section>
|
||||
|
||||
<section id="projects">
|
||||
|
||||
<h2>My Projects</h2>
|
||||
<div class="projects-flex">
|
||||
<a class="project-tile" href="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/1-survey-form/index.html" target="_blank">
|
||||
<img alt="Survey Form about Pokémon" class="project-img" src="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/5-personal-portfolio/img/survey-form.png">
|
||||
<p class="project-text">
|
||||
Survey Form
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a class="project-tile" href="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/2-tribute-page/index.html" target="_blank">
|
||||
<img alt="Tribute page for Great Baggi from Monster Hunter" class="project-img" src="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/5-personal-portfolio/img/tribute-page.png">
|
||||
<p class="project-text">
|
||||
Tribute Page
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a class="project-tile" href="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/3-technical-documentation-page/index.html" target="_blank">
|
||||
<img alt="Technical Documentation page about the Linux command line" class="project-img" src="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/5-personal-portfolio/img/technical-documentation.png">
|
||||
<p class="project-text">
|
||||
Technical Documentation
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a class="project-tile" href="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/4-product-landing-page/index.html" target="_blank">
|
||||
<img alt="Product Landing Page for Fluffy Bunny Dango" class="project-img" src="https://cherrykitten.github.io/freecodecamp-projects/1-responsive-web-design/5-personal-portfolio/img/product-page.png">
|
||||
<p class="project-text">
|
||||
Product Landing Page
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://github.com/CherryKitten" id="profile-link" target="_blank">More..</a>
|
||||
</section>
|
||||
|
||||
<section id="contact">
|
||||
<h2>Find me here:</h2>
|
||||
<p class="disclaimer">(not actually, I will be using some placeholder/fake links here)</p>
|
||||
<div class="social-links">
|
||||
|
||||
<a href="https://twitter.com/freecodecamp">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
<p>Twitter</p>
|
||||
</a>
|
||||
|
||||
<a href="https://twitch.tv/nonexistingbrokenprofileplaceholder198391">
|
||||
<i class="fa-brands fa-twitch"></i>
|
||||
<p>Twitch</p>
|
||||
</a>
|
||||
|
||||
<a href="mailto:contact@cherrykitten.dev">
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
<p>E-Mail</p>
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/CherryKitten">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
<p>GitHub</p>
|
||||
</a>
|
||||
|
||||
<a href="https://www.freecodecamp.org/CherryKitten">
|
||||
<i class="fa-brands fa-free-code-camp"></i>
|
||||
<p>FreeCodeCamp</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Made by <a href="https://github.com/CherryKitten">CherryKitten</a> for <a href="https://www.freecodecamp.org">FreeCodeCamp</a>'s Responsive Web Design Certification</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
194
1-responsive-web-design/5-personal-portfolio/styles.css
Normal file
194
1-responsive-web-design/5-personal-portfolio/styles.css
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
:root{
|
||||
--color1: lightpink;
|
||||
--color3: #020202;
|
||||
}
|
||||
|
||||
html{
|
||||
scroll-behavior: smooth;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
html{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
html{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
html{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar{
|
||||
background: var(--color1);
|
||||
height: 3.5rem;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#navbar a:hover{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
section{
|
||||
max-width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#welcome-section{
|
||||
background: linear-gradient(
|
||||
lightblue,
|
||||
lightskyblue
|
||||
);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1, h2, a, p, img{
|
||||
overflow: hidden;
|
||||
color: var(--color3);
|
||||
text-decoration: none;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2{
|
||||
font-size: 4rem;
|
||||
font-weight: 700;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.welcome-text{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#projects{
|
||||
background: linear-gradient(lightskyblue, lightseagreen);
|
||||
}
|
||||
|
||||
.projects-flex{
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-shrink: 5;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.projects-flex{
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
.project-tile{
|
||||
flex-shrink: 5;
|
||||
max-width: 33%;
|
||||
max-height: 20%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.project-tile:hover{
|
||||
background-color: lightgreen;
|
||||
border-radius: 5px 5px;
|
||||
}
|
||||
|
||||
.project-img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: 33vh;
|
||||
width: 33vw;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.project-text{
|
||||
color: var(--color3);
|
||||
font-family: sans-serif;
|
||||
display: block;
|
||||
bottom: 0;
|
||||
font-size: 2rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
#profile-link{
|
||||
font-size: 3rem;
|
||||
font-family: sans-serif;
|
||||
background-color: var(--color1);
|
||||
opacity: 75%;
|
||||
color: var(--color3);
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 1rem 0;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#profile-link:hover{
|
||||
opacity: 100%;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
#contact{
|
||||
background: linear-gradient(lightseagreen, lightgreen);
|
||||
}
|
||||
|
||||
.disclaimer{
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.social-links{
|
||||
font-family: sans-serif;
|
||||
font-size: 2rem;
|
||||
height: 50vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3rem;
|
||||
|
||||
}
|
||||
|
||||
.social-links p{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: var(--color1);
|
||||
height: 3rem;
|
||||
border-radius: 5px 5px 0 0;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
footer p{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
<h2>Responsive Web Design</h2>
|
||||
<a href=1-responsive-web-design/1-survey-form/index.html>Survey Form</a><br>
|
||||
<a href="1-responsive-web-design/2-tribute-page/index.html">Tribute Page</a><br>
|
||||
<a href="1-responsive-web-design/3-technical-documentation-page">Technical Documentation Page</a><br>
|
||||
<a href="1-responsive-web-design/4-product-landing-page">Technical Documentation Page</a><br>
|
||||
<a href="1-responsive-web-design/3-technical-documentation-page/index.html">Technical Documentation Page</a><br>
|
||||
<a href="1-responsive-web-design/4-product-landing-page/index.html">Product landing page</a><br>
|
||||
<a href="1-responsive-web-design/5-personal-portfolio/index.html">Personal Portfolio</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue