Repository: rammcodes/WowFolio
Branch: main
Commit: a18a1635363c
Files: 6
Total size: 40.3 KB
Directory structure:
gitextract_mogiryrx/
├── .vscode/
│ └── settings.json
├── LICENSE
├── README.md
├── index.html
├── script.js
└── style.css
================================================
FILE CONTENTS
================================================
================================================
FILE: .vscode/settings.json
================================================
{
"liveServer.settings.port": 5501
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Ram Maheshwari
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Wowfolio 🦄
## A Simple & Clean Portfolio Template For Developers 👨💻
<div align="center">
<img src="https://i.postimg.cc/wMhtzfw7/ezgif-com-gif-maker-1.gif" alt="Wowfolio Demo" width="100%" />
<br>
</div>
<br/>
---
<br/>
## Test the template with different colours using the colour picker 🎨
This is very helpful for you as you can test the template with different
colours and see which colour fits your needs so you can use that colour for your own website.
<br/>
<div align="center">
<img src="https://i.postimg.cc/B6dQ6SSZ/ezgif-com-gif-maker-2.gif" alt="Wowfolio Color Tester" width="100%" />
<br>
</div>
<br/>
**Important Note**: Once you found the perfect colour for your site then just note the RGB value of the colour and then go inside this file called `style.css` on line number **9**, and replace the value of the **--themeColor** variable with your RGB value as shown in the below code example so you can see the colour change in your website.
```css
:root {
--themeColor: 29, 161, 242; /* Theme Color in (R,G,B) format */
}
```
<br/>
---
<br/>
## Technologies used 🛠️
- **HTML** 💀
- **CSS** 🌈
- **JavaScript** 🧠
<br/>
---
<br/>
## Drop a Star ⭐
If you like this project then drop a **Github** star by pressing the **Star** button ⭐
<br>
---
<br>
## Author 👨💻
**Ram Maheshwari ⚡**
Support me by giving me a Follow/Subscribe on my Social Accounts 🔥
[](https://linkedin.com/in/rammcodes) [](https://twitter.com/rammcodes) [](https://instagram.com/rammcodes_) [](https://youtube.com/@rammcodes)
<br>
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" />
<title>WowFolio - A Simple & Clean Portfolio Template For Developers</title>
<meta name="description" content="Wowfolio - A Simple & Clean Portfolio Template For Developers" />
</head>
<body>
<header class="main-header">
<div class="main-header__logo-container">
<div class="main-header__logo-img-cont">
<img
src="https://d33wubrfki0l68.cloudfront.net/32c48e23e828c42a99a37db81e2a91d7c8eed4de/d134a/assets/png/ram-maheshwari.png"
alt="logo Image" class="main-header__logo-img" />
</div>
<h4 class="main-header__logo-text">John Anderson</h4>
</div>
<nav class="main-header__navigation">
<ul class="main-header__navigation-links">
<li class="main-header__navigation-link"><a href="./index.html"> Home </a></li>
<li class="main-header__navigation-link"><a href="./index.html#about"> About </a></li>
<li class="main-header__navigation-link">
<a href="./index.html#projects"> Projects </a>
</li>
<li class="main-header__navigation-link"><a href="./index.html#contact" href=""> Contact </a></li>
</ul>
</nav>
<div class="main-header__sm-scr-nav-btn">
<div class="main-header__sm-scr-nav-btn-line"></div>
<div class="main-header__sm-scr-nav-btn-line"></div>
</div>
<div class="main-header__sm-menu">
<div class="main-header__sm-menu-close">
</div>
<ul class="main-header__sm-menu-links">
<li>
<a class="main-header__sm-menu-link main-header__sm-menu-link--1" name="home-hero">Home</a>
</li>
<li>
<a class="main-header__sm-menu-link main-header__sm-menu-link--2" name="about">About</a>
</li>
<li>
<a class="main-header__sm-menu-link main-header__sm-menu-link--3" name="projects">Projects</a>
</li>
<li>
<a class="main-header__sm-menu-link main-header__sm-menu-link--4" name="contact">Contact</a>
</li>
</ul>
</div>
<!-- <button class="btn btn-theme btn-sm">Download CV</button> -->
</header>
<!--Remove or Comment out this theme selector code when you are done with choosing the right color for your theme so this color selector don't appear when you host the site online-->
<div class="themeClrSelector">
<input placeholder="Color Selector" type="color" value="#1DA1F2" class="themeClrSelector__input" />
<img alt="theme color tester" src="https://img.icons8.com/fluent/48/000000/rgb-circle-1.png"
class="themeClrSelector__img" />
</div>
<!---->
<section id="home-hero" class="home-hero">
<div class="home-hero__content">
<div class="home-hero__info">
<h1 class="heading-primary home-hero__heading-primary">
<span class="heading-primary__sm"> Hello 👋</span>
<span class="heading-primary__main">
I'm John Anderson! A Web Developer Building Awesome Webapps And Websites That Powers The Internet
</span>
</h1>
<button class="btn btn-theme home-hero__btn-theme">Projects</button>
<button class="btn btn-inv home-hero__btn-theme">Contact</button>
</div>
</div>
</section>
<section id="about" class="about main-section">
<div class="main-container">
<h2 class="heading-secondary projects__heading-secondary">
<span class="heading-secondary__sm"> About 🦄</span>
<span class="heading-secondary__main">
Here you will find more information about me, what I do, and list of my current skills in programming
</h2>
<div class="main-section__content">
<div class="about__info">
<div class="about__main-info">
<h3 class="heading-quaternary about__heading-quaternary">
My Story
</h3>
<p class="text-primary about__text-primary">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia labore
magni saepe veritatis voluptatum alias fugit. Explicabo
ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor
sit amet
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia labore
magni saepe veritatis voluptatum alias fugit. Explicabo
ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor
sit amet
</span>
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia labore
magni saepe veritatis voluptatum alias fugit. Explicabo
ducimus sequi aut corporis odio repellendus? Lorem ipsum dolor
sit amet
</span>
</p>
<button class="btn btn-theme about__btn-theme">Projects</button>
</div>
<div class="about__skill-info">
<h3 class="heading-quaternary about__heading-quaternary">
My Skills
</h3>
<ul class="about__skills">
<li class="about__skill">html</li>
<li class="about__skill">css</li>
<li class="about__skill">javascript</li>
<li class="about__skill">react</li>
<li class="about__skill">node</li>
<li class="about__skill">git</li>
<li class="about__skill">vscode</li>
<li class="about__skill">linux</li>
<li class="about__skill">react</li>
<li class="about__skill">node</li>
<li class="about__skill">git</li>
<li class="about__skill">vscode</li>
<li class="about__skill">linux</li>
<li class="about__skill">javascript</li>
<li class="about__skill">react</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="skills-showcase">
<ul class="skills-showcase__list">
<li class="skills-showcase__list-item">
<i class="devicon-html5-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-css3-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-javascript-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-react-original"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-sass-original"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-nodejs-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-git-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-android-plain"></i>
</li>
<li class="skills-showcase__list-item">
<i class="devicon-python-plain"></i>
</li>
</ul>
</section>
<section id="projects" class="projects main-section">
<div class="main-container">
<h2 class="heading-secondary projects__heading-secondary">
<span class="heading-secondary__sm"> Projects 🛠️</span>
<span class="heading-secondary__main">
Here you will find some of the personal and clients projects that I created with the project details
</span>
</h2>
<div class="main-section__content">
<div class="projects__list">
<div class="projects__list-item">
<div class="projects__list-item-count">
<span class="projects__list-item-count-num"> 1 </span>
<span class="projects__list-item-count-line"> </span>
<span class="projects__list-item-count-end-dot"> </span>
</div>
<div class="projects__list-item-details">
<div class="projects__list-item-img-cont">
<img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
</div>
<h3 class="heading-tertiary projects__list-item-heading-tertiary">
Project Name
</h3>
<!-- <hr class="projects__title-text-divider" /> -->
<p class="text-primary projects__list-item-text-primary">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia
labore magni saepe veritatis voluptatum alias fugit.
Explicabo ducimus
</span>
<!-- <br />
<br /> -->
<span>
sapiente aut corporis odio repellendus? Lorem ipsum dolor
sit amet, consectetur adipisicing elit
</span>
</p>
<button class="btn btn-theme projects__btn-theme">
Live Link
</button>
<button class="btn btn-inv projects__btn-inv">Code Link</button>
</div>
</div>
<div class="projects__list-item projects__list-item--inv">
<div class="projects__list-item-details">
<div class="projects__list-item-img-cont">
<img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
</div>
<h3 class="heading-tertiary projects__list-item-heading-tertiary">
Project Name
</h3>
<!-- <hr class="projects__title-text-divider" /> -->
<p class="text-primary projects__list-item-text-primary">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia
labore magni saepe veritatis voluptatum alias fugit.
Explicabo ducimus
</span>
<!-- <br />
<br /> -->
<span>
sapiente aut corporis odio repellendus? Lorem ipsum dolor
sit amet, consectetur adipisicing elit
</span>
</p>
<button class="btn btn-theme projects__btn-theme">
Live Link
</button>
<button class="btn btn-inv projects__btn-inv">Code Link</button>
</div>
<div class="projects__list-item-count">
<span class="projects__list-item-count-num"> 2 </span>
<span class="projects__list-item-count-line"> </span>
<span class="projects__list-item-count-end-dot"> </span>
</div>
</div>
<div class="projects__list-item">
<div class="projects__list-item-count">
<span class="projects__list-item-count-num"> 3 </span>
<span class="projects__list-item-count-line"> </span>
<span class="projects__list-item-count-end-dot"> </span>
</div>
<div class="projects__list-item-details">
<div class="projects__list-item-img-cont">
<img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
</div>
<h3 class="heading-tertiary projects__list-item-heading-tertiary">
Project Name
</h3>
<!-- <hr class="projects__title-text-divider" /> -->
<p class="text-primary projects__list-item-text-primary">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia
labore magni saepe veritatis voluptatum alias fugit.
Explicabo ducimus
</span>
<!-- <br />
<br /> -->
<span>
sapiente aut corporis odio repellendus? Lorem ipsum dolor
sit amet, consectetur adipisicing elit
</span>
</p>
<button class="btn btn-theme projects__btn-theme">
Live Link
</button>
<button class="btn btn-inv projects__btn-inv">Code Link</button>
</div>
</div>
<div class="projects__list-item projects__list-item--inv">
<div class="projects__list-item-details">
<div class="projects__list-item-img-cont">
<img src="./assets/mock.png" alt="Project Image" class="projects__list-item-img" />
</div>
<h3 class="heading-tertiary projects__list-item-heading-tertiary">
Project Name
</h3>
<!-- <hr class="projects__title-text-divider" /> -->
<p class="text-primary projects__list-item-text-primary">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error, aliquid! Itaque corrupti magnam fugiat mollitia
labore magni saepe veritatis voluptatum alias fugit.
Explicabo ducimus
</span>
<!-- <br />
<br /> -->
<span>
sapiente aut corporis odio repellendus? Lorem ipsum dolor
sit amet, consectetur adipisicing elit
</span>
</p>
<button class="btn btn-theme projects__btn-theme">
Live Link
</button>
<button class="btn btn-inv projects__btn-inv">Code Link</button>
</div>
<div class="projects__list-item-count">
<span class="projects__list-item-count-num"> 4 </span>
<span class="projects__list-item-count-line"> </span>
<span class="projects__list-item-count-end-dot"> </span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact main-section">
<div class="main-container">
<h2 class="heading-secondary">
<span class="heading-secondary__sm"> Contact 📞</span>
<span class="heading-secondary__main">
Feel free to Contact me by submitting the form below and I will get back to you as soon as possible
</span>
</h2>
<div class="main-section__content">
<div class="contact__form-cont">
<form class="contact__form">
<div class="contact__form-field">
<label for="name" class="contact__form-field-label">Name</label>
<input placeholder="Enter Your Name" type="text" class="contact__form-field-input" />
</div>
<div class="contact__form-field">
<label for="name" class="contact__form-field-label">Email</label>
<input placeholder="Enter Your Email" type="text" class="contact__form-field-input" />
</div>
<div class="contact__form-field">
<label for="name" class="contact__form-field-label">Message</label>
<textarea placeholder="Enter Your Message" name="message" id="" cols="30" rows="10"
class="contact__form-field-input"></textarea>
</div>
<button type="submit" class="contact__form-submit">Submit</button>
</form>
<div class="contact__form-visual"></div>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="main-footer__upper">
<div class="main-container">
<ul class="main-footer__links">
<li class="main-footer__link">
<a href="./index.html">Home</a>
</li>
<li class="main-footer__link">
<a href="./index.html#about">About</a>
</li>
<li class="main-footer__link">
<a href="./index.html#projects">Projects</a>
</li>
<li class="main-footer__link">
<a href="./index.html#contact">Contact</a>
</li>
</ul>
<div class="main-footer__mid-line"></div>
<div class="main-footer__socials">
<a href="#" class="main-footer__social-link">
<img
src="https://d33wubrfki0l68.cloudfront.net/5557d5a11584d7201a38ee1a95200f57a4cc0f88/15085/assets/png/github-ico.png"
alt="" class="main-footer__social-link-icon" />
</a>
<a href="#" class="main-footer__social-link">
<img src="./assets/icons8-instagram-48.png" alt="" class="main-footer__social-link-icon" />
</a>
<a href="#" class="main-footer__social-link">
<img src="./assets/icons8-twitter-50.png" alt="" class="main-footer__social-link-icon" />
</a>
<a href="#" class="main-footer__social-link">
<img
src="https://d33wubrfki0l68.cloudfront.net/7f29579dde49e02480372aa49f7189c5536b0118/34b92/assets/png/linkedin-ico.png"
alt="" class="main-footer__social-link-icon" />
</a>
<a href="#" class="main-footer__social-link">
<img src="./assets/icons8-pinterest-64.png" alt="" class="main-footer__social-link-icon" />
</a>
</div>
</div>
</div>
<div class="main-footer__bottom">
<div class="main-container">
<p class="main-footer__bottom-txt">
<!-- If you can give me some credits or shoutout here by linking to my website, then that will help me a lot :) -->
<a target="_blank" href="https://github.com/rammcodes/wowfolio">WowFolio</a> Open-Source Template
<script>document.write(new Date().getFullYear())</script>. Made by
<a target="_blank" href="https://rammaheshwari.com">Ram Maheshwari</a>
</p>
</div>
</div>
</footer>
<script src="./script.js"></script>
</body>
</html>
================================================
FILE: script.js
================================================
const smMenuBtn = document.querySelector('.main-header__sm-scr-nav-btn')
const smMenu = document.querySelector('.main-header__sm-menu')
const smMenuCloseBtn = document.querySelector('.main-header__sm-menu-close')
const smMenuLinks = document.querySelectorAll('.main-header__sm-menu-link')
const smMenuLink1 = document.querySelector('.main-header__sm-menu-link--1')
const smMenuLink2 = document.querySelector('.main-header__sm-menu-link--2')
const smMenuLink3 = document.querySelector('.main-header__sm-menu-link--3')
const smMenuLink4 = document.querySelector('.main-header__sm-menu-link--4')
smMenuBtn.addEventListener('click', () => {
smMenu.style.transitionDelay = '0s'
smMenu.classList.add('main-header__sm-menu--active')
smMenuLink1.style.transitionDelay = '.5s'
smMenuLink1.style.transform = 'translateY(0)'
smMenuLink1.style.opacity = '1'
smMenuLink2.style.transitionDelay = '.8s'
smMenuLink2.style.transform = 'translateY(0)'
smMenuLink2.style.opacity = '1'
smMenuLink3.style.transitionDelay = '1.1s'
smMenuLink3.style.transform = 'translateY(0)'
smMenuLink3.style.opacity = '1'
smMenuLink4.style.transitionDelay = '1.4s'
smMenuLink4.style.transform = 'translateY(0)'
smMenuLink4.style.opacity = '1'
})
smMenuLinks.forEach((ele) => {
ele.addEventListener('click', () => {
smMenuLink4.style.transitionDelay = '0s'
smMenuLink4.style.transform = 'translateY(50px)'
smMenuLink4.style.opacity = '0'
smMenuLink3.style.transitionDelay = '.3s'
smMenuLink3.style.transform = 'translateY(50px)'
smMenuLink3.style.opacity = '0'
smMenuLink2.style.transitionDelay = '.6s'
smMenuLink2.style.transform = 'translateY(50px)'
smMenuLink2.style.opacity = '0'
smMenuLink1.style.transitionDelay = '.9s'
smMenuLink1.style.transform = 'translateY(50px)'
smMenuLink1.style.opacity = '0'
smMenu.style.transitionDelay = '1.2s'
smMenu.classList.remove('main-header__sm-menu--active')
setTimeout(() => {
document.getElementById(ele.name).scrollIntoView()
}, 1300)
})
})
smMenuCloseBtn.addEventListener('click', () => {
smMenuLink4.style.transitionDelay = '0s'
smMenuLink4.style.transform = 'translateY(50px)'
smMenuLink4.style.opacity = '0'
smMenuLink3.style.transitionDelay = '.3s'
smMenuLink3.style.transform = 'translateY(50px)'
smMenuLink3.style.opacity = '0'
smMenuLink2.style.transitionDelay = '.6s'
smMenuLink2.style.transform = 'translateY(50px)'
smMenuLink2.style.opacity = '0'
smMenuLink1.style.transitionDelay = '.9s'
smMenuLink1.style.transform = 'translateY(50px)'
smMenuLink1.style.opacity = '0'
smMenu.style.transitionDelay = '1.2s'
smMenu.classList.remove('main-header__sm-menu--active')
})
// ---
const themeColorSelector = document.querySelector('.themeClrSelector')
const themeColorSelectorInput = document.querySelector(
'.themeClrSelector__input'
)
const root = document.documentElement;
const hexToRgb = (hex) => {
let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
: null
}
const eventFire = (el, etype) => {
if (el.fireEvent) {
el.fireEvent('on' + etype)
} else {
let evObj = document.createEvent('Events')
evObj.initEvent(etype, true, false)
el.dispatchEvent(evObj)
}
}
themeColorSelector.addEventListener('click', () => {
eventFire(themeColorSelectorInput, 'input')
})
const setDynamicColor = (color) => {
const { r, g, b } = hexToRgb(`${color}`)
root.style.setProperty('--themeColor', `${r},${g},${b}`);
//localStorage.setItem('color', color)
}
themeColorSelectorInput.addEventListener('input', (e) => {
setDynamicColor(e.target.value)
})
// if (localStorage.getItem('color')) {
// let userSelectedColor = localStorage.getItem('color')
// themeColorSelectorInput.value = userSelectedColor
// setDynamicColor(userSelectedColor)
// }
// ---
const headerLogoConatiner = document.querySelector('.main-header__logo-container')
headerLogoConatiner.addEventListener('click', () => {
location.href = 'index.html'
})
================================================
FILE: style.css
================================================
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: inherit;
}
:root {
--themeColor: 29, 161, 242;
/* Theme Color in (R,G,B) format */
}
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
/* 75em === 1200px */
@media (max-width: 75em) {
html {
font-size: 60%;
}
}
/* 56.25em === 900px */
@media (max-width: 56.25em) {
html {
font-size: 58%;
}
}
/* 37.5em === 600px */
@media (max-width: 37.5em) {
html {
font-size: 56%;
}
}
/* 112.5em === 1600px */
/* @media (min-width: 112.5em) {
html {
font-size: 65%;
}
} */
body {
font-family: 'PT Sans', sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* Utils */
.btn {
font-family: inherit;
letter-spacing: 1px;
font-weight: 700;
border: none;
box-shadow: none;
cursor: pointer;
padding: 1.8rem 4rem;
font-size: 1.8rem;
border-radius: 5px;
border: 2px solid rgba(var(--themeColor), 1);
}
@media (max-width: 37.5em) {
.btn {
padding: 2rem 4rem;
}
}
.btn-theme {
background: rgba(var(--themeColor), 1);
color: #fff;
box-shadow: 0 5px 15px 0 rgb(0 0 0 / 15%);
}
.btn-inv {
color: rgba(var(--themeColor), 1);
background: #fff;
}
.btn-sm {
padding: 1.3rem 2rem;
font-size: 1.6rem;
border: none;
}
.main-container {
max-width: 120rem;
margin: auto;
width: 90%;
}
.main-section {
padding: 12rem 0;
}
.main-section__content {
margin-top: 10rem;
}
@media (max-width: 37.5em) {
.main-section {
padding: 10rem 0;
}
.main-section__content {
margin-top: 9rem;
}
}
.heading-primary {
font-size: 4.5rem;
letter-spacing: 1px;
line-height: 1.3;
color: #000;
font-weight: 400;
}
@media (max-width: 37.5em) {
.heading-primary {
font-size: 4rem;
}
}
.heading-primary__sm {
font-size: 2rem;
display: block;
margin-bottom: 2.5rem;
}
.heading-secondary {
font-size: 4rem;
letter-spacing: 1px;
line-height: 1.3;
color: #000;
font-weight: 400;
}
.heading-secondary__sm {
font-size: 1.8rem;
display: block;
margin-bottom: 2.5rem;
}
.heading-tertiary {
font-size: 3.4rem;
letter-spacing: 1px;
line-height: 1.3;
color: #000;
font-weight: 400;
}
.heading-quaternary {
font-size: 2.5rem;
letter-spacing: 1px;
line-height: 1.3;
color: #000;
font-weight: 400;
}
@media (max-width: 37.5em) {
.heading-secondary {
font-size: 3.7rem;
}
.heading-tertiary {
font-size: 3rem;
}
}
.text-primary {
font-size: 1.9rem;
color: #444;
line-height: 1.6;
}
.text-primary span {
margin-bottom: 1.5rem;
display: block;
}
.text-primary span:last-child {
margin-bottom: 0;
}
/* Animation ( Keyframes ) */
@keyframes downToUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Main Header Stylings */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2.5rem;
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 10px 100px -5px #eee;
z-index: 1000;
background: #fff;
}
.main-header__logo-container {
display: flex;
align-items: center;
cursor: pointer;
}
.main-header__logo-img-cont {
margin-right: 1.5rem;
width: 4rem;
height: 4rem;
overflow: hidden;
border-radius: 10rem;
background: rgba(var(--themeColor), 1);
}
.main-header__sm-scr-nav-btn {
padding: 1rem 1rem;
display: none;
cursor: pointer;
}
@media (max-width: 37.5em) {
.main-header__sm-scr-nav-btn {
display: block;
}
}
.main-header__sm-scr-nav-btn-line {
height: 1px;
background: #000;
width: 3rem;
border-radius: 50px;
}
.main-header__sm-menu {
background: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 40rem;
transform: translateX(-100%);
transition: transform 0.5s;
display: flex;
align-items: center;
justify-content: center;
}
.main-header__sm-menu-close {
position: absolute;
top: 3.3rem;
right: 2.5rem;
width: 3rem;
height: 3rem;
}
.main-header__sm-menu-close:before,
.main-header__sm-menu-close:after {
position: absolute;
content: ' ';
height: 3rem;
width: 1px;
left: 50%;
transform: translateX(-50%);
background-color: #000;
}
.main-header__sm-menu-close:before {
transform: rotate(45deg);
}
.main-header__sm-menu-close:after {
transform: rotate(-45deg);
}
.main-header__sm-menu--active {
transform: translateX(0);
}
.main-header__sm-menu-links {
width: 90%;
}
.main-header__sm-menu-link {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.3s, transform 0.3s;
font-size: 2.5rem;
text-align: center;
display: block;
padding: 3rem;
color: #555;
}
/* @keyframes smMenuLinkStartAnimation {
0% {
transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes smMenuLinkEndAnimation {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(50px);
opacity: 0;
}
} */
.main-header__sm-scr-nav-btn-line:first-child {
margin-bottom: 8px;
}
@media (max-width: 37.5em) {
.main-header {
padding: 2.3rem 1.5rem;
}
.main-header__logo-img-cont {
margin-right: 1rem;
}
}
.main-header__logo-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.main-header__logo-text {
font-size: 2.2rem;
letter-spacing: 1px;
color: #000;
font-weight: 400;
}
.main-header__navigation-links {
display: flex;
align-items: center;
}
.main-header__navigation-link {
padding: 1.3rem 2rem;
font-size: 1.6rem;
letter-spacing: 1px;
color: #000;
font-weight: 400;
}
@media (max-width: 56.25em) {
.main-header__navigation-link {
padding: 1.3rem 1.5rem;
}
}
@media (max-width: 37.5em) {
.main-header__navigation-links {
display: none;
}
}
/* Hero Section Stylings */
.home-hero {
display: flex;
height: 100vh;
min-height: 80rem;
max-height: 120rem;
}
.home-hero__content {
max-width: 120rem;
margin: auto;
width: 90%;
animation: downToUp 0.8s;
}
@media (max-width: 37.5em) {
.home-hero {
height: unset;
min-height: unset;
max-height: unset;
}
.home-hero__content {
margin: 0 auto;
padding: 15rem 0 10rem 0;
}
}
.home-hero__heading-primary {
margin-bottom: 5rem;
}
.home-hero__btn-theme {
margin-right: 2rem;
}
@media (max-width: 37.5em) {
.home-hero__heading-primary {
margin-bottom: 4.5rem;
}
.home-hero__btn-theme,
.home-hero__btn-inv {
width: 100%;
}
.home-hero__btn-theme {
margin: 0 0 2rem 0;
}
}
/* About */
.about {
background: rgb(252, 252, 252);
}
.about__info {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 8rem;
}
@media (max-width: 37.5em) {
.about__info {
grid-template-columns: 1fr;
grid-gap: 6rem;
}
.about__btn-theme {
width: 70%;
}
}
.about__heading-quaternary {
margin-bottom: 3rem;
}
.about__main-info {
margin-bottom: 4rem;
}
.about__text-primary {
margin-bottom: 4rem;
}
.about__info-heading {
margin-bottom: 3rem;
color: #555;
}
.about__skills {
display: flex;
flex-wrap: wrap;
}
.about__skill {
font-size: 1.6rem;
text-transform: uppercase;
letter-spacing: 1px;
padding: 1.5rem 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
background: #eee;
color: #666;
border-radius: 5px;
font-weight: 500;
}
/* Skills Showcase */
.skills-showcase {
background: rgba(247, 247, 247, 1);
padding: 5rem 3rem;
}
.skills-showcase__list {
display: flex;
justify-content: space-around;
}
.skills-showcase__list-item {
padding: 3rem;
border-radius: 5px;
background: #fff;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.skills-showcase__list-item i {
color: rgba(var(--themeColor), 1);
color: #999;
font-size: 5rem;
}
@media (max-width: 75em) {
.skills-showcase__list-item {
padding: 1.5rem;
border-radius: 5px;
background: #fff;
}
.skills-showcase__list-item i {
font-size: 5rem;
}
}
@media (max-width: 56.25em) {
.skills-showcase {
padding: 5rem;
}
.skills-showcase__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5rem;
}
.skills-showcase__list-item {
text-align: center;
}
}
@media (max-width: 37.5em) {
.skills-showcase {
padding: 4rem;
}
.skills-showcase__list {
grid-template-columns: repeat(3, 1fr);
grid-gap: 4rem;
}
}
@media (max-width: 21.875em) {
.skills-showcase__list-item i {
font-size: 4rem;
}
}
/* projects */
.projects__list-item {
display: grid;
grid-template-columns: 45%;
grid-gap: 4rem;
margin-bottom: 8rem;
}
.projects__list-item--inv {
justify-content: flex-end;
}
@media (max-width: 75em) {
.projects__list-item {
grid-template-columns: 60%;
}
}
@media (max-width: 56.25em) {
.projects__list-item {
grid-template-columns: 100%;
}
}
.projects__list-item:last-child {
margin-bottom: 0;
}
.projects__list-item-count {
display: flex;
flex-direction: column;
align-items: center;
max-height: 30rem;
display: none;
}
.projects__list-item-count-num {
font-size: 2rem;
font-weight: 700;
width: 5rem;
height: 5rem;
color: #fff;
background: #000;
display: block;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}
.projects__list-item-count-line {
flex-grow: 1;
width: 2px;
background: #000;
border-radius: 50px;
}
.projects__list-item-count-end-dot {
width: 1rem;
height: 1rem;
border-radius: 50px;
background: #000;
}
.projects__list-item--inv .projects__list-item-img-cont {
margin: 0 0 0 auto;
}
.projects__list-item-img-cont {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.projects__list-item-img {
width: 100%;
display: block;
}
.projects__list-item-heading-tertiary {
margin: 5rem 0 3rem 0;
}
@media (max-width: 37.5em) {
.projects__list-item-heading-tertiary {
margin: 5rem 0 2.5rem 0;
}
}
.projects__title-text-divider {
height: 5px;
width: 3rem;
background: rgba(var(--themeColor), 1);
margin-bottom: 3rem;
border-radius: 100px;
}
.projects__list-item-text-primary {
margin-bottom: 4rem;
}
@media (max-width: 37.5em) {
.projects__list-item-text-primary {
margin-bottom: 3.7rem;
}
}
.projects__list-item-text-primary span {
margin-bottom: 1.5rem;
display: block;
}
.projects__list-item-text-primary span:last-child {
margin-bottom: 0;
}
.projects__btn-theme {
margin-right: 2rem;
}
@media (max-width: 37.5em) {
.projects__btn-theme {
margin: 0 0 2rem 0;
}
.projects__btn-theme,
.projects__btn-inv {
width: 70%;
}
}
/* Contact */
.contact {
background: rgba(250, 250, 250, 1);
}
.contact__form-cont {
border-radius: 5px;
overflow: hidden;
display: grid;
grid-template-columns: 1.5fr 1fr;
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
}
.contact__form {
background: #fff;
padding: 5rem;
}
@media (max-width: 56.25em) {
.contact__form-cont {
grid-template-columns: 2fr 1fr;
}
}
@media (max-width: 37.5em) {
.contact__form-cont {
grid-template-columns: 1fr;
}
.contact__form {
padding: 3rem;
}
}
.contact__form-field {
margin-bottom: 3rem;
}
.contact__form-field-label {
font-size: 1.6rem;
text-transform: uppercase;
color: #444;
letter-spacing: 1px;
display: block;
margin-bottom: 1rem;
}
.contact__form-field-input {
display: block;
padding: 2rem;
width: 100%;
border: 1px solid rgba(225, 225, 225, 1);
font-size: 1.6rem;
resize: none;
border-radius: 5px;
font-weight: 400;
letter-spacing: 1px;
}
/* Code for Modern Browsers */
/* Code for WebKit, Blink, Edge */
/* Code for Internet Explorer 10-11 */
/* Code for Microsoft Edge */
/* Code for Mozilla Firefox 4 to 18 */
/* Code for Mozilla Firefox 19+ */
.contact__form-field-input::placeholder {
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input::-webkit-input-placeholder {
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input:-ms-input-placeholder {
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input::-ms-input-placeholder {
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input:-moz-placeholder {
opacity: 1;
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input::-moz-placeholder {
opacity: 1;
color: rgb(175, 175, 175);
font-weight: 400;
font-size: 1.6rem;
}
.contact__form-field-input:focus {
outline: none;
}
.contact__form-submit {
padding: 2rem;
width: 100%;
font-size: 1.6rem;
border: none;
letter-spacing: 1px;
font-family: inherit;
font-weight: 700;
background: rgba(var(--themeColor), 1);
color: #fff;
margin-top: 4rem;
display: block;
border-radius: 5px;
cursor: pointer;
}
.contact__form-visual {
background-image: url('https://i.postimg.cc/mrHQw69n/contact-form-bg.jpg');
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
position: relative;
z-index: 1;
}
@media (max-width: 37.5em) {
.contact__form-visual {
display: none;
}
}
.contact__form-visual::after {
content: '';
position: absolute;
z-index: 20;
background: rgba(var(--themeColor), 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* Main Footer */
.main-footer__upper {
background: #000;
padding: 10rem 0;
}
.main-footer__links {
display: flex;
max-width: 50rem;
align-items: center;
justify-content: space-between;
margin: auto;
}
.main-footer__link a {
color: #fff;
font-size: 1.6rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
}
@media (max-width: 37.5em) {
.main-footer__upper {
padding: 7rem 0;
}
.main-footer__links {
display: block;
}
.main-footer__link a {
margin-bottom: 0.5rem;
padding: 3rem 1.5rem;
display: block;
}
}
.main-footer__mid-line {
background: grey;
height: 1px;
margin-top: 6rem;
}
.main-footer__socials {
display: flex;
align-content: center;
justify-content: space-between;
max-width: 25rem;
margin: auto;
margin-top: 6rem;
}
.main-footer__social-link-icon {
width: 2.5rem;
}
.main-footer__bottom {
padding: 5rem 2rem;
background: #222;
}
.main-footer__bottom-txt {
color: #eee;
font-size: 1.3rem;
word-spacing: 2px;
text-align: center;
}
.main-footer__bottom-txt a {
text-decoration: underline;
color: #fff;
font-weight: 700;
}
.themeClrSelector {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
background: #fff;
z-index: 10;
box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
cursor: pointer;
overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
.themeClrSelector {
top: 100%;
transform: translateY(-100%);
}
}
.themeClrSelector__input {
background: transparent;
border: none;
cursor: pointer;
width: 5rem;
height: 5rem;
opacity: 0;
position: relative;
z-index: 10;
}
.themeClrSelector__img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
z-index: 1;
}
gitextract_mogiryrx/ ├── .vscode/ │ └── settings.json ├── LICENSE ├── README.md ├── index.html ├── script.js └── style.css
Condensed preview — 6 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (44K chars).
[
{
"path": ".vscode/settings.json",
"chars": 39,
"preview": "{\n \"liveServer.settings.port\": 5501\n}\n"
},
{
"path": "LICENSE",
"chars": 1071,
"preview": "MIT License\n\nCopyright (c) 2023 Ram Maheshwari\n\nPermission is hereby granted, free of charge, to any person obtaining a "
},
{
"path": "README.md",
"chars": 1923,
"preview": "# Wowfolio 🦄\n\n## A Simple & Clean Portfolio Template For Developers 👨💻\n\n<div align=\"center\">\n <img src=\"https://i.post"
},
{
"path": "index.html",
"chars": 18677,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edg"
},
{
"path": "script.js",
"chars": 4185,
"preview": "const smMenuBtn = document.querySelector('.main-header__sm-scr-nav-btn')\nconst smMenu = document.querySelector('.main-he"
},
{
"path": "style.css",
"chars": 15377,
"preview": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: inherit;\n}\n\n:root {\n --themeColor: 29, 161, 242"
}
]
About this extraction
This page contains the full source code of the rammcodes/WowFolio GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 6 files (40.3 KB), approximately 11.7k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.