├── screenshot.png ├── assets ├── images │ ├── ajax.png │ ├── css3.png │ ├── git.png │ ├── gulp.png │ ├── html5.png │ ├── npm.png │ ├── pugjs.png │ ├── react.png │ ├── sass.png │ ├── slack.png │ ├── vue.png │ ├── angular.png │ ├── clickup.png │ ├── command.png │ ├── jquery.png │ ├── trello.png │ ├── vs-code.png │ ├── webpack.png │ ├── adobe-xd.png │ ├── bootstrap.png │ ├── firebase.png │ ├── javascript.png │ ├── photoshop.png │ ├── project-1.png │ ├── project-2.png │ ├── project-3.png │ ├── project-4.png │ ├── project-5.png │ ├── project-6.png │ ├── project-7.png │ ├── typescript.png │ ├── about-banner.png │ ├── hero-banner.png │ ├── hero-banner-md.png │ ├── hero-banner-sm.png │ ├── stats-card_icon-1.png │ ├── stats-card_icon-2.png │ └── stats-card_icon-3.png ├── js │ └── script.js └── css │ └── style.css ├── readme-images ├── desktop.png └── project-logo.png ├── favicon.svg ├── LICENSE ├── .github └── workflows │ └── static.yml ├── style-guide.md ├── README.md ├── index.txt └── index.html /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/screenshot.png -------------------------------------------------------------------------------- /assets/images/ajax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/ajax.png -------------------------------------------------------------------------------- /assets/images/css3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/css3.png -------------------------------------------------------------------------------- /assets/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/git.png -------------------------------------------------------------------------------- /assets/images/gulp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/gulp.png -------------------------------------------------------------------------------- /assets/images/html5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/html5.png -------------------------------------------------------------------------------- /assets/images/npm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/npm.png -------------------------------------------------------------------------------- /assets/images/pugjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/pugjs.png -------------------------------------------------------------------------------- /assets/images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/react.png -------------------------------------------------------------------------------- /assets/images/sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/sass.png -------------------------------------------------------------------------------- /assets/images/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/slack.png -------------------------------------------------------------------------------- /assets/images/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/vue.png -------------------------------------------------------------------------------- /assets/images/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/angular.png -------------------------------------------------------------------------------- /assets/images/clickup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/clickup.png -------------------------------------------------------------------------------- /assets/images/command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/command.png -------------------------------------------------------------------------------- /assets/images/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/jquery.png -------------------------------------------------------------------------------- /assets/images/trello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/trello.png -------------------------------------------------------------------------------- /assets/images/vs-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/vs-code.png -------------------------------------------------------------------------------- /assets/images/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/webpack.png -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/readme-images/desktop.png -------------------------------------------------------------------------------- /assets/images/adobe-xd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/adobe-xd.png -------------------------------------------------------------------------------- /assets/images/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/bootstrap.png -------------------------------------------------------------------------------- /assets/images/firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/firebase.png -------------------------------------------------------------------------------- /assets/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/javascript.png -------------------------------------------------------------------------------- /assets/images/photoshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/photoshop.png -------------------------------------------------------------------------------- /assets/images/project-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-1.png -------------------------------------------------------------------------------- /assets/images/project-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-2.png -------------------------------------------------------------------------------- /assets/images/project-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-3.png -------------------------------------------------------------------------------- /assets/images/project-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-4.png -------------------------------------------------------------------------------- /assets/images/project-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-5.png -------------------------------------------------------------------------------- /assets/images/project-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-6.png -------------------------------------------------------------------------------- /assets/images/project-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/project-7.png -------------------------------------------------------------------------------- /assets/images/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/typescript.png -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/hero-banner.png -------------------------------------------------------------------------------- /readme-images/project-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/readme-images/project-logo.png -------------------------------------------------------------------------------- /assets/images/hero-banner-md.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/hero-banner-md.png -------------------------------------------------------------------------------- /assets/images/hero-banner-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/hero-banner-sm.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/stats-card_icon-1.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/stats-card_icon-2.png -------------------------------------------------------------------------------- /assets/images/stats-card_icon-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pkprajapati7402/Johndoe-Portfolio-Website/HEAD/assets/images/stats-card_icon-3.png -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Prince 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --raw-seinna: hsl(24, 74%, 58%); 28 | --sizzling-sunrise: hsl(51, 95%, 54%); 29 | --scarlet: hsl(13, 96%, 47%); 30 | --black: hsl(0, 0%, 0%); 31 | --white: hsl(0, 0%, 100%); 32 | ``` 33 | 34 | ## Typography 35 | 36 | ``` css 37 | --ff-saira-stencil-one: "Saira Stencil One", sans-serif; 38 | --ff-poppins: 'Poppins', sans-serif; 39 | --ff-roboto: 'Roboto', sans-serif; 40 | 41 | --fs-1: 2rem; 42 | --fs-2: calc(1.813rem + 1vw); 43 | --fs-3: calc(1.313rem + 1vw); 44 | --fs-4: 1.4rem; 45 | --fs-5: 1rem; 46 | --fs-6: 0.813rem; 47 | --fs-7: 0.75rem; 48 | 49 | --fw-400: 400; 50 | --fw-700: 700; 51 | ``` 52 | 53 | ## Transition 54 | 55 | ``` css 56 | --transition-1: 0.25s ease-in-out; 57 | ``` 58 | 59 | ## Spacing 60 | 61 | ``` css 62 | --section-padding: 80px; 63 | ``` 64 | 65 | ## Border radius 66 | 67 | ``` css 68 | --radius-4: 4px; 69 | --radius-12: 12px; 70 | ``` 71 | 72 | --- 73 | 74 | ## Theme Variables 75 | 76 | ### Dark Mode 77 | 78 | ``` css 79 | --bg-primary: hsl(0, 0%, 12%); 80 | --bg-secondary: hsl(0, 0%, 19%); 81 | --color-primary: hsl(0, 0%, 100%); 82 | --color-secondary: hsl(0, 0%, 62%); 83 | --card-shadow: hsla(0, 0%, 0%, 0.4); 84 | --input-bg: hsl(0, 0%, 16%); 85 | 86 | --shadow-1: 10px 10px 40px var(--card-shadow); 87 | ``` 88 | 89 | ### Light Mode 90 | 91 | ``` css 92 | --bg-primary: hsl(0, 0%, 90%); 93 | --bg-secondary: hsl(0, 0%, 100%); 94 | --color-primary: hsl(0, 0%, 12%); 95 | --color-secondary: hsl(0, 0%, 37%); 96 | --card-shadow: hsla(0, 0%, 0%, 0.1); 97 | --input-bg: hsl(0, 0%, 93%); 98 | 99 | --shadow-1: 10px 10px 40px var(--card-shadow); 100 | ``` 101 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * element toggle function 5 | */ 6 | 7 | // Copyright: 2024. 8 | // Made By: Prince 9 | 10 | const elemToggleFunc = function (elem) { elem.classList.toggle("active"); } 11 | 12 | 13 | 14 | /** 15 | * header sticky & go to top 16 | */ 17 | 18 | const header = document.querySelector("[data-header]"); 19 | const goTopBtn = document.querySelector("[data-go-top]"); 20 | 21 | window.addEventListener("scroll", function () { 22 | 23 | if (window.scrollY >= 10) { 24 | header.classList.add("active"); 25 | goTopBtn.classList.add("active"); 26 | } else { 27 | header.classList.remove("active"); 28 | goTopBtn.classList.remove("active"); 29 | } 30 | 31 | }); 32 | 33 | 34 | 35 | /** 36 | * navbar toggle 37 | */ 38 | 39 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]"); 40 | const navbar = document.querySelector("[data-navbar]"); 41 | 42 | navToggleBtn.addEventListener("click", function () { 43 | 44 | elemToggleFunc(navToggleBtn); 45 | elemToggleFunc(navbar); 46 | elemToggleFunc(document.body); 47 | 48 | }); 49 | 50 | 51 | 52 | /** 53 | * skills toggle 54 | */ 55 | 56 | const toggleBtnBox = document.querySelector("[data-toggle-box]"); 57 | const toggleBtns = document.querySelectorAll("[data-toggle-btn]"); 58 | const skillsBox = document.querySelector("[data-skills-box]"); 59 | 60 | for (let i = 0; i < toggleBtns.length; i++) { 61 | toggleBtns[i].addEventListener("click", function () { 62 | 63 | elemToggleFunc(toggleBtnBox); 64 | for (let i = 0; i < toggleBtns.length; i++) { elemToggleFunc(toggleBtns[i]); } 65 | elemToggleFunc(skillsBox); 66 | 67 | }); 68 | } 69 | 70 | 71 | 72 | /** 73 | * dark & light theme toggle 74 | */ 75 | 76 | const themeToggleBtn = document.querySelector("[data-theme-btn]"); 77 | 78 | themeToggleBtn.addEventListener("click", function () { 79 | 80 | elemToggleFunc(themeToggleBtn); 81 | 82 | if (themeToggleBtn.classList.contains("active")) { 83 | document.body.classList.remove("dark_theme"); 84 | document.body.classList.add("light_theme"); 85 | 86 | localStorage.setItem("theme", "light_theme"); 87 | } else { 88 | document.body.classList.add("dark_theme"); 89 | document.body.classList.remove("light_theme"); 90 | 91 | localStorage.setItem("theme", "dark_theme"); 92 | } 93 | 94 | }); 95 | 96 | /** 97 | * check & apply last time selected theme from localStorage 98 | */ 99 | 100 | if (localStorage.getItem("theme") === "light_theme") { 101 | themeToggleBtn.classList.add("active"); 102 | document.body.classList.remove("dark_theme"); 103 | document.body.classList.add("light_theme"); 104 | } else { 105 | themeToggleBtn.classList.remove("active"); 106 | document.body.classList.remove("light_theme"); 107 | document.body.classList.add("dark_theme"); 108 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌟 John Doe Portfolio Website Template 🌟 2 | 3 | ![Website Screenshot](screenshot.png) 4 | 5 | A simple, clean, and responsive personal portfolio website template, perfect for showcasing your projects and skills. This repository contains all the necessary code to create a personal website like John Doe's. 6 | 7 | ![GitHub repo size](https://img.shields.io/github/repo-size/pkprajapati7402/Johndoe-Portfolio-Website) 8 | ![GitHub stars](https://img.shields.io/github/stars/pkprajapati7402/Johndoe-Portfolio-Website?style=social) 9 | ![GitHub forks](https://img.shields.io/github/forks/pkprajapati7402/Johndoe-Portfolio-Website?style=social) 10 | ![GitHub language count](https://img.shields.io/github/languages/count/pkprajapati7402/Johndoe-Portfolio-Website) 11 | ![GitHub top language](https://img.shields.io/github/languages/top/pkprajapati7402/Johndoe-Portfolio-Website) 12 | ![GitHub last commit](https://img.shields.io/github/last-commit/pkprajapati7402/Johndoe-Portfolio-Website) 13 | 14 | ## ✨ Features 15 | 16 | - **Responsive Design:** 📱💻 Works on all devices (desktops, tablets, and smartphones). 17 | - **Clean Code:** 🧼 Well-commented and structured HTML, CSS, and JavaScript. 18 | - **Customizable:** 🛠️ Easy to personalize with your own information, projects, and images. 19 | - **Modern Layout:** 🎨 A sleek and professional design to impress potential employers or clients. 20 | 21 | ## 🚀 Demo 22 | 23 | You can view a live demo of the template [here](https://pkprajapati7402.github.io/Johndoe-Portfolio-Website). 24 | 25 | ## 🔧 Installation 26 | 27 | To get a local copy up and running, follow these simple steps: 28 | 29 | 1. **Clone the repo:** 30 | 31 | ```sh 32 | git clone https://github.com/pkprajapati7402/Johndoe-Portfolio-Website.git 33 | ``` 34 | 35 | 2. **Open the `index.html` file in your browser to view the website.** 36 | 37 | ## 📚 Usage 38 | 39 | Replace the placeholder content with your own: 40 | 41 | - **index.html:** Update the HTML content with your own name, about section, projects, etc. 42 | - **style.css:** Modify the CSS to match your personal style or color scheme. 43 | - **script.js:** Add any custom JavaScript functionality if needed. 44 | - **images:** Replace the placeholder images in the `images` folder with your own. 45 | 46 | ## 🤝 Contributing 47 | 48 | Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. 49 | 50 | 1. Fork the Project 🍴 51 | 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) 🌟 52 | 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) 💬 53 | 4. Push to the Branch (`git push origin feature/AmazingFeature`) 🚀 54 | 5. Open a Pull Request 📬 55 | 56 | ## 📄 License 57 | 58 | Distributed under the MIT License. See `LICENSE` for more information. 59 | 60 | ## 📬 Contact 61 | 62 | 63 | Project Link: [https://github.com/pkprajapati7402/Johndoe-Portfolio-Website](https://github.com/pkprajapati7402/Johndoe-Portfolio-Website) 64 | 65 | --- 66 | 67 | Feel free to use this template as a starting point for your own personal website and make sure to give it a star if you find it useful! ⭐ 68 | 69 | ![GitHub followers](https://img.shields.io/github/followers/pkprajapati7402?style=social) 70 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Jack - personal portfolio 2 | 3 | # HEDER 4 | 5 | Jack. 6 | 7 | En 8 | Ar 9 | 10 | aria-label = Change Theme 11 | title = Change Theme 12 | 13 | aria-label = Toggle Menu 14 | title = Toggle Menu 15 | 16 | Home. 17 | About. 18 | Skills. 19 | Portfolio. 20 | Contact. 21 | 22 | 23 | 24 | # HERO 25 | 26 | alt = A man in a blue shirt with a happy expression 27 | 28 | We Design & Build Creative Products 29 | 30 | Get in touch 31 | 32 | 33 | Facebook 34 | 35 | 36 | Twitter 37 | 38 | 39 | Linkedin 40 | 41 | Scroll 42 | 43 | 44 | 45 | # STATS 46 | 47 | alt = Badge icon 48 | 49 | 12+ 50 | Years of Experience 51 | 52 | 53 | 54 | alt = Checkmark icon 55 | 56 | 230+ 57 | Completed Projects 58 | 59 | alt = Peoples rating icon 60 | 61 | 95+ 62 | Happy Clients 63 | 64 | 65 | 66 | # ABOUT 67 | 68 | alt = A man in a alice blue shirt with a thinking expression 69 | 70 | About me 71 | 72 | Need a Creative Product? I can Help You! 73 | 74 | Hi! I’m Jack Reacher, and I’m a developer who has passion for building clean web applications with intuitive functionalities. I enjoy the process of turning ideas into reality using creative solutions. I’m always curious about learning new skills, tools, and concepts. In addition to working on various solo full stack projects, I have worked with creative teams, which involves daily stand-ups and communications, source control, and project management. 75 | 76 | Hire me 77 | 78 | Download cv 79 | 80 | 81 | 82 | # SKILLS 83 | 84 | My skills 85 | 86 | What My Programming Skills Included? 87 | 88 | I develop simple, intuitive and responsive user interface that helps users get things done with less effort and time with those technologies. 89 | 90 | Skills 91 | Tools 92 | 93 | HTML5 94 | alt = HTML5 logo 95 | 96 | CSS3 97 | alt = CSS3 logo 98 | 99 | JavaScript 100 | alt = JavaScript logo 101 | 102 | TypeScript 103 | alt = TypeScript logo 104 | 105 | jQuery 106 | alt = jQuery logo 107 | 108 | Bootstrap 109 | alt = Bootstrap logo 110 | 111 | Angular 112 | alt = Angular logo 113 | 114 | React 115 | alt = React logo 116 | 117 | Vue 118 | alt = Vue logo 119 | 120 | Firebase 121 | alt = Firebase logo 122 | 123 | PugJs 124 | alt = PugJs logo 125 | 126 | SASS 127 | alt = SASS logo 128 | 129 | 130 | Ajax 131 | alt = Ajax logo 132 | 133 | Gulp 134 | alt = Gulp logo 135 | 136 | Webpack 137 | alt = Webpack logo 138 | 139 | Git 140 | alt = Git logo 141 | 142 | Npm 143 | alt = Npm logo 144 | 145 | Command Line 146 | alt = Command Line logo 147 | 148 | VS Code 149 | alt = VS Code logo 150 | 151 | Trello 152 | alt = Trello logo 153 | 154 | ClickUp 155 | alt = ClickUp logo 156 | 157 | Slack 158 | alt = Slack logo 159 | 160 | Photoshop 161 | alt = Photoshop logo 162 | 163 | Adobe XD 164 | alt = Adobe XD logo 165 | 166 | 167 | 168 | # WOKRS 169 | 170 | My Works 171 | 172 | See My Works Which Will Amaze You! 173 | 174 | We develop the best quality website that serves for the long-term. Well-documented, clean, easy and elegant interface helps any non-technical clients. 175 | 176 | alt = A macintosh on a yellow background. 177 | Lorem Ipsum Dolor 01 178 | April 2022 179 | 180 | alt = On a Blue background, a Wacom and a mouse. 181 | Lorem Ipsum Dolor 02 182 | 183 | alt = A Cassette tape on a mellow apricot background. 184 | Lorem Ipsum Dolor 03 185 | 186 | alt = Blue digital watch on a dark liver background. 187 | Lorem Ipsum Dolor 04 188 | 189 | alt = On a dark liver background, Airport luggage car carrying a luggage. 190 | Lorem Ipsum Dolor 05 191 | 192 | alt = On a yellow background, a digital watch and a glass. 193 | Lorem Ipsum Dolor 06 194 | 195 | alt = A fujifilm instant camera on a dark electric blue background. 196 | Lorem Ipsum Dolor 07 197 | 198 | Load more work 199 | 200 | 201 | 202 | # CONTACT 203 | 204 | Contact 205 | 206 | Have You Any Project? Please Drop a Message 207 | 208 | Get in touch and let me know how i can help. Fill out the form and i’ll be in touch as soon as possible. 209 | 210 | 211 | Address: 212 | 941 Saqrqorish Road, alandalos, grnata, wa 47122-4194 213 | 214 | 215 | Phone: 216 | (01) 234 567 789 217 | (09) 765 432 200 218 | 219 | 220 | Email: 221 | info@jack.com 222 | support@jack.com 223 | 224 | 225 | 226 | 227 | 228 | 229 | Name 230 | 231 | placeholder = e.g John Doe 232 | 233 | Email 234 | 235 | placeholder = e.g johndoe@mail.com 236 | 237 | Phone 238 | 239 | placeholder = Phone Number 240 | 241 | Message 242 | 243 | placeholder = Write message... 244 | 245 | Send 246 | 247 | 248 | 249 | # FOOTER 250 | 251 | Jack. 252 | 253 | © 2022 codewithsadee. All rights reserved 254 | 255 | 256 | 257 | # GO TO TOP 258 | 259 | title = Go to Top 260 | 261 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Johndoe - personal portfolio 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 35 | 36 |
37 |
38 | 39 |

