Freelancer Portfolio
Avada Freelancer Template
Making the digital world a beautiful place
Graphic designer & illustrator specializing in high-end brand identities, digital design, and artistic artwork assets.
🎨
Branding & Identity
Creating unique logos, brand guidelines, and visual assets that speak clearly to your target audience.
💻
Web Design
Designing modern, intuitive, and conversion-focused user interfaces optimized for all devices.
✒️
Illustration
Custom vector illustrations, digital artwork, and bespoke graphics tailored for editorial or commercial use.
Abstract Brand Concept
Branding / Illustration
Modern E-Commerce UI
Web Design
Editorial Magazine Art
Illustration
About Me
Hello! I am a passionate independent creator with over a decade of experience navigating the intersection of art, technology, and strategic marketing.
I thrive on turning complex problems into elegant, simple, and aesthetically beautiful visual solutions that help brands connect authentically with their users.
Let’s Work Together
2. The CSS Stylesheet (style.css)
Save this file as style.css in the exact same folder as your HTML file. This handles the modern layout, color palette (deep slate, clean whites, and bright primary accents), spacing, and responsive behaviors.
CSS
/* Base Resets & Variables */
:root {
–primary-color: #2b5aed;
–text-dark: #1e2229;
–text-muted: #5c6475;
–bg-light: #f4f6fa;
–bg-white: #ffffff;
–border-radius: 12px;
–transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: ‘Inter’, sans-serif;
color: var(–text-dark);
background-color: var(–bg-white);
line-height: 1.6;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
/* Typography & Global Elements */
h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; }
h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; }
p { color: var(–text-muted); margin-bottom: 1.5rem; font-size: 1.05rem; }
.section-header {
text-align: center;
max-width: 600px;
margin: 0 auto 4rem auto;
}
/* Buttons */
.btn {
display: inline-block;
padding: 0.8rem 2rem;
font-weight: 600;
border-radius: var(–border-radius);
transition: var(–transition);
cursor: pointer;
border: none;
}
.btn-primary { background-color: var(–primary-color); color: #fff; }
.btn-primary:hover { background-color: #1a43c7; transform: translateY(-2px); }
.btn-secondary { background-color: var(–bg-light); color: var(–text-dark); margin-left: 1rem; }
.btn-secondary:hover { background-color: #e2e7f3; transform: translateY(-2px); }
/* Navigation Bar */
.navbar {
padding: 1.5rem 0;
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(–text-dark);
}
.logo span { color: var(–primary-color); }
.nav-links a {
margin-left: 2rem;
font-weight: 600;
font-size: 0.95rem;
color: var(–text-muted);
transition: var(–transition);
}
.nav-links a:hover { color: var(–text-dark); }
.nav-links .btn-nav {
background-color: var(–text-dark);
color: #fff;
padding: 0.6rem 1.5rem;
border-radius: var(–border-radius);
}
.nav-links .btn-nav:hover { background-color: var(–primary-color); color: #fff; }
/* Hero Section */
.hero {
padding: 6rem 0;
background: linear-gradient(180deg, rgba(43,90,237,0.03) 0%, rgba(255,255,255,0) 100%);
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.subtitle {
display: inline-block;
color: var(–primary-color);
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.image-placeholder {
width: 100%;
height: 450px;
background-color: #eef2f7;
border-radius: 40px 10px 40px 10px; /* Stylized geometric cuts mimicking Avada style */
position: relative;
}
/* Services Section */
.services { padding: 6rem 0; background-color: var(–bg-light); }
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.service-card {
background-color: var(–bg-white);
padding: 3rem 2rem;
border-radius: var(–border-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
transition: var(–transition);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.service-card .icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
/* Portfolio Section */
.portfolio { padding: 6rem 0; }
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.portfolio-item {
border-radius: var(–border-radius);
overflow: hidden;
background-color: var(–bg-light);
transition: var(–transition);
}
.portfolio-img {
height: 300px;
background-color: #cbd5e1; /* Base fill */
transition: var(–transition);
}
/* Decorative gradient stand-ins for live images */
.bg-project-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-project-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.bg-project-3 { background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); }
.portfolio-item:hover .portfolio-img {
transform: scale(1.03);
}
.portfolio-info {
padding: 1.5rem;
background-color: var(–bg-white);
}
.portfolio-info h4 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.portfolio-info span { font-size: 0.9rem; color: var(–text-muted); }
/* About Section */
.about { padding: 6rem 0; background-color: var(–bg-light); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.image-placeholder.square {
height: 400px;
border-radius: var(–border-radius);
background: linear-gradient(45deg, #e2e8f0, #cbd5e1);
}
/* Contact Section */
.contact { padding: 6rem 0; }
.contact-box {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.contact-form {
margin-top: 3rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 1rem;
border-radius: var(–border-radius);
border: 1px solid #e2e8f0;
font-family: inherit;
font-size: 1rem;
background-color: var(–bg-light);
outline: none;
transition: var(–transition);
}
.form-group input:focus, .form-group textarea:focus {
border-color: var(–primary-color);
background-color: var(–bg-white);
box-shadow: 0 0 0 4px rgba(43,90,237,0.1);
}
/* Footer */
footer {
padding: 3rem 0;
border-top: 1px solid #e2e8f0;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.footer-socials a {
margin-left: 1.5rem;
font-weight: 600;
color: var(–text-muted);
transition: var(–transition);
}
.footer-socials a:hover { color: var(–primary-color); }
/* Responsive Adjustments */
@media (max-width: 768px) {
.hero-grid, .about-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 3rem;
}
.hero-image { order: -1; }
.hero-buttons { display: flex; justify-content: center; }
h1 { font-size: 2.25rem; }
.nav-links { display: none; } /* Standard simplification for mobile code */
}