Skip to content

Design Revamp: Modern Personality with Enhanced Theming #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
frogr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Design Revamp: Modern Personality with Enhanced Theming #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 94 additions & 9 deletions app/assets/stylesheets/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,33 @@
--border-color: #374151; /* gray-700 */
--accent-color: #eab308; /* yellow-500 */
--accent-hover: #facc15; /* yellow-400 */
--pill-bg: #374151; /* gray-700 */
--pill-text: #eab308; /* yellow-500 */
--pill-bg-active: #eab308; /* yellow-500 */
--pill-text-active: #000000;
--glass-accent-1: rgba(100, 150, 255, 0.1);
--glass-accent-2: rgba(130, 80, 220, 0.05);
}

/* CSS Variables - Light Theme */
:root.light-theme {
--bg-primary: #ffffff;
--bg-secondary: #f3f4f6; /* gray-100 */
--bg-card: #f9fafb; /* gray-50 */
--text-primary: #111827; /* gray-900 */
--text-secondary: #4b5563; /* gray-600 */
--text-muted: #6b7280; /* gray-500 */
--border-color: #e5e7eb; /* gray-200 */
--accent-color: #eab308; /* yellow-500 */
--accent-hover: #d97706; /* yellow-600 */
--bg-primary: #eae4cf; /* toned down from f4f1e6 */
--bg-secondary: #e3dbc1; /* less light, more warm fade */
--bg-card: #f2ecda; /* card paper tone */
--text-primary: #3a372f; /* inkier, softened */
--text-secondary: #5e5746;
--text-muted: #807b70;
--border-color: #d0c8b4; /* subtle sepia-gray */
--accent-color: #c28b00;
--accent-hover: #a77400;
--pill-bg: #e5ddc7;
--pill-text: #a77400;
--pill-bg-active: #c28b00;
--pill-text-active: #f2ecda;
--glass-accent-1: rgba(160, 140, 100, 0.05);
--glass-accent-2: rgba(140, 110, 80, 0.03);
--sidebar-bg: #e8e1ca;
--sidebar-text: #3a372f;
}

/* Set dark theme as default */
Expand All @@ -37,6 +51,12 @@
--border-color: #374151;
--accent-color: #eab308;
--accent-hover: #facc15;
--pill-bg: #374151;
--pill-text: #eab308;
--pill-bg-active: #eab308;
--pill-text-active: #000000;
--glass-accent-1: rgba(100, 150, 255, 0.1);
--glass-accent-2: rgba(130, 80, 220, 0.05);
}

/* Card Styles */
Expand Down Expand Up @@ -75,6 +95,71 @@
text-decoration: underline;
}

/* Pill Styles */
.theme-pill {
background-color: var(--pill-bg);
color: var(--pill-text);
padding: 0.25rem 0.75rem;
border-radius: 9999px; /* rounded-full */
font-size: 0.875rem;
transition: all 0.2s ease;
}

.theme-pill.active {
background-color: var(--pill-bg-active);
color: var(--pill-text-active);
}

.theme-pill:hover {
opacity: 0.9;
}

/* Glass Effect Utilities */
.glass-effect {
position: relative;
overflow: hidden;
}

.glass-effect::before {
content: '';
position: absolute;
top: -10px;
right: -10px;
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--glass-accent-1);
filter: blur(15px);
animation: pulse-slow 12s infinite, float 15s ease-in-out infinite;
z-index: 0;
}

.glass-effect::after {
content: '';
position: absolute;
bottom: -20px;
left: -20px;
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--glass-accent-2);
filter: blur(20px);
animation: pulse-slow 15s infinite reverse;
z-index: 0;
}

@keyframes pulse-slow {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}

@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
25% { transform: translateY(-10px) translateX(5px); }
50% { transform: translateY(0) translateX(10px); }
75% { transform: translateY(10px) translateX(5px); }
}