40 | Johndoe. 41 |

42 | 43 |
44 | 45 | 49 | 50 | 53 | 54 |
55 | 56 | 61 | 62 | 87 | 88 |
89 |
90 | 91 | 92 | 93 | 94 | 95 |
96 |
97 | 98 | 101 | 102 |
103 | 104 |
105 | 106 | 107 | 108 | 109 | A man in a blue shirt with a happy expression 111 | 112 | 113 |
114 | 115 |
116 | 117 |

We Design & Build Creative Products

118 | 119 | Get in touch 120 | 121 |
122 | 123 | 150 | 151 | 152 | 153 |
154 | 155 | 156 | 157 | 158 | 159 | 162 | 163 |
164 | 215 |
216 | 217 | 218 | 219 | 220 | 221 | 224 | 225 |
226 | 227 |
228 | A man in a alice blue shirt with a thinking expression 230 |
231 | 232 |
233 | 234 |

About me

235 | 236 |

Need a Creative Product? I can Help You!

237 | 238 |

239 | Hi! I’m Johndoe Reacher, and I’m a developer who has passion for building clean web applications with intuitive 240 | functionalities. I enjoy the process of turning ideas into reality using creative solutions. I’m always 241 | curious about 242 | learning new skills, tools, and concepts. In addition to working on various solo full stack projects, I have 243 | worked with 244 | creative teams, which involves daily stand-ups and communications, source control, and project management. 245 |

