Add personal portfolio
This commit is contained in:
parent
c4d57b1c53
commit
403c915320
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>
|
<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/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/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/3-technical-documentation-page/index.html">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/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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Reference in a new issue