diff --git a/ReadMe.md b/ReadMe.md index eacb1b8..6709802 100644 --- a/ReadMe.md +++ b/ReadMe.md @@ -1,48 +1,58 @@ -[![Nihory - Portfolio site template](https://i.ibb.co/Y8CRzL4/Nihory-basic-preview-image.png)](https://nihory-basic.netlify.app/) -. -. +# DevFolio - Modern Developer Portfolio -Nihory is a creative 🌈 personal & portfolio template based on HTML, CSS and Javascript. You can use it for your personal resume, CV or your portfolio. It will help you to present your self even your Business & portfolio more smartly and easily. Nihory is written in valid and clean HTML & CSS3 code. It’s easy to customize πŸ–Œ +[![DevFolio - Professional Portfolio Template](https://i.ibb.co/Y8CRzL4/Nihory-basic-preview-image.png)](https://nihory-basic.netlify.app/) +## About DevFolio -## Features 🧯 +DevFolio is a modern and professional portfolio template crafted by Sandeep Kumar. Built with HTML5, CSS3, and JavaScript, it's perfect for developers and tech professionals looking to showcase their skills and projects. The template features a clean, minimalist design with optimal performance and easy customization options. -* πŸ”₯ Clean and Professional Design -* πŸ”₯ 100% Responsive -* πŸ”₯ Clean and commented code -* πŸ”₯ W3C Valid HTML5 & CSS3 -* πŸ”₯ Free Fonts from Google Fonts -* πŸ”₯ Free Icons from Font Awesome -* πŸ”₯ Crossover Browsers Compatibility -* πŸ”₯ Easy Customization -* πŸ”₯ One Html Page Code -* πŸ”₯ Free Future Updates -* 🎧 Friendly 5 stars Support 24/7 +[View Live Demo](https://nihory-basic.netlify.app/) -. -. +## Core Features -[![Nihory - Portfolio site template live demo](https://i.ibb.co/vwN8cgW/live-demo.png)](https://nihory-basic.netlify.app/) +- πŸ’» Modern and Professional Design +- πŸ“± Fully Responsive Layout +- ⚑ Fast Loading Performance +- ✨ Clean Code Architecture +- 🎨 Easy Customization +- πŸ” SEO Optimized +- 🌐 Cross-Browser Compatible +- πŸ“„ Single Page Application +- πŸ”„ Regular Updates +- πŸ’¬ Dedicated Support -. -. +## Tech Stack -## Fonts Used πŸ΄β€β˜ οΈπŸ΄πŸ³πŸ³β€πŸŒˆ -1) [Poppins](https://fonts.google.com/specimen/Poppins?query=pop) +- HTML5 +- CSS3 +- JavaScript +- Google Fonts +- Font Awesome Icons +## Resources +### Typography +- [Poppins](https://fonts.google.com/specimen/Poppins) - Primary Font -## Icons Used πŸ₯‘πŸŒ΄ -- [BoxIcons](https://boxicons.com/) +### Icon Library +- [BoxIcons](https://boxicons.com/) - Modern Icon Set +### Image Sources +- Behance +- Unsplash +- Pexels +## Support -## Image Credits πŸ›‘ -* πŸ“Έ Behance -* πŸ“Έ Unsplash -* πŸ“Έ Pexels -
-
+If you find this template useful, consider supporting my work: +[![Support My Work]() -[![Atul - Buy Me A Coffee](https://i.ibb.co/7rR9S4L/buy-me-a-coffee.png)](https://www.buymeacoffee.com/atulcodex) +## Get in Touch + +- Portfolio: [sandeepkumar.dev](https://remarkable-otter-bc422f.netlify.app/) +- GitHub: [@sandeepkumar](https://github.com/sandeepkrc) +- LinkedIn: [Sandeep Kumar](https://www.linkedin.com/in/sandeep-kumar-0116b0165) + +--- +Β© 2025 Sandeep Kumar. All rights reserved. diff --git a/Sandeep_Kumar_3_YOE_Python_developer.pdf b/Sandeep_Kumar_3_YOE_Python_developer.pdf new file mode 100644 index 0000000..2967836 Binary files /dev/null and b/Sandeep_Kumar_3_YOE_Python_developer.pdf differ diff --git a/Sandeep_Python_Developer_4_YOE.pdf b/Sandeep_Python_Developer_4_YOE.pdf new file mode 100644 index 0000000..16896b6 Binary files /dev/null and b/Sandeep_Python_Developer_4_YOE.pdf differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..3e16446 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/sa.png b/img/sa.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sa.png differ diff --git a/img/sandeep-about copy 2.jpg b/img/sandeep-about copy 2.jpg new file mode 100644 index 0000000..ea5dcb6 Binary files /dev/null and b/img/sandeep-about copy 2.jpg differ diff --git a/img/sandeep-about copy 3.png b/img/sandeep-about copy 3.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sandeep-about copy 3.png differ diff --git a/img/sandeep-about copy 4.png b/img/sandeep-about copy 4.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sandeep-about copy 4.png differ diff --git a/img/sandeep-about copy 5.png b/img/sandeep-about copy 5.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sandeep-about copy 5.png differ diff --git a/img/sandeep-about copy 6.png b/img/sandeep-about copy 6.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sandeep-about copy 6.png differ diff --git a/img/sandeep-about copy.jpg b/img/sandeep-about copy.jpg new file mode 100644 index 0000000..ea5dcb6 Binary files /dev/null and b/img/sandeep-about copy.jpg differ diff --git a/img/sandeep-about.jpg b/img/sandeep-about.jpg new file mode 100644 index 0000000..ea5dcb6 Binary files /dev/null and b/img/sandeep-about.jpg differ diff --git a/img/sandeep-about.png b/img/sandeep-about.png new file mode 100644 index 0000000..2a9a26d Binary files /dev/null and b/img/sandeep-about.png differ diff --git a/img/sandeep.png b/img/sandeep.png new file mode 100644 index 0000000..590a4ef Binary files /dev/null and b/img/sandeep.png differ diff --git a/index.html b/index.html index 66e9fe3..98dbccd 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,22 @@ + - Personal Portfolio Template | Nihory - - - + Sandeep Kumar | Security Engineer & Backend Developer + + + - - + - - + - - -
-
- Nihory Berst + Sandeep Kumar
-

Nihory Berst

- Frontend Developer +

Sandeep Kumar

+ Security Engineer / Backend Developer - - Download Resume + Download Resume
-
My intro -

About Me

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, ad minus? Facere cum debitis, amet architecto omnis eos! Quibusdam nesciunt quasi vel voluptas? Dolor molestias eaque amet, molestiae temporibus cupiditate laborum, deserunt minima hic accusantium blanditiis. + Experienced Backend Developer and Security Engineer specializing in building scalable, secure applications using Python, Django, and Django Rest Framework (DRF). Skilled in automated vulnerability management, engineering secure CI/CD pipelines, and ensuring architectural compliance with OWASP standard methodologies.

- Nihory Berst + Sandeep Kumar
-
+

Information

-
- Nihory Berst + Sandeep Kumar Chaurasia
-
- +91 9867 124867 + +91 8839038324
-
- me@nihoryberst.com + raj.sandip96@gmail.com
- +
-

Experience and support

- +

Experience & Assets

- 5 Years Job + 3.5+ Years Job Experience
-
@@ -124,84 +110,66 @@

Experience and support

Completed
- -
- -
- Support - Online 24/7 -
-
-
Why Choose Me -

My expertise Area

+

My Expertise Area

-

Frontend

- +

Backend Core

- Html/css + Python 80% - +
-
- Javascript - 90% - + Django REST Framework + 80% +
-
- React + Django 70% - +
-
- Angular - 60% - + PostgreSQL / MySQL + 65% +
-

Backend

- +

DevSecOps & Security

- Php + Static Automation (Bandit, Trivy, GoSec) 80% - +
-
- Node JS - 70% - + CI/CD Integration (GitHub, GitLab) + 85% +
-
- Firebase - 90% - + Burp Suite (API & Web Testing) + 75% +
-
- Python - 60% - + Docker & Kubernetes Basics + 70% +
-
Qualification

My Education

@@ -209,179 +177,201 @@

My Education

-

2010 - 2013

- University of Studies +

2014 - 2018

+ RGPV
-
-
-

Dev Diploma

- Frontend +

B.E. (Computer Science)

+ Oriental College of Technology, Bhopal
+
+
-
+
+ My Journey +

Work Experience

+ +
+
-

2014 - 2017

- University of Studies +

2025 - Present

+ ElasticRun
- -
- - +
+ +
-
-

Server Side Diploma

- Backend +

Security Engineer

+ + Leading development of App Radar, an enterprise security pipeline monitoring automation framework parsing vulnerability data tracking vectors from Bandit, Trivy, and GoSec logs. Automated tracking logic reduced diagnostic effort profiles by 60% and improved security remediation lifecycle targets by 40%. +
-
+
-

2018 - 2020

- University of Studies +

2022 - 2024

+ Rapifuzz Pvt Ltd
- -
- - +
+ +
+
+

Backend Developer

+ + Designed and deployed resilient REST APIs using Python, Django, DRF, and PostgreSQL aligned with security parameters. Built asynchronous Jira hooks and system auditing filters. Passed multi-layered SDL schema files for specialized API vulnerability surface discovery mappings. + +
+
+
+
+

2021 - 2022

+ Realcoderz Technology +
+
+ +
-

Design Diploma

- UI/UX +

Full Stack Python Developer

+ + Contributed logic engines supporting core platform architectures across interactive Learning Management Systems using Python, Django, React, and MySQL database engines. +
-
What I Offer

My Services

-
- -

Web Design

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

-
- -
- -

Graphic Design

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

-
- -
- -

UI/UX

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

-
-
-

Backend Development

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

+

Backend Architecture

+

Building robust and highly scalable REST APIs using Django, Python, and efficient database architectures.

-
- -

Content Writing

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

+ +

DevSecOps Engineering

+

Integrating static analyzers (SAST) like Bandit directly into target deployment pipelines safely.

-
- -

Interface Movil

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dolores tempora.

+ +

API Security Audits

+

Evaluating API attack surfaces using intercepting proxies like Burp Suite according to OWASP guidelines.

-
-

Do you have a project in mind

+

Have a project in mind?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, voluptatum, minus possimus vel accusamus fuga quas accusantium, praesentium architecto aliquid repudiandae et id enim eos aut. + Let's bring your ideas to life! Whether it's a new backend architecture, pipeline configuration, or a secure app framework, I'm ready to collaborate.

- Contact Me + Get in Touch
- - Nihory Berst
-
My portfolio

Recent Works

- App Design - + App Design
App Design
-
- Web App - + Web App
Web App
-
- E-commerce - + E-commerce
E-commerce
-
- Agency Site - + Agency Site
Agency Site
-
- Network Site - + Network Site
Network Site
-
- Hosting Site - + Hosting Site
Payment Site
+ +
-
Contact Me

Get In Touch

@@ -390,59 +380,45 @@

Get In Touch

- +
- - +
-
+

Call Me

- +91 9845 657812 - +91 8746 657845 + +91 8839038324
-

E-mail

- nihory@gmail.com - me@nihory.com + raj.sandip96@gmail.com
-

Location

- Cion, Mumbai - Maharashtra, In + Hinjewadi, Pune, India
-
- - - - \ No newline at end of file diff --git a/script.js b/script.js index 9b48316..7bcab36 100644 --- a/script.js +++ b/script.js @@ -1,48 +1,52 @@ -// Menu show Y hidden -const navMenu = document.getElementById('nav-menu'), - toggleMenu = document.getElementById('nav-toggle'), - closeMenu = document.getElementById('nav-close'); - -// Show -toggleMenu.addEventListener('click', ()=>{ - navMenu.classList.toggle('show'); -}); - -// Hidden -closeMenu.addEventListener('click', ()=>{ - navMenu.classList.remove('show'); -}); - -// Remove menu -const navLink = document.querySelectorAll('.nav__link'); - -function linkAction() -{ - navMenu.classList.remove('show'); -}; +/*===== MENU SHOW =====*/ +const showMenu = (toggleId, navId) =>{ + const toggle = document.getElementById(toggleId), + nav = document.getElementById(navId) + + if(toggle && nav){ + toggle.addEventListener('click', ()=>{ + nav.classList.add('show') + }) + } +} +showMenu('nav-toggle','nav-menu') + +/*===== MENU REMOVE =====*/ +const toggle = document.getElementById('nav-toggle'), +nav = document.getElementById('nav-menu'), +navClose = document.getElementById('nav-close') + +if(navClose){ + navClose.addEventListener('click', ()=>{ + nav.classList.remove('show') + }) +} -navLink.forEach(n => n.addEventListener('click', linkAction)); +/*===== REMOVE MENU MOBILE =====*/ +const navLink = document.querySelectorAll('.nav__link') -// Scroll ections active link -const sections = document.querySelectorAll('section[id]'); +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + navMenu.classList.remove('show') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) -window.addEventListener('scroll', scrollActive); +/*===== SCROLL SECTIONS ACTIVE LINK =====*/ +const sections = document.querySelectorAll('section[id]') function scrollActive(){ const scrollY = window.pageYOffset - sections.forEach(current => { + sections.forEach(current =>{ const sectionHeight = current.offsetHeight - const sectionTop = current.offsetTop - 50 + const sectionTop = current.offsetTop - 50; sectionId = current.getAttribute('id') - if(scrollY > sectionTop && scrollY <= sectionTop +sectionHeight) - { - document.querySelector('.nav__menu a[href*=' + sectionId +']').classList.add('active') - } - else - { - document.querySelector('.nav__menu a[href*=' + sectionId +']').classList.remove('active') + if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active') + }else{ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active') } }) -} \ No newline at end of file +} +window.addEventListener('scroll', scrollActive) \ No newline at end of file diff --git a/style.css b/style.css index 6196b4c..a6d6dc8 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,12 @@ /* ----------------------- Google Fonts -------------------- */ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;700;800;900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;500;600;700;800;900&display=swap'); /* ----------------------- CSS Variables ------------------- */ -:root -{ +:root { --header-height: 3rem; --nav-width: 324px; - /* font weight */ + /* Font Weights */ --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; @@ -37,14 +36,12 @@ --mb-4: 2rem; --mb-5: 2.5rem; - /* z-index */ + /* Z-Index */ --z-fixed: 100; } -@media screen and (min-width: 768px) -{ - :root - { +@media screen and (min-width: 768px) { + :root { --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; @@ -54,19 +51,16 @@ } } -/* BASE */ -*, ::before, ::after -{ +/* BASE RULES */ +*, ::before, ::after { box-sizing: border-box; } -html -{ +html { scroll-behavior: smooth; } -body -{ +body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); @@ -76,58 +70,48 @@ body line-height: 1.6; } -h1, h2, h3, p -{ +h1, h2, h3, p { margin: 0; } -h3 -{ +h3 { font-weight: var(--font-semi-bold); } -ul -{ +ul { margin: 0; padding: 0; list-style: none; } -a -{ +a { text-decoration: none; color: var(--text-color); } -img -{ +img { max-width: 100%; height: auto; display: block; } -/* Menu icon */ -.bx -{ +.bx { font-size: 1.6rem; } -/* Class CSS */ -.section -{ +/* GENERIC CLASSES */ +.section { padding: 4rem 0 2rem; } -.section-title -{ +.section-title { font-size: var(--h1-font-size); color: var(--first-color); margin-bottom: var(--mb-3); text-align: center; } -.section-subtitle -{ +.section-subtitle { display: block; font-size: var(--small-font-size); color: var(--first-color-darken); @@ -136,9 +120,8 @@ img margin-bottom: .25rem; } -/* Layout */ -.bd-grid -{ +/* GRID SETUP */ +.bd-grid { max-width: 1024px; display: grid; grid-template-columns: 100%; @@ -148,8 +131,7 @@ img margin-right: var(--mb-2); } -.l-header -{ +.l-header { width: 100%; position: fixed; top: 0; @@ -159,17 +141,15 @@ img box-shadow: 0 2px 4px rgba(0,0,0,.1); } -/* -------------------- Nav ----------------------- */ -.nav -{ +/* NAVIGATION */ +.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } -.nav__menu -{ +.nav__menu { position: fixed; top: 0; left: -100%; @@ -182,8 +162,7 @@ img transition: .5s; } -.nav__close -{ +.nav__close { position: absolute; top: 1rem; right: 1rem; @@ -192,13 +171,11 @@ img cursor: pointer; } -.nav__item -{ +.nav__item { margin-bottom: var(--mb-4); } -.nav__link -{ +.nav__link { font-size: 1rem; text-transform: uppercase; color: var(--first-color-lighten); @@ -206,39 +183,31 @@ img transition: .3s; } -.nav__link:hover -{ +.nav__link:hover { color: var(--first-color-light-dark); } -.nav__toggle -{ +.nav__toggle { color: var(--first-color-dark); font-size: 1.3rem; cursor: pointer; } -/* --------------------- show menu -------------------- */ -.show -{ +.show { left: 0; } -/* ----------------------- Active menu ----------------- */ -.active -{ +.active { color: var(--first-color-light-dark); } -/* ----------------------- Home ------------------------------ */ -.home__container -{ +/* HOME DESIGN */ +.home__container { height: calc(100vh - var(--header-height)); align-items: center; } -.home__data -{ +.home__data { display: flex; flex-direction: column; align-items: center; @@ -246,44 +215,42 @@ img text-align: center; } -.home__img -{ +.home__img { padding-top: 1.3rem; padding-left: .8rem; width: 160px; height: 160px; - background-color: var(--first-color); border-radius: 50%; overflow: hidden; margin-bottom: var(--mb-2); + display: flex; + justify-content: center; + align-items: center; } -.home__img img -{ - width: 155px; +.home__img img { + width: 100%; + height: 100%; + object-fit: cover; } -.home__title -{ +.home__title { font-size: var(--h1-font-size); color: var(--first-color); font-weight: var(--font-semi-bold); } -.home__profession -{ +.home__profession { font-size: var(--small-font-size); color: var(--first-color-dark); margin-bottom: var(--mb-5); } -.home__social -{ +.home__social { margin-bottom: 5rem; } -.home__social-link -{ +.home__social-link { display: inline-flex; background-color: var(--first-color); color: var(--first-color-lighten); @@ -294,19 +261,16 @@ img transition: .3s; } -.home__social-link:hover -{ +.home__social-link:hover { background-color: var(--first-color-dark); } -.home__button -{ +.home__button { width: 100%; } -/* ----------------------- Buttons ------------------ */ -.button -{ +/* BUTTONS */ +.button { display: inline-block; background-color: var(--first-color); color: var(--first-color-lighten); @@ -314,102 +278,89 @@ img font-weight: var(--font-semi-bold); border-radius: .5rem; transition: .3s; + border: none; + outline: none; } -.button:hover -{ +.button:hover { background-color: var(--first-color-dark); } -.button__light -{ +.button__light { background-color: var(--first-color-lighten); color: var(--first-color); } -.button__light:hover -{ +.button__light:hover { color: var(--first-color-lighten); + background-color: var(--first-color-dark); } - -/* ------------------------- About -------------------------------- */ -.about__container -{ +/* ABOUT */ +.about__container { row-gap: 2rem; } -.about__data -{ +.about__data { text-align: center; } -.about__description -{ +.about__description { margin-bottom: var(--mb-4); } -.about__img -{ +.about__img { width: 260px; border-radius: .5rem; margin: 0 auto; - background-color: var(--first-color); } -.about__information -{ - margin-bottom: var(--mb-4); +.about__info-wrapper { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.about__information-title -{ +.about__information-title { font-size: var(--h3-font-size); color: var(--first-color-dark); margin-bottom: var(--mb-2); } -.about__information-data -{ +.about__information-data { display: flex; align-items: center; padding-left: 1.5rem; margin-bottom: var(--mb-3); } -.about__information-icon -{ +.about__information-icon { font-size: 1.5rem; color: var(--first-color); margin-right: var(--mb-4); } -.about__information-subtitle -{ +.about__information-subtitle { display: block; font-weight: var(--font-semi-bold); } -.about__information-subtitle-small -{ +.about__information-subtitle-small { font-size: var(--small-font-size); } -/* -------------------------------------------- Skills ------------------------- */ -.skills__container -{ +/* SKILLS */ +.skills__container { row-gap: 2rem; } -.skills__subtitle -{ +.skills__subtitle { font-size: var(--h3-font-size); color: var(--first-color-dark); margin-bottom: var(--mb-2); } -.skills__data -{ +.skills__data { position: relative; display: flex; justify-content: space-between; @@ -417,96 +368,69 @@ img margin-bottom: var(--mb-4); } -.skills__name -{ +.skills__name { text-transform: uppercase; } -.skills__bar -{ +.skills__bar { position: absolute; bottom: -.75rem; height: .25rem; background-color: var(--first-color); } -.skills__html -{ - width: 80%; -} - -.skills__js -{ - width: 90%; -} - -.skills__react -{ - width: 70%; -} - -.skills__angular -{ - width: 60%; -} - -.skills__php -{ - width: 80%; -} - -.skills__node -{ - width: 70%; -} - -.skills__firebase -{ - width: 90%; -} - -.skills__python -{ - width: 60%; -} - -/* -------------------------------- Education ---------------------------- */ -.education__container -{ +.skills__html { width: 80%; } +.skills__js { width: 90%; } +.skills__react { width: 70%; } +.skills__angular { width: 60%; } +.skills__python { width: 80%; } +.skills__burp { width: 75%; } +.skills__drf { width: 80%; } +.skills__django { width: 70%; } +.skills__db { width: 65%; } +.skills__security { width: 80%; } +.skills__cicd { width: 85%; } +.skills__docker { width: 70%; } +.skills__azure { width: 60%; } + +/* QUALIFICATIONS (EDUCATION & EXPERIENCE) */ +.education__container, .experience__container { row-gap: 2rem; } -.education__content -{ +.education__content, .experience__content { display: grid; grid-template-columns: 1fr max-content 1fr; } -.education__year, .education__race -{ +.education__year, .education__race, +.experience__year, .experience__role { font-size: var(--h3-font-size); - mask-border: .25rem; + margin-bottom: .25rem; } -.education__university, .education__specialty -{ +.education__university, .education__specialty, +.experience__company, .experience__description { display: block; font-size: var(--smaller-font-size); } -.education__year, .education__university -{ +.education__year, .education__university, +.experience__year, .experience__company { text-align: right; } -.education__time -{ +.experience__description { + margin-top: .5rem; + line-height: 1.6; +} + +.education__time, .experience__time { padding: 0 1rem; justify-self: center; } -.education__rounder -{ +.education__rounder, .experience__rounder { position: relative; display: inline-block; width: 12px; @@ -515,8 +439,7 @@ img border-radius: 50%; } -.education__rounder::before -{ +.education__rounder::before, .experience__rounder::before { content: ''; position: absolute; transform: translate(-4px, -4px); @@ -526,8 +449,7 @@ img border-radius: 50%; } -.education__line -{ +.education__line, .experience__line { display: block; height: 90%; width: 2px; @@ -535,112 +457,89 @@ img transform: translate(5px, -4px); } -/* ------------------------------------ Services ------------------------------- */ -.services__container -{ +/* SERVICES */ +.services__container { row-gap: 2rem; } -.services__content -{ +.services__content { padding: 1.5rem .5rem; border: 2px solid var(--first-color); border-radius: .5rem; text-align: center; + transition: .5s; } -.service__icon -{ +.service__icon { font-size: 2rem; padding: .5rem; background-color: var(--first-color); color: var(--first-color-lighten); border-radius: 50%; margin-bottom: var(--mb-2); + transition: .5s; } -.services__title -{ +.services__title { font-size: 1.25rem; color: var(--first-color-dark); margin-bottom: var(--mb-1); + transition: .5s; } -.services__content, .services__icon, .services__title, .services__description -{ +.services__description { transition: .5s; } -.services__content:hover -{ +.services__content:hover { background-color: var(--first-color); } -.services__content:hover .service__icon -{ +.services__content:hover .service__icon { background-color: var(--first-color-lighten); color: var(--first-color); } -.services__content:hover .services__title -{ - color: var(--first-color-lighten); -} - -.services__content:hover .services__description -{ +.services__content:hover .services__title, +.services__content:hover .services__description { color: var(--first-color-lighten); } -/* ------------------------------------------ Project in mind ------------------------- */ -.project -{ +/* PROJECT IN MIND BAR */ +.project { background-color: var(--first-color); - padding-bottom: 0px; + padding-bottom: 2rem; } -.project__container -{ +.project__container { row-gap: 2rem; } -.project__data -{ +.project__data { text-align: center; } -.project__title, .project__description -{ +.project__title, .project__description { color: var(--first-color-lighten); } -.project__description -{ +.project__description { margin-bottom: var(--mb-4); } -.project__img -{ - width: 220px; - justify-self: center; -} - -/* ------------------------------ Works ----------------------------- */ -.works__container -{ +/* PORTFOLIO IMAGES CORES */ +.works__container { justify-items: center; row-gap: 2rem; } -.works__img -{ +.works__img { position: relative; overflow: hidden; border-radius: .5rem; } -.works__data -{ +.works__data { position: absolute; bottom: -100%; width: 100%; @@ -649,13 +548,12 @@ img flex-direction: column; justify-content: center; align-items: center; - background: #3741fa81; + background: rgba(55, 65, 250, 0.5); border-radius: .5rem; transition: .3s; } -.works__link -{ +.works__link { display: inline-flex; font-size: 1.5rem; background-color: var(--first-color-lighten); @@ -665,25 +563,157 @@ img margin-bottom: var(--mb-2); } -.works__title -{ +.works__title { font-size: var(--h2-font-size); color: var(--first-color-lighten); } -.works__img:hover .works__data -{ +.works__img:hover .works__data { bottom: 0; } -/* ----------------------------- Contact ---------------------- */ -.contact__container -{ +/* OPEN SOURCE SPECIAL FEATURE CARD */ +.works__featured { + margin-top: 2.5rem; +} + +.featured__card { + background-color: var(--first-color-lighten); + border: 1px solid var(--first-color-light-dark); + border-radius: .5rem; + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1.25rem; + box-shadow: 0 4px 12px rgba(0,0,0,0.05); +} + +.featured__header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--first-color-light-dark); + padding-bottom: 1rem; +} + +.featured__profile { + display: flex; + align-items: center; + gap: 1rem; +} + +.featured__logo { + width: 45px; + height: 45px; + border-radius: .5rem; + object-fit: cover; +} + +.featured__name { + font-size: var(--h3-font-size); + color: var(--first-color-dark); +} + +.featured__tag { + display: block; + font-size: var(--smaller-font-size); + color: #ff9800; + font-weight: var(--font-bold); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.featured__github-icon { + font-size: 1.8rem; + color: var(--text-color); + transition: .3s; +} + +.featured__github-icon:hover { + color: var(--first-color); +} + +.featured__description { + font-size: var(--normal-font-size); + line-height: 1.6; +} + +.featured__bullets { + display: grid; + grid-template-columns: 1fr; + gap: .5rem; + margin: 1rem 0; +} + +@media screen and (min-width: 568px) { + .featured__bullets { + grid-template-columns: repeat(2, 1fr); + } +} + +.featured__bullet-item { + font-size: var(--small-font-size); + display: flex; + align-items: center; + gap: .25rem; +} + +.featured__bullet-item i { + color: #4caf50; + font-size: 1.1rem; +} + +.featured__terminal { + background-color: var(--text-color); + color: var(--first-color-lighten); + border-left: 4px solid var(--first-color); + border-radius: .25rem; + padding: 1rem; + font-family: monospace; + font-size: var(--small-font-size); +} + +.terminal__comment { color: #888; } +.terminal__prompt { color: #e91e63; font-weight: var(--font-bold); } + +.featured__footer { + display: flex; + flex-direction: column; + gap: .5rem; + padding-top: 1rem; + border-top: 1px solid var(--first-color-light-dark); + font-size: var(--small-font-size); +} + +@media screen and (min-width: 568px) { + .featured__footer { + flex-direction: row; + justify-content: space-between; + align-items: center; + } +} + +.featured__footer a { + color: var(--first-color); + font-weight: var(--font-semi-bold); +} + +.footer__badge { + background-color: #e3f2fd; + color: #0d47a1; + padding: .25rem .5rem; + border-radius: .25rem; + font-weight: var(--font-bold); + font-size: var(--smaller-font-size); + align-self: flex-start; +} + +/* CONTACT */ +.contact__container { row-gap: 3rem; } -.contact__input -{ +.contact__input { width: 100%; padding: 1rem; outline: none; @@ -694,66 +724,46 @@ img border-radius: .5rem; } -.contact::placeholder -{ - color: var(--first-color-dark); - font-family: var(--body-font); - font-weight: var(--font-medium); -} - -.contact__button -{ - outline: none; - border: none; - font-family: var(--body-font); - font-size: var(--normal-font-size); +.contact__button { cursor: pointer; } -.contact__info -{ +.contact__info { margin-bottom: var(--mb-3); } -.contact__subtitle -{ +.contact__subtitle { font-size: var(--h3-font-size); color: var(--first-color-dark); margin-bottom: var(--mb-1); } -.contact__text -{ +.contact__text { display: block; padding-left: 1rem; } -/* ---------------------------------- Footer ---------------------------- */ -.footer -{ +/* FOOTER CORES */ +.footer { background-color: var(--first-color-darken); color: var(--first-color-lighten); text-align: center; } -.footer__title -{ +.footer__title { font-size: var(--h1-font-size); margin-bottom: var(--mb-2); } -.footer-description -{ +.footer-description { margin-bottom: var(--mb-2); } -.footer-social -{ - margin-bottom: 3rem; +.footer__social { + margin-bottom: 2rem; } -.footer__link -{ +.footer__link { display: inline-flex; background-color: var(--first-color-light); color: var(--first-color); @@ -764,161 +774,129 @@ img transition: .3s; } -.footer-link:hover -{ +.footer__link:hover { background-color: var(--first-color-lighten); color: var(--first-color); } -.footer__copy -{ +.footer-copy { font-size: var(--smaller-font-size); - color: var(--text-color); + opacity: 0.7; } -/* ------------------------- Media Queries for tablet screen ---------------------------- */ -@media screen and (min-width: 786px) -{ - .home__button - { +/* ------------------------- MEDIA QUERIES (TABLETS) ---------------------------- */ +@media screen and (min-width: 768px) { + .home__button { width: initial; } - .nav__menu - { + .nav__menu { width: var(--nav-width); } .about__container, .skills__container, + .experience__container, .services__container, .works__container, .contact__container, - .contact__inputs - { + .contact__inputs { grid-template-columns: repeat(2, 1fr); } - .about__img - { + .about__img { width: 160px; } - .about__data - { + .about__data { text-align: initial; } - .about__information - { + .about__information { padding-left: 4rem; } - .education__time - { + .education__time, .experience__time { padding: 0 2rem; } - .project - { + .project { background: none; } - .project__container - { + .project__container { background-color: var(--first-color); grid-template-columns: 2fr 1.2fr; - padding: 0 2rem; + padding: 2rem; border-radius: .5rem; } - .project__data - { + .project__data { padding: 1rem 0; + text-align: left; } - .project__title, .project__data - { - text-align: initial; - } - - .project__img - { - width: 230px; - align-self: flex-end; + .project__title { + text-align: left; } - .contact__inputs - { + .contact__inputs { display: grid; column-gap: 1.5rem; } - .contact__info - { + .contact__info { padding-left: 3rem; } - .footer - { + .footer { background: none; } - .footer__container - { + .footer__container { background-color: var(--first-color-darken); - padding: 3rem 0; + padding: 3rem 2rem; border-radius: .5rem; } } -/* ------------------------------ Media Query for laptop/desktop screen ------------------------- */ -@media screen and (min-width: 1024px) -{ - body - { +/* ------------------------------ MEDIA QUERIES (DESKTOPS) ------------------------- */ +@media screen and (min-width: 1024px) { + body { margin: 0; padding-left: var(--nav-width); } - .l-header - { + .l-header { width: 0; } - .nav__toggle, .nav__logo, .nav__close - { + .nav__toggle, .nav__logo, .nav__close { display: none; } - .nav__menu - { + .nav__menu { left: 0; } - .home__container - { + .home__container { height: 100vh; } - .section - { + .section { padding: 3rem 0 2rem; } - .bd-grid - { + .bd-grid { margin-left: auto; margin-right: auto; } - .about__img - { + .about__img { width: 200px; } - .services__container, .works__container - { - grid-template-columns: repeat(3,1fr); + .services__container, .works__container { + grid-template-columns: repeat(3, 1fr); } } \ No newline at end of file