246 | 247 |
248 | 249 | 250 | 251 |
252 | 253 |
254 | 255 |
256 | 257 | 258 | 259 | 260 | 261 | 264 | 265 |
266 | 267 |
268 | 269 |

My skills

270 | 271 |

What My Programming Skills Included?

272 | 273 |

274 | I develop simple, intuitive and responsive user interface that helps users get things done with less effort 275 | and time 276 | with those technologies. 277 |

278 | 279 |
280 | 281 | 282 | 283 |
284 | 285 |
286 | 287 |
288 | 289 |
    290 | 291 |
  • 292 |
    293 |
    HTML5
    294 | 295 |
    296 | HTML5 logo 297 |
    298 |
    299 |
    • 300 | 301 |
  • 302 |
    303 |
    CSS3
    304 | 305 |
    306 | CSS3 logo 307 |
    308 |
    309 |
    • 310 | 311 |
  • 312 |
    313 |
    JavaScript
    314 | 315 |
    316 | JavaScript logo 317 |
    318 |
    319 |
    • 320 | 321 |
  • 322 |
    323 |
    TypeScript
    324 | 325 |
    326 | TypeScript logo 327 |
    328 |
    329 |
    • 330 | 331 |
  • 332 |
    333 |
    jQuery
    334 | 335 |
    336 | jQuery logo 337 |
    338 |
    339 |
    • 340 | 341 |
  • 342 |
    343 |
    Bootstrap
    344 | 345 |
    346 | Bootstrap logo 347 |
    348 |
    349 |
    • 350 | 351 |
  • 352 |
    353 |
    Angular
    354 | 355 |
    356 | Angular logo 357 |
    358 |
    359 |
    • 360 | 361 |
  • 362 |
    363 |
    React
    364 | 365 |
    366 | React logo 367 |
    368 |
    369 |
    • 370 | 371 |
  • 372 |
    373 |
    Vue
    374 | 375 |
    376 | Vue logo 377 |
    378 |
    379 |
    • 380 | 381 |
  • 382 |
    383 |
    Firebase
    384 | 385 |
    386 | Firebase logo 387 |
    388 |
    389 |
    • 390 | 391 |
  • 392 |
    393 |
    PugJs
    394 | 395 |
    396 | PugJs logo 397 |
    398 |
    399 |
    • 400 | 401 |
  • 402 |
    403 |
    SASS
    404 | 405 |
    406 | SASS logo 407 |
    408 |
    409 |
    • 410 | 411 |