/* Legacy classes for backward compatibility */
.dark-card {
background-color: var(--bg-card);
Expand Down
38 changes: 36 additions & 2 deletions app/javascript/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ import MarkdownRenderer from './components/MarkdownRenderer'
import GameCard from './components/GameCard'
import GamesGrid from './components/GamesGrid'
import AboutMe from './components/AboutMe'
import ThemeLayout from './components/DarkModeLayout' // Renamed but kept same file
import ContactInfo from './components/ContactInfo'
import FunProjects from './components/FunProjects'
import ThemeLayout from './components/ThemeLayout' // Use the new ThemeLayout component
import ThemeProvider from './components/ThemeProvider'
import ThemeToggle from './components/ThemeToggle'

Expand All @@ -25,6 +27,8 @@ const COMPONENTS = {
'GamesGrid': GamesGrid,
'WorkExperience': WorkExperience,
'AboutMe': AboutMe,
'ContactInfo': ContactInfo,
'FunProjects': FunProjects,
'ThemeLayout': ThemeLayout, // New name
'DarkModeLayout': ThemeLayout, // For backwards compatibility
'ThemeProvider': ThemeProvider,
Expand All @@ -43,8 +47,32 @@ window.sidebarEvents = {

// No need for margin adjustments with grid layout

// Create a global ThemeProvider instance that exists outside
// of the component lifecycle to ensure theme is applied immediately
const initializeThemeProvider = () => {
// Check if we already have a ThemeProvider
if (!window.themeProviderRoot) {
// Create a div to hold the ThemeProvider
const themeProviderContainer = document.createElement('div')
themeProviderContainer.id = 'theme-provider-root'
document.body.appendChild(themeProviderContainer)

// Create the root and render the ThemeProvider
const themeProviderRoot = createRoot(themeProviderContainer)
themeProviderRoot.render(<ThemeProvider />)
window.themeProviderRoot = themeProviderRoot
console.log('Global ThemeProvider initialized')
}
}

// Initialize ThemeProvider immediately
initializeThemeProvider()

document.addEventListener("turbo:load", () => {
const reactComponents = document.querySelectorAll("[data-react-component]")
// Ensure ThemeProvider is initialized on each page load
initializeThemeProvider()

const reactComponents = document.querySelectorAll("[data-react-component]")

reactComponents.forEach(component => {
const componentName = component.dataset.reactComponent
Expand All @@ -71,6 +99,12 @@ document.addEventListener("turbo:load", () => {
}
}

// Skip rendering another ThemeProvider since we have a global one
if (componentName === 'ThemeProvider') {
console.log('Skipping additional ThemeProvider render because we have a global one')
return
}

// Check if we already have a root for this container
if (!roots.has(component)) {
const root = createRoot(component)
Expand Down
67 changes: 15 additions & 52 deletions app/javascript/components/AboutMe.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,14 @@ import { ThemeContext } from './ThemeProvider';
import ResponsiveImage from './ResponsiveImage';

const AboutMe = () => {
// Get theme context if available
let theme = 'dark'; // Default to dark if context not available
// Use ThemeContext via useContext hook
try {
const themeContext = useContext(ThemeContext);
if (themeContext) {
theme = themeContext.theme;
}
// This component uses CSS variables so we don't need to track theme state
// Just ensure ThemeContext is properly initialized
useContext(ThemeContext);
} catch (e) {
console.log('ThemeContext not available, using default theme');
}

const isDark = theme === 'dark';
// Placeholder data - replace with your actual data
const skills = [
{ name: 'Full Stack Web Development' },
Expand Down Expand Up @@ -56,28 +52,18 @@ const AboutMe = () => {
<div className="max-w-4xl mx-auto">
{/* Domain name header */}
<div
className="text-center text-2xl font-mono mb-12 rounded-md p-4 glass-panel"
className="text-center text-2xl font-mono mb-12 rounded-md p-4 theme-card glass-effect"
>
austn.net
</div>

{/* Hero Section */}
<div
className="rounded-md p-8 mb-12 glass-morphism"
>
<div className="theme-card glass-effect rounded-md p-8 mb-12">
{/* Decorative elements to enhance glass effect */}
<div
className="absolute w-32 h-32 rounded-full blur-xl -top-10 -right-10 bg-blue-500/10"
style={{ animation: 'pulse-slow 8s infinite, float 15s ease-in-out infinite' }}
></div>
<div
className="absolute w-24 h-24 rounded-full blur-xl bottom-10 -left-10 bg-purple-500/10"
style={{ animation: 'pulse-slow 10s infinite, float 12s ease-in-out infinite reverse' }}
></div>
<div className="flex flex-col items-center text-center">
<div
className="w-32 h-32 rounded-full flex items-center justify-center mb-6"
style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
style={{ backgroundColor: 'var(--pill-bg)' }}
>
<ResponsiveImage
src="https://i.ibb.co/TBvNqtT1/Chat-GPT-Image-Mar-27-2025-09-07-30-PM.png"
Expand All @@ -96,8 +82,7 @@ const AboutMe = () => {
{skills.map((skill) => (
<span
key={skill.name}
className="px-3 py-1 rounded-full text-sm"
style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
className="theme-pill"
>
{skill.name}
</span>
Expand All @@ -107,17 +92,7 @@ const AboutMe = () => {
</div>

{/* About Me Section */}
<div
className="rounded-md p-8 mb-12 glass-panel relative"
>
{/* Subtle decorative accent for glass panel */}
<div
className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-md z-0"
>
<div
className="absolute -top-20 -left-20 w-40 h-40 rounded-full blur-lg bg-teal-500/5"
></div>
</div>
<div className="theme-card glass-effect rounded-md p-8 mb-12 relative">
<h2 className="text-2xl font-semibold mb-6">About Me</h2>
<p style={{ color: 'var(--text-secondary)' }}>
I'm a passionate full-stack developer with expertise in React and Ruby on Rails.
Expand All @@ -127,9 +102,7 @@ const AboutMe = () => {
</div>

{/* Featured Post */}
<div
className="rounded-md p-8 mb-12 glass-morphism"
>
<div className="theme-card glass-effect rounded-md p-8 mb-12">
{/* Decorative elements for featured post */}
<div
className="absolute w-40 h-40 rounded-full blur-xl -top-5 right-10 bg-pink-500/10"
Expand All @@ -144,7 +117,7 @@ const AboutMe = () => {
<div className="md:w-1/3">
<div
className="aspect-video rounded-md overflow-hidden"
style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
style={{ backgroundColor: 'var(--pill-bg)' }}
>
<div className="w-full h-full flex items-center justify-center">
<ResponsiveImage
Expand All @@ -165,7 +138,7 @@ const AboutMe = () => {
<p className="mb-4" style={{ color: 'var(--text-secondary)' }}>{featuredPost.excerpt}</p>
<a
href={featuredPost.url}
className="glass-button inline-flex items-center"
className="theme-button inline-flex items-center"
>
Read More
<svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
Expand All @@ -177,17 +150,7 @@ const AboutMe = () => {
</div>

{/* Favorite Items */}
<div
className="rounded-md p-8 mb-12 glass-panel relative"
>
{/* Subtle decorative accent for glass panel */}
<div
className="absolute top-0 left-0 w-full h-full overflow-hidden rounded-md z-0"
>
<div
className="absolute -bottom-20 -right-20 w-40 h-40 rounded-full blur-lg bg-indigo-500/5"
></div>
</div>
<div className="theme-card glass-effect rounded-md p-8 mb-12 relative">
<h2 className="text-2xl font-semibold mb-6">My Favorite Things</h2>

{favoriteItems.map((category) => (
Expand All @@ -200,11 +163,11 @@ const AboutMe = () => {
href={item.url}
target="_blank"
rel="noopener noreferrer"
className="group flex items-start p-4 rounded-md transition-all glass-panel"
className="group flex items-start p-4 rounded-md transition-all theme-card glass-effect"
>
<div
className="mr-4 w-12 h-12 rounded-md flex items-center justify-center"
style={{ backgroundColor: isDark ? '#374151' : '#f3f4f6' }}
style={{ backgroundColor: 'var(--pill-bg)' }}
>
{/* Replace with actual image */}
<span style={{ color: 'var(--text-muted)' }} className="text-xs">{item.name.substring(0, 2)}</span>
Expand Down
Loading
Loading