Key Features
Bento Grid Layout:
- Uses CSS Grid to create a responsive bento-style layout
- 6 distinct sections arranged in a visually pleasing grid
Responsive Design:
- Adapts to desktop, tablet, and mobile screens
- Grid reflows at breakpoints to maintain usability
- On mobile, switches to single column layout
Dark/Light Mode Toggle:
- JavaScript-powered theme switcher
- Saves preference to localStorage
- Respects system preference by default
All Sections Visible Without Scrolling:
- Fixed viewport height (100vh) on desktop/tablet
- Auto height with scrolling only on mobile
Interactive Elements:
- Hover effects on cards and buttons
- Project cards with hover animations
- Social media links with hover effects
Modern Styling:
- Clean typography with Poppins font
- Font Awesome icons throughout
- Subtle shadows and smooth transitions
- Consistent color scheme with CSS variables
The portfolio includes all required sections (profile, about, skills, projects, contact) plus an additional stats section, all arranged in a visually appealing bento grid that works across all device sizes.
:root {
--primary-color: #4361ee;
--secondary-color: #3f37c9;
--text-color: #333;
--bg-color: #f8f9fa;
--card-bg: #fff;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
.dark-mode {
--primary-color: #4895ef;
--secondary-color: #4361ee;
--text-color: #f8f9fa;
--bg-color: #121212;
--card-bg: #1e1e1e;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
height: 100vh;
width: 100vw;
overflow: hidden;
transition: var(--transition);
}
.container {
height: 100vh;
width: 100vw;
padding: 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 20px;
}
.card {
background-color: var(--card-bg);
border-radius: 15px;
padding: 20px;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.profile-card {
grid-column: 1 / 2;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--primary-color);
margin-bottom: 20px;
}
.profile-card h1 {
font-size: 1.5rem;
margin-bottom: 5px;
color: var(--primary-color);
}
.profile-card h2 {
font-size: 1rem;
font-weight: 400;
margin-bottom: 20px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-links a {
color: var(--text-color);
font-size: 1.2rem;
transition: var(--transition);
}
.social-links a:hover {
color: var(--primary-color);
transform: scale(1.2);
}
.about-card {
grid-column: 2 / 4;
grid-row: 1 / 2;
}
.about-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.about-card p {
line-height: 1.6;
}
.skills-card {
grid-column: 4 / 5;
grid-row: 1 / 3;
}
.skills-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.skills-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.skill-item {
display: flex;
align-items: center;
gap: 10px;
}
.skill-icon {
font-size: 1.5rem;
color: var(--primary-color);
}
.projects-card {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.projects-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
height: calc(100% - 40px);
}
.project {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
transition: var(--transition);
cursor: pointer;
overflow: hidden;
position: relative;
}
.project:hover {
transform: scale(1.05);
}
.project::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
transition: var(--transition);
}
.project:hover::before {
opacity: 1;
}
.contact-card {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.contact-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--primary-color);
}
.contact-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
}
.contact-icon {
font-size: 1.2rem;
color: var(--primary-color);
}
.stats-card {
grid-column: 3 / 5;
grid-row: 3 / 4;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
background-color: rgba(67, 97, 238, 0.1);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
.stat-label {
font-size: 0.8rem;
opacity: 0.8;
}
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
background: var(--card-bg);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow);
transition: var(--transition);
z-index: 100;
}
.theme-toggle:hover {
transform: scale(1.1);
}
.theme-icon {
font-size: 1.2rem;
color: var(--primary-color);
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.profile-card {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
.about-card {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.skills-card {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.projects-card {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.contact-card {
grid-column: 1 / 2;
grid-row: 4 / 5;
}
.stats-card {
grid-column: 2 / 3;
grid-row: 4 / 5;
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto auto;
gap: 15px;
padding: 15px;
height: auto;
min-height: 100vh;
overflow-y: auto;
}
.card {
grid-column: 1 / 2 !important;
grid-row: auto !important;
}
.projects-grid {
grid-template-columns: 1fr;
}
.skills-list {
grid-template-columns: 1fr;
}
.stats-card {
grid-template-columns: 1fr;
}
}
// Theme toggle functionality
const themeToggle = document.getElementById('themeToggle');
const themeIcon = document.querySelector('.theme-icon');
const body = document.body;
// Check for saved theme preference or use preferred color scheme
const savedTheme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
if (savedTheme === 'dark') {
body.classList.add('dark-mode');
themeIcon.classList.replace('fa-moon', 'fa-sun');
}
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
themeIcon.classList.replace('fa-moon', 'fa-sun');
localStorage.setItem('theme', 'dark');
} else {
themeIcon.classList.replace('fa-sun', 'fa-moon');
localStorage.setItem('theme', 'light');
}
});
// Mobile height adjustment to prevent scrolling
function adjustHeight() {
if (window.innerWidth <= 768) {
document.body.style.overflowY = 'auto';
document.querySelector('.container').style.height = 'auto';
document.querySelector('.container').style.minHeight = '100vh';
} else {
document.body.style.overflowY = 'hidden';
document.querySelector('.container').style.height = '100vh';
document.querySelector('.container').style.minHeight = 'auto';
}
}
// Initial check
adjustHeight();
// Add resize listener
window.addEventListener('resize', adjustHeight);
إرسال تعليق
Thank you
Learning robo team