412 | 413 |
    414 | 415 |
  • 416 |
    417 |
    Ajax
    418 | 419 |
    420 | Ajax logo 421 |
    422 |
    423 |
    • 424 | 425 |
  • 426 |
    427 |
    Gulp
    428 | 429 |
    430 | Gulp logo 431 |
    432 |
    433 |
    • 434 | 435 |
  • 436 |
    437 |
    Webpack
    438 | 439 |
    440 | Webpack logo 441 |
    442 |
    443 |
    • 444 | 445 |
  • 446 |
    447 |
    Git
    448 | 449 |
    450 | Git logo 451 |
    452 |
    453 |
    • 454 | 455 |
  • 456 |
    457 |
    Npm
    458 | 459 |
    460 | Npm logo 461 |
    462 |
    463 |
    • 464 | 465 |
  • 466 |
    467 |
    Command Line
    468 | 469 |
    470 | Command Line logo 471 |
    472 |
    473 |
    • 474 | 475 |
  • 476 |
    477 |
    VS Code
    478 | 479 |
    480 | VS Code logo 481 |
    482 |
    483 |
    • 484 | 485 |
  • 486 |
    487 |
    Trello
    488 | 489 |
    490 | Trello logo 491 |
    492 |
    493 |
    • 494 | 495 |
  • 496 |
    497 |
    ClickUp
    498 | 499 |
    500 | ClickUp logo 501 |
    502 |
    503 |
    • 504 | 505 |
  • 506 |
    507 |
    Slack
    508 | 509 |
    510 | Slack logo 511 |
    512 |
    513 |
    • 514 | 515 |
  • 516 |
    517 |
    Photoshop
    518 | 519 |
    520 | Photoshop logo 521 |
    522 |
    523 |
    • 524 | 525 |
  • 526 |
    527 |
    Adobe XD
    528 | 529 |
    530 | Adobe XD logo 531 |
    532 |
    533 |
    • 534 | 535 |
536 | 537 |
538 | 539 |
540 | 541 | 542 | 543 | 544 | 545 | 548 | 549 |
550 | 551 | 691 | 692 |
693 | 694 | 695 | 696 | 697 | 698 | 701 | 702 |
703 | 704 |
705 | 706 |

Contact

707 | 708 |

Have You Any Project? Please Drop a Message

709 | 710 |

711 | Get in touch and let me know how i can help. Fill out the form and i’ll be in touch as soon as possible. 712 |

713 | 714 | 803 | 804 |
805 | 806 |
807 | 808 |
809 | 810 | 811 | 812 |
813 | 814 | 815 | 816 | 817 | 818 |
819 | 820 |
821 | 822 |
823 | 824 | 825 | 826 |
827 | 828 | 830 | 831 | 832 | 833 |
834 | 835 |
836 | 837 |
838 | 839 | 840 | 841 |
842 | 843 | 844 | 845 | 846 | 847 |
848 | 849 |
850 | 851 |
852 | 853 | 854 | 855 |
856 | 857 | 859 | 860 | 861 | 862 |
863 | 864 |
865 | 866 | 867 | 868 |
869 | 870 |
871 | 872 |
873 |
874 | 875 | 876 | 877 | 878 | 879 | 882 | 883 | 898 | 899 | 900 | 901 | 902 | 903 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 918 | 919 | 920 | 923 | 924 | 925 | 926 | 927 | 928 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | * style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2024 Prince 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | * #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --raw-seinna: hsl(24, 74%, 58%); 24 | --sizzling-sunrise: hsl(51, 95%, 54%); 25 | --scarlet: hsl(13, 96%, 47%); 26 | --black: hsl(0, 0%, 0%); 27 | --white: hsl(0, 0%, 100%); 28 | 29 | /** 30 | * typography 31 | */ 32 | 33 | --ff-saira-stencil-one: "Saira Stencil One", sans-serif; 34 | --ff-poppins: 'Poppins', sans-serif; 35 | --ff-roboto: 'Roboto', sans-serif; 36 | 37 | --fs-1: 2rem; 38 | --fs-2: calc(1.813rem + 1vw); 39 | --fs-3: calc(1.313rem + 1vw); 40 | --fs-4: 1.4rem; 41 | --fs-5: 1rem; 42 | --fs-6: 0.813rem; 43 | --fs-7: 0.75rem; 44 | 45 | --fw-400: 400; 46 | --fw-700: 700; 47 | 48 | /** 49 | * transition 50 | */ 51 | 52 | --transition-1: 0.25s ease-in-out; 53 | 54 | /** 55 | * spacing 56 | */ 57 | 58 | --section-padding: 80px; 59 | 60 | /** 61 | * radius 62 | */ 63 | 64 | --radius-4: 4px; 65 | --radius-12: 12px; 66 | 67 | } 68 | 69 | 70 | 71 | 72 | 73 | /*-----------------------------------*\ 74 | * #THEME COLORS 75 | \*-----------------------------------*/ 76 | 77 | body.dark_theme { 78 | 79 | --bg-primary: hsl(0, 0%, 12%); 80 | --bg-secondary: hsl(0, 0%, 19%); 81 | --color-primary: hsl(0, 0%, 100%); 82 | --color-secondary: hsl(0, 0%, 62%); 83 | --card-shadow: hsla(0, 0%, 0%, 0.4); 84 | --input-bg: hsl(0, 0%, 16%); 85 | 86 | --shadow-1: 10px 10px 40px var(--card-shadow); 87 | 88 | } 89 | 90 | body.light_theme { 91 | 92 | --bg-primary: hsl(0, 0%, 90%); 93 | --bg-secondary: hsl(0, 0%, 100%); 94 | --color-primary: hsl(0, 0%, 12%); 95 | --color-secondary: hsl(0, 0%, 37%); 96 | --card-shadow: hsla(0, 0%, 0%, 0.1); 97 | --input-bg: hsl(0, 0%, 93%); 98 | 99 | --shadow-1: 10px 10px 40px var(--card-shadow); 100 | 101 | } 102 | 103 | 104 | 105 | 106 | 107 | /*-----------------------------------*\ 108 | * #RESET 109 | \*-----------------------------------*/ 110 | 111 | *, *::before, *::after { 112 | margin: 0; 113 | padding: 0; 114 | box-sizing: border-box; 115 | } 116 | 117 | li { list-style: none; } 118 | 119 | a { text-decoration: none; } 120 | 121 | a, 122 | img, 123 | time, 124 | span, 125 | input, 126 | label, 127 | select, 128 | button, 129 | textarea, 130 | ion-icon { display: block; } 131 | 132 | input, 133 | button, 134 | select, 135 | textarea { 136 | background: none; 137 | border: none; 138 | font: inherit; 139 | } 140 | 141 | button, 142 | select { cursor: pointer; } 143 | 144 | input, 145 | textarea { width: 100%; } 146 | 147 | ion-icon { pointer-events: none; } 148 | 149 | :is(a, button, select) { 150 | outline-color: var(--scarlet); 151 | outline-offset: 3px; 152 | } 153 | 154 | ::selection { 155 | background: var(--color-primary); 156 | color: var(--bg-primary); 157 | } 158 | 159 | html { 160 | font-family: var(--ff-roboto); 161 | scroll-behavior: smooth; 162 | } 163 | 164 | body { 165 | background: var(--bg-primary); 166 | transition: var(--transition-1); 167 | } 168 | 169 | body.active { overflow: hidden; } 170 | 171 | 172 | 173 | 174 | 175 | /*-----------------------------------*\ 176 | * #REUSED STYLE 177 | \*-----------------------------------*/ 178 | 179 | .container { padding-inline: 10px; } 180 | 181 | .h1 { 182 | font-size: var(--fs-1); 183 | line-height: 1.2; 184 | font-weight: 400; 185 | } 186 | 187 | .h2, 188 | .h3, 189 | .h4 { 190 | color: var(--color-primary); 191 | font-family: var(--ff-poppins); 192 | line-height: 1.2; 193 | } 194 | 195 | .h2 { font-size: var(--fs-2); } 196 | 197 | .h3 { font-size: var(--fs-3); } 198 | 199 | .h4 { font-size: var(--fs-5); } 200 | 201 | .w-100 { width: 100%; } 202 | 203 | .btn { 204 | max-width: max-content; 205 | color: var(--color-primary); 206 | font-weight: var(--fw-700); 207 | text-transform: uppercase; 208 | letter-spacing: 0.5px; 209 | padding: 10px 25px; 210 | border: 1px solid transparent; 211 | border-radius: var(--radius-4); 212 | transition: var(--transition-1); 213 | } 214 | 215 | .btn-primary { border-color: var(--color-primary); } 216 | 217 | .btn-primary:is(:hover, :focus) { 218 | background: var(--color-primary); 219 | color: var(--bg-primary); 220 | } 221 | 222 | .btn-secondary { 223 | background: var(--raw-seinna); 224 | border-color: var(--raw-seinna); 225 | color: var(--black); 226 | } 227 | 228 | .btn-secondary:is(:hover, :focus) { --raw-seinna: hsl(24, 74%, 64%); } 229 | 230 | .section-subtitle { 231 | position: relative; 232 | color: var(--color-secondary); 233 | text-transform: uppercase; 234 | padding-bottom: 5px; 235 | margin-bottom: 20px; 236 | } 237 | 238 | .section-subtitle::after { 239 | content: ""; 240 | position: absolute; 241 | top: 100%; 242 | left: 0; 243 | width: 60px; 244 | height: 2px; 245 | background: var(--color-secondary); 246 | } 247 | 248 | .section-title { 249 | max-width: 350px; 250 | margin-bottom: 30px; 251 | } 252 | 253 | .section-text { 254 | color: var(--color-secondary); 255 | line-height: 1.8; 256 | margin-bottom: 30px; 257 | } 258 | 259 | .tooltip { 260 | position: absolute; 261 | top: -40px; 262 | background: var(--raw-seinna); 263 | min-width: max-content; 264 | color: var(--white); 265 | font-size: 15px; 266 | font-weight: var(--fw-700); 267 | padding: 5px 10px; 268 | border-radius: var(--radius-4); 269 | box-shadow: var(--shadow-1); 270 | transform: translateY(-10px); 271 | opacity: 0; 272 | pointer-events: none; 273 | transition: var(--transition-1); 274 | z-index: 1; 275 | } 276 | 277 | 278 | 279 | 280 | 281 | /*-----------------------------------*\ 282 | * #HEADER 283 | \*-----------------------------------*/ 284 | 285 | .header { 286 | padding-block: 15px; 287 | position: fixed; 288 | top: 0; 289 | left: 0; 290 | width: 100%; 291 | transition: var(--transition-1); 292 | z-index: 4; 293 | } 294 | 295 | .header.active { 296 | padding-block: 12px; 297 | background: var(--bg-secondary); 298 | box-shadow: var(--shadow-1); 299 | } 300 | 301 | .header .container { 302 | display: flex; 303 | justify-content: space-between; 304 | align-items: center; 305 | gap: 10px; 306 | } 307 | 308 | .logo { 309 | position: relative; 310 | min-width: 77px; 311 | z-index: 2; 312 | } 313 | 314 | .logo a { 315 | color: var(--color-primary); 316 | font-family: var(--ff-saira-stencil-one); 317 | } 318 | 319 | .logo span { 320 | display: inline-block; 321 | color: var(--raw-seinna); 322 | margin-left: 2px; 323 | } 324 | 325 | .navbar-actions { 326 | display: flex; 327 | align-items: center; 328 | gap: 15px; 329 | margin-left: auto; 330 | } 331 | 332 | .navbar-actions select { 333 | color: var(--color-primary); 334 | width: 45px; 335 | } 336 | 337 | .navbar-actions option { 338 | background: var(--bg-primary); 339 | color: var(--color-primary); 340 | } 341 | 342 | .theme-btn { 343 | padding: 4px; 344 | width: 48px; 345 | background: var(--bg-secondary); 346 | border-radius: 100px; 347 | transition: var(--transition-1); 348 | } 349 | 350 | .header.active .theme-btn { background: var(--bg-primary); } 351 | 352 | .theme-btn .icon { 353 | position: relative; 354 | left: 0; 355 | width: 20px; 356 | height: 20px; 357 | border-radius: 50px; 358 | box-shadow: inset 9px -6px var(--color-primary); 359 | transition: var(--transition-1); 360 | } 361 | 362 | .theme-btn.active .icon { 363 | left: 20px; 364 | box-shadow: inset 20px -20px var(--sizzling-sunrise); 365 | } 366 | 367 | .nav-toggle-btn { 368 | position: relative; 369 | transform: rotate(-55deg); 370 | transition: var(--transition-1); 371 | z-index: 2; 372 | } 373 | 374 | .nav-toggle-btn.active { transform: rotate(-45deg); } 375 | 376 | .nav-toggle-btn span { 377 | width: 20px; 378 | height: 2px; 379 | background: var(--color-primary); 380 | margin: 5px; 381 | transition: var(--transition-1); 382 | } 383 | 384 | .nav-toggle-btn :is(.one, .three) { width: 10px; } 385 | 386 | .nav-toggle-btn .one { 387 | margin-left: auto; 388 | transform-origin: left; 389 | } 390 | 391 | .nav-toggle-btn .three { transform-origin: right; } 392 | 393 | .nav-toggle-btn.active .one { transform: rotate(90deg) translateX(-3px); } 394 | 395 | .nav-toggle-btn.active .three { transform: rotate(90deg) translateX(3px); } 396 | 397 | .navbar { 398 | position: fixed; 399 | background: var(--bg-secondary); 400 | top: 100%; 401 | left: 0; 402 | width: 100%; 403 | height: 100%; 404 | display: grid; 405 | place-items: center; 406 | visibility: hidden; 407 | transition: 0.75s cubic-bezier(0.71, 0.01, 0.24, 0.99); 408 | transition-delay: 0.5s; 409 | z-index: 1; 410 | } 411 | 412 | .navbar.active { 413 | top: 0; 414 | visibility: visible; 415 | transition-delay: 0s; 416 | } 417 | 418 | .navbar-list > li { 419 | margin-block: 20px; 420 | padding-inline: 50px; 421 | overflow: hidden; 422 | } 423 | 424 | .navbar-link { 425 | position: relative; 426 | width: max-content; 427 | margin-inline: auto; 428 | color: var(--color-primary); 429 | font-family: var(--ff-poppins); 430 | font-size: var(--fs-1); 431 | padding: 10px; 432 | transform: translateY(50px); 433 | transition: 0.75s cubic-bezier(0.68, -0.55, 0.27, 2); 434 | } 435 | 436 | .navbar.active .navbar-link { 437 | transform: translateY(0); 438 | transition-delay: 0.5s; 439 | } 440 | 441 | .navbar-link::before { 442 | content: ""; 443 | position: absolute; 444 | top: 50%; 445 | transform: translateY(-50%); 446 | left: 0; 447 | height: 5px; 448 | width: 0; 449 | background: var(--raw-seinna); 450 | transition: var(--transition-1); 451 | } 452 | 453 | .navbar-link:is(:hover, :focus)::before { width: 100%; } 454 | 455 | 456 | 457 | 458 | 459 | /*-----------------------------------*\ 460 | * #HERO 461 | \*-----------------------------------*/ 462 | 463 | main { overflow-x: hidden; } 464 | 465 | .hero { 466 | min-height: 100vh; 467 | display: flex; 468 | flex-direction: column; 469 | justify-content: center; 470 | align-items: center; 471 | padding-top: 115px; 472 | margin-bottom: var(--section-padding); 473 | } 474 | 475 | .hero-banner { 476 | max-width: 500px; 477 | width: 125%; 478 | margin-bottom: 30px; 479 | } 480 | 481 | :is(.hero-social-list, .scroll-down) { display: none; } 482 | 483 | .hero-content { max-width: 450px; } 484 | 485 | .hero-title { 486 | text-align: center; 487 | margin-bottom: 30px; 488 | } 489 | 490 | .hero .btn-primary { margin-inline: auto; } 491 | 492 | 493 | 494 | 495 | 496 | /*-----------------------------------*\ 497 | * #STATS 498 | \*-----------------------------------*/ 499 | 500 | .stats { padding-block: var(--section-padding); } 501 | 502 | .stats-list { 503 | display: grid; 504 | gap: 30px; 505 | } 506 | 507 | .stats-card { 508 | background: var(--bg-secondary); 509 | display: flex; 510 | align-items: center; 511 | gap: 10px; 512 | padding: 25px; 513 | border-radius: var(--radius-12); 514 | box-shadow: var(--shadow-1); 515 | transition: var(--transition-1); 516 | } 517 | 518 | .stats-card:is(:hover, :focus) { transform: translateY(-5px); } 519 | 520 | .stats-card .card-icon { 521 | background: var(--raw-seinna); 522 | width: 60px; 523 | height: 60px; 524 | display: grid; 525 | place-items: center; 526 | border-radius: 50%; 527 | } 528 | 529 | .stats-card .card-icon img { 530 | width: 70%; 531 | filter: invert(1); 532 | } 533 | 534 | .stats-card .card-title { 535 | width: calc(100% - 95px); 536 | color: var(--raw-seinna); 537 | text-align: center; 538 | } 539 | 540 | .stats-card .card-title strong { 541 | display: block; 542 | color: var(--color-primary); 543 | font-size: initial; 544 | line-height: 1.3; 545 | margin-top: 5px; 546 | } 547 | 548 | .stats-card > ion-icon { color: var(--color-secondary); } 549 | 550 | 551 | 552 | 553 | 554 | /*-----------------------------------*\ 555 | * #ABOUT 556 | \*-----------------------------------*/ 557 | 558 | .about { padding-block: var(--section-padding); } 559 | 560 | .about-banner { 561 | max-width: 400px; 562 | margin-inline: auto; 563 | margin-bottom: 80px; 564 | } 565 | 566 | .about .btn { 567 | max-width: unset; 568 | width: 100%; 569 | } 570 | 571 | .about .btn-secondary { margin-bottom: 10px; } 572 | 573 | 574 | 575 | 576 | 577 | /*-----------------------------------*\ 578 | * #SKILLS 579 | \*-----------------------------------*/ 580 | 581 | .skills { padding-block: var(--section-padding); } 582 | 583 | .skills-content { margin-bottom: 50px; } 584 | 585 | .skills-toggle { 586 | background: var(--bg-secondary); 587 | position: relative; 588 | width: max-content; 589 | margin-inline: auto; 590 | display: flex; 591 | align-items: center; 592 | padding: 5px; 593 | border-radius: 100px; 594 | box-shadow: var(--shadow-1); 595 | z-index: 1; 596 | } 597 | 598 | .skills-toggle::before { 599 | content: ""; 600 | position: absolute; 601 | top: 5px; 602 | left: 5px; 603 | bottom: 5px; 604 | width: 93px; 605 | background: var(--raw-seinna); 606 | border-radius: 100px; 607 | transition: var(--transition-1); 608 | z-index: -1; 609 | } 610 | 611 | .skills-toggle.active::before { 612 | left: 98px; 613 | width: 94px; 614 | } 615 | 616 | .toggle-btn { 617 | color: var(--color-primary); 618 | font-family: var(--ff-poppins); 619 | padding: 5px 25px; 620 | transition: var(--transition-1); 621 | } 622 | 623 | .toggle-btn.active { color: var(--white); } 624 | 625 | .skills-box.active .skills-list, 626 | .skills-box .tools-list { display: none; } 627 | 628 | .skills-box .skills-list, 629 | .skills-box.active .tools-list { 630 | display: flex; 631 | flex-wrap: wrap; 632 | justify-content: center; 633 | align-items: center; 634 | gap: 15px; 635 | animation: fadeIn 0.5s ease-out forwards; 636 | } 637 | 638 | @keyframes fadeIn { 639 | 640 | 0% { opacity: 0; } 641 | 100% { opacity: 1; } 642 | 643 | } 644 | 645 | .skill-card { 646 | position: relative; 647 | background: var(--bg-secondary); 648 | width: 80px; 649 | height: 80px; 650 | display: grid; 651 | place-items: center; 652 | border-radius: var(--radius-12); 653 | box-shadow: var(--shadow-1); 654 | cursor: help; 655 | } 656 | 657 | .skill-card:hover .tooltip { 658 | transform: translateY(0); 659 | opacity: 1; 660 | } 661 | 662 | 663 | 664 | 665 | 666 | /*-----------------------------------*\ 667 | * #PROJECT 668 | \*-----------------------------------*/ 669 | 670 | .project { padding-block: var(--section-padding); } 671 | 672 | .project-list > li { margin-bottom: 25px; } 673 | 674 | .project-card { 675 | position: relative; 676 | overflow: hidden; 677 | border-radius: var(--radius-12); 678 | box-shadow: 2px 4px 6px hsla(0, 0%, 0%, 0.2); 679 | } 680 | 681 | .project-card::after { 682 | content: ""; 683 | position: absolute; 684 | inset: 0; 685 | border-radius: inherit; 686 | transition: var(--transition-1); 687 | } 688 | 689 | .project-card:is(:hover, :focus)::after { 690 | background: hsla(0, 0%, 100%, 0.1); 691 | backdrop-filter: blur(0.5px); 692 | } 693 | 694 | .project-card .card-content { 695 | position: absolute; 696 | bottom: 0; 697 | left: 0; 698 | width: 100%; 699 | padding: 20px; 700 | } 701 | 702 | .project-card .card-title { margin-bottom: 10px; } 703 | 704 | .project-card :is(.card-title, .publish-date) { 705 | background: var(--bg-primary); 706 | padding: 6px 12px; 707 | width: max-content; 708 | box-shadow: var(--shadow-1); 709 | transform: translateY(20px); 710 | opacity: 0; 711 | transition: var(--transition-1); 712 | } 713 | 714 | .project-card .publish-date { 715 | font-size: var(--fs-6); 716 | color: var(--color-primary); 717 | transition-delay: 0s; 718 | } 719 | 720 | .project-card:is(:hover, :focus) :is(.card-title, .publish-date) { 721 | transform: translateY(0); 722 | opacity: 1; 723 | } 724 | 725 | .project-card:is(:hover, :focus) .publish-date { transition-delay: 0.1s; } 726 | 727 | .load-more { 728 | font-size: var(--fs-4); 729 | color: var(--raw-seinna); 730 | text-decoration: underline; 731 | margin-inline: auto; 732 | } 733 | 734 | 735 | 736 | 737 | 738 | /*-----------------------------------*\ 739 | * #CONTACT 740 | \*-----------------------------------*/ 741 | 742 | .contact { padding-block: var(--section-padding); } 743 | 744 | .contact-content { margin-bottom: 50px; } 745 | 746 | .contact-list-item { 747 | display: flex; 748 | align-items: flex-start; 749 | gap: 15px; 750 | margin-bottom: 20px; 751 | } 752 | 753 | .contact-item-icon { 754 | font-size: 25px; 755 | color: var(--color-primary); 756 | } 757 | 758 | .contact-item-icon ion-icon { --ionicon-stroke-width: 40px; } 759 | 760 | .contact-item-title { margin-bottom: 10px; } 761 | 762 | .contact-list-item .contact-info { 763 | color: var(--color-secondary); 764 | font-style: normal; 765 | line-height: 1.6; 766 | transition: var(--transition-1); 767 | } 768 | 769 | .contact-info:not(address):is(:hover, :focus) { color: var(--color-primary); } 770 | 771 | .contac-social-list { 772 | display: flex; 773 | flex-wrap: wrap; 774 | justify-content: flex-start; 775 | align-items: center; 776 | gap: 15px; 777 | padding-inline: 40px; 778 | } 779 | 780 | .contact-social-link { 781 | position: relative; 782 | background: var(--color-primary); 783 | color: var(--bg-primary); 784 | width: 35px; 785 | height: 35px; 786 | display: grid; 787 | place-items: center; 788 | border-radius: 50%; 789 | transition: var(--transition-1); 790 | } 791 | 792 | .contact-social-link:is(:hover, :focus) { 793 | background: var(--raw-seinna); 794 | color: var(--white); 795 | } 796 | 797 | .contact-social-link:is(:hover, :focus) .tooltip { 798 | transform: translateY(0); 799 | opacity: 1; 800 | } 801 | 802 | .contact-form { 803 | background: var(--bg-secondary); 804 | padding: 20px; 805 | border-radius: var(--radius-12); 806 | box-shadow: var(--shadow-1); 807 | } 808 | 809 | .form-wrapper { margin-bottom: 25px; } 810 | 811 | .form-label { 812 | color: var(--color-primary); 813 | font-size: var(--fs-7); 814 | font-family: var(--ff-poppins); 815 | margin-bottom: 8px; 816 | margin-left: 5px; 817 | } 818 | 819 | .input-wrapper { position: relative; } 820 | 821 | .input-field { 822 | background: var(--input-bg); 823 | color: var(--raw-seinna); 824 | padding: 10px; 825 | padding-left: 40px; 826 | border-radius: var(--radius-12); 827 | transition: var(--transition-1); 828 | } 829 | 830 | .input-wrapper ion-icon { 831 | position: absolute; 832 | top: 10px; 833 | left: 10px; 834 | color: var(--color-secondary); 835 | font-size: 20px; 836 | transition: var(--transition-1); 837 | } 838 | 839 | textarea.input-field { 840 | min-height: 60px; 841 | height: 120px; 842 | max-height: 200px; 843 | resize: vertical; 844 | } 845 | 846 | .input-field:focus { outline: 1px solid; } 847 | 848 | .input-field:focus + ion-icon { color: var(--raw-seinna); } 849 | 850 | .contact .btn-primary { 851 | max-width: unset; 852 | width: 100%; 853 | background: var(--color-primary); 854 | color: var(--bg-primary); 855 | } 856 | 857 | 858 | 859 | 860 | 861 | /*-----------------------------------*\ 862 | * #FOOTER 863 | \*-----------------------------------*/ 864 | 865 | .footer { 866 | background: var(--bg-secondary); 867 | padding-block: 20px; 868 | text-align: center; 869 | box-shadow: var(--shadow-1); 870 | } 871 | 872 | .footer .logo { margin-bottom: 15px; } 873 | 874 | .copyright { 875 | color: var(--color-secondary); 876 | line-height: 1.6; 877 | } 878 | 879 | .copyright a { 880 | display: inline-block; 881 | color: var(--raw-seinna); 882 | } 883 | 884 | 885 | 886 | 887 | 888 | /*-----------------------------------*\ 889 | * #GO TO TOP 890 | \*-----------------------------------*/ 891 | 892 | .go-top { 893 | position: fixed; 894 | bottom: 25px; 895 | right: 25px; 896 | width: 45px; 897 | height: 45px; 898 | display: grid; 899 | place-items: center; 900 | font-size: 20px; 901 | color: var(--color-primary); 902 | border: 2px solid var(--color-primary); 903 | border-radius: 50%; 904 | opacity: 0; 905 | pointer-events: none; 906 | transform: translateY(10px); 907 | transition: var(--transition-1); 908 | z-index: 2; 909 | } 910 | 911 | .go-top.active { 912 | opacity: 1; 913 | pointer-events: all; 914 | transform: translateY(0); 915 | } 916 | 917 | 918 | 919 | 920 | 921 | /*-----------------------------------*\ 922 | * #MEDIA QUERIES 923 | \*-----------------------------------*/ 924 | 925 | /** 926 | * responsive for larger than 550px screen 927 | */ 928 | 929 | @media (min-width: 550px) { 930 | 931 | /** 932 | * REUSED STYLE 933 | */ 934 | 935 | .container { 936 | max-width: 550px; 937 | margin-inline: auto; 938 | } 939 | 940 | .section-title { max-width: 380px; } 941 | 942 | 943 | 944 | /** 945 | * PROJECT 946 | */ 947 | 948 | .project-list { 949 | column-count: 2; 950 | column-gap: 25px; 951 | } 952 | 953 | .project-list > li:first-child { column-span: all; } 954 | 955 | } 956 | 957 | 958 | 959 | 960 | 961 | /** 962 | * responsive for larger than 768px screen 963 | */ 964 | 965 | @media (min-width: 768px) { 966 | 967 | /** 968 | * REUSED STYLE 969 | */ 970 | 971 | .container { max-width: 720px; } 972 | 973 | .section-title { max-width: 430px; } 974 | 975 | 976 | 977 | /** 978 | * STATS 979 | */ 980 | 981 | .stats-list { grid-template-columns: 1fr 1fr; } 982 | 983 | 984 | 985 | /** 986 | * ABOUT 987 | */ 988 | 989 | .btn-group { 990 | display: flex; 991 | justify-content: flex-start; 992 | align-items: center; 993 | gap: 20px; 994 | } 995 | 996 | .about .btn { max-width: max-content; } 997 | 998 | .about .btn-secondary { margin-bottom: 0; } 999 | 1000 | 1001 | 1002 | /** 1003 | * CONTACT 1004 | */ 1005 | 1006 | .contact-form { 1007 | max-width: 450px; 1008 | margin-inline: auto; 1009 | } 1010 | 1011 | } 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | /** 1018 | * responsive for larger than 992px screen 1019 | */ 1020 | 1021 | @media (min-width: 992px) { 1022 | 1023 | /** 1024 | * CUSTOM PROPERTY 1025 | */ 1026 | 1027 | :root { 1028 | 1029 | /** 1030 | * typography 1031 | */ 1032 | 1033 | --fs-2: 3rem; 1034 | 1035 | /** 1036 | * spacing 1037 | */ 1038 | 1039 | --section-padding: 100px; 1040 | 1041 | } 1042 | 1043 | 1044 | 1045 | /** 1046 | * REUSED STYLE 1047 | */ 1048 | 1049 | .container { max-width: 980px; } 1050 | 1051 | .section-content { 1052 | position: relative; 1053 | padding-left: 40px; 1054 | } 1055 | 1056 | .section-subtitle { 1057 | position: absolute; 1058 | top: 0; 1059 | left: 0; 1060 | transform: rotate(0.75turn) translateX(-100%); 1061 | transform-origin: left top; 1062 | margin-bottom: 0; 1063 | } 1064 | 1065 | .section-subtitle::after { 1066 | top: 8px; 1067 | left: auto; 1068 | right: calc(100% + 20px); 1069 | } 1070 | 1071 | 1072 | 1073 | /** 1074 | * HEADER 1075 | */ 1076 | 1077 | .header { padding-block: 30px; } 1078 | 1079 | .header.active { padding-block: 15px; } 1080 | 1081 | .navbar-actions { 1082 | order: 1; 1083 | margin-left: 0; 1084 | } 1085 | 1086 | .nav-toggle-btn { display: none; } 1087 | 1088 | .navbar { all: unset; } 1089 | 1090 | .navbar-link { 1091 | transform: translateY(0); 1092 | font-size: unset; 1093 | padding-inline: 5px; 1094 | } 1095 | 1096 | .navbar-list > li { 1097 | margin: 0; 1098 | padding: 0; 1099 | overflow: visible; 1100 | } 1101 | 1102 | .navbar-list { 1103 | display: flex; 1104 | justify-content: center; 1105 | align-items: center; 1106 | gap: 20px; 1107 | } 1108 | 1109 | .navbar-link::before { height: 2px; } 1110 | 1111 | 1112 | 1113 | /** 1114 | * HERO 1115 | */ 1116 | 1117 | .hero { 1118 | position: relative; 1119 | padding-top: 0; 1120 | height: 100vh; 1121 | } 1122 | 1123 | .hero-banner { 1124 | max-width: unset; 1125 | height: 100%; 1126 | margin-bottom: 0; 1127 | } 1128 | 1129 | .hero img { 1130 | height: 100%; 1131 | width: auto; 1132 | margin-inline: auto; 1133 | } 1134 | 1135 | .hero-content { 1136 | --color-primary: var(--white); 1137 | 1138 | position: absolute; 1139 | top: 50%; 1140 | filter: drop-shadow(2px 4px 10px var(--black)); 1141 | } 1142 | 1143 | .hero .btn-primary:is(:hover, :focus) { color: hsl(0, 0%, 12%); } 1144 | 1145 | .hero-social-list { 1146 | display: block; 1147 | position: absolute; 1148 | bottom: 92px; 1149 | left: -30px; 1150 | } 1151 | 1152 | .hero-social-list::after { 1153 | content: ""; 1154 | position: absolute; 1155 | bottom: -40px; 1156 | left: 13px; 1157 | width: 2px; 1158 | height: 30px; 1159 | background: var(--color-secondary); 1160 | } 1161 | 1162 | .hero-social-link { 1163 | position: relative; 1164 | color: var(--color-secondary); 1165 | margin-block: 5px; 1166 | padding: 5px; 1167 | font-size: 18px; 1168 | transition: var(--transition-1); 1169 | } 1170 | 1171 | .hero-social-link:is(:hover, :focus) { color: var(--color-primary); } 1172 | 1173 | .hero-social-link .tooltip { 1174 | --trans-x: 10px; 1175 | 1176 | left: calc(100% + 10px); 1177 | top: 50%; 1178 | transform: translateY(-50%) translateX(var(--trans-x)); 1179 | } 1180 | 1181 | .hero-social-link:is(:hover, :focus) .tooltip { 1182 | --trans-x: 0; 1183 | opacity: 1; 1184 | } 1185 | 1186 | .scroll-down { 1187 | display: block; 1188 | position: absolute; 1189 | bottom: 80px; 1190 | right: -30px; 1191 | color: var(--color-secondary); 1192 | font-size: 1.125rem; 1193 | text-transform: uppercase; 1194 | transform: rotate(90deg); 1195 | transform-origin: top right; 1196 | } 1197 | 1198 | .scroll-down::after { 1199 | content: ""; 1200 | position: absolute; 1201 | top: 8px; 1202 | right: -50px; 1203 | width: 30px; 1204 | height: 2px; 1205 | background: var(--color-secondary); 1206 | } 1207 | 1208 | 1209 | 1210 | /** 1211 | * STATS 1212 | */ 1213 | 1214 | .stats-list { grid-template-columns: repeat(3, 1fr); } 1215 | 1216 | .stats-card { height: 100%; } 1217 | 1218 | 1219 | 1220 | 1221 | /** 1222 | * ABOUT 1223 | */ 1224 | 1225 | .about { 1226 | display: grid; 1227 | grid-template-columns: 1fr 1fr; 1228 | align-items: center; 1229 | gap: 30px; 1230 | } 1231 | 1232 | .about-banner { margin-bottom: 0; } 1233 | 1234 | 1235 | 1236 | 1237 | /** 1238 | * SKILLS 1239 | */ 1240 | 1241 | .skills { 1242 | display: grid; 1243 | grid-template-columns: 1fr 1fr; 1244 | align-items: center; 1245 | gap: 50px; 1246 | } 1247 | 1248 | .skills-content { margin-bottom: 0; } 1249 | 1250 | .skills-toggle { margin-inline: 0; } 1251 | 1252 | 1253 | 1254 | /** 1255 | * PROJECT 1256 | */ 1257 | 1258 | .project-list { column-count: 3; } 1259 | 1260 | .project-list > li:first-child { 1261 | column-span: unset; 1262 | margin: 25px; 1263 | margin-left: 0; 1264 | } 1265 | 1266 | 1267 | 1268 | /** 1269 | * CONTACT 1270 | */ 1271 | 1272 | .contact { 1273 | display: grid; 1274 | grid-template-columns: 1fr 1fr; 1275 | gap: 30px; 1276 | } 1277 | 1278 | .contact-content { margin-bottom: 0; } 1279 | 1280 | .contact-form { width: 100%; } 1281 | 1282 | .contact-list { margin-left: -40px; } 1283 | 1284 | 1285 | 1286 | /** 1287 | * FOOTER 1288 | */ 1289 | 1290 | .footer .container { 1291 | display: flex; 1292 | justify-content: space-between; 1293 | align-items: center; 1294 | } 1295 | 1296 | .footer .logo { margin-bottom: 0; } 1297 | 1298 | } 1299 | 1300 | 1301 | 1302 | 1303 | 1304 | /** 1305 | * responsive for larger than 1200px screen 1306 | */ 1307 | 1308 | @media (min-width: 1200px) { 1309 | 1310 | /** 1311 | * REUSED STYLE 1312 | */ 1313 | 1314 | .container { max-width: 1150px; } 1315 | 1316 | .section-title { max-width: 460px; } 1317 | 1318 | 1319 | 1320 | 1321 | /** 1322 | * HERO 1323 | */ 1324 | 1325 | .hero-social-list { left: -80px; } 1326 | 1327 | .scroll-down { right: -80px; } 1328 | 1329 | 1330 | 1331 | 1332 | /** 1333 | * ABOUT 1334 | */ 1335 | 1336 | .about-banner { max-width: 450px; } 1337 | 1338 | } --------------------------------------------------------------------------------