Skip to content

Commit e52b97d

Browse files
dconcodconco
committed
Refactor code structure for improved readability and maintainability
1 parent 7e32715 commit e52b97d

10 files changed

+321
-7
lines changed

‎css/style.css‎

Lines changed: 220 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
padding: 0;
44
box-sizing: border-box;
55
outline: none;
6-
tap-highlight-color: transparent;
76
-webkit-tap-highlight-color: transparent;
87
}
98

@@ -150,7 +149,7 @@ nav .container {
150149
overflow: hidden;
151150
background:
152151
linear-gradient(rgba(15, 15, 35, 0.7), rgba(26, 26, 62, 0.7)),
153-
url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')
152+
url('/images/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop')
154153
center/cover;
155154
}
156155

@@ -278,7 +277,7 @@ nav .container {
278277
padding: 100px 0;
279278
background:
280279
linear-gradient(rgba(26, 26, 62, 0.9), rgba(26, 26, 62, 0.9)),
281-
url('https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2340&auto=format&fit=crop')
280+
url('/images/photo-1518770660439-4636190af475')
282281
center/cover;
283282
}
284283

@@ -370,7 +369,7 @@ nav .container {
370369
padding: 100px 0;
371370
background:
372371
linear-gradient(rgba(15, 15, 35, 0.95), rgba(26, 26, 62, 0.95)),
373-
url('https://images.unsplash.com/photo-1676299081847-824916de030a?q=80&w=2340&auto=format&fit=crop')
372+
url('/images/photo-1676299081847-824916de030a')
374373
center/cover;
375374
text-align: center;
376375
position: relative;
@@ -564,7 +563,7 @@ nav .container {
564563
padding: 100px 0;
565564
background:
566565
linear-gradient(rgba(26, 26, 62, 0.9), rgba(15, 15, 35, 0.9)),
567-
url('https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=2340&auto=format&fit=crop')
566+
url('/images/photo-1586281380349-632531db7ed4')
568567
center/cover;
569568
text-align: center;
570569
}
@@ -733,7 +732,7 @@ nav .container {
733732
padding: 100px 0;
734733
background:
735734
linear-gradient(rgba(15, 15, 35, 0.9), rgba(15, 15, 35, 0.9)),
736-
url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2340&auto=format&fit=crop')
735+
url('/images/photo-1551288049-bebda4e38f71')
737736
center/cover;
738737
}
739738

@@ -826,12 +825,199 @@ nav .container {
826825
color: #00d4aa;
827826
}
828827

828+
/* Portfolios Section */
829+
.portfolios {
830+
padding: 100px 0;
831+
background:
832+
linear-gradient(rgba(26, 26, 62, 0.9), rgba(15, 15, 35, 0.9)),
833+
url('/images/photo-1605379399642-870262d3d051')
834+
center/cover;
835+
position: relative;
836+
}
837+
838+
.portfolios::before {
839+
content: '';
840+
position: absolute;
841+
top: 0;
842+
left: 0;
843+
right: 0;
844+
bottom: 0;
845+
background: radial-gradient(
846+
circle at 20% 30%,
847+
rgba(100, 255, 218, 0.08) 0%,
848+
transparent 50%
849+
),
850+
radial-gradient(
851+
circle at 80% 70%,
852+
rgba(0, 212, 170, 0.06) 0%,
853+
transparent 50%
854+
);
855+
pointer-events: none;
856+
z-index: 0;
857+
}
858+
859+
.portfolios .container {
860+
position: relative;
861+
z-index: 1;
862+
}
863+
864+
.portfolios-intro {
865+
text-align: center;
866+
font-size: 1.1em;
867+
color: #8892b0;
868+
margin-bottom: 50px;
869+
max-width: 700px;
870+
margin-left: auto;
871+
margin-right: auto;
872+
line-height: 1.8;
873+
}
874+
875+
.portfolios-grid {
876+
display: grid;
877+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
878+
gap: 30px;
879+
margin-top: 40px;
880+
}
881+
882+
.portfolio-item {
883+
background: rgba(26, 26, 62, 0.6);
884+
border-radius: 15px;
885+
overflow: hidden;
886+
border: 1px solid rgba(100, 255, 218, 0.15);
887+
transition: all 0.3s ease;
888+
position: relative;
889+
backdrop-filter: blur(10px);
890+
}
891+
892+
.portfolio-item::before {
893+
content: '';
894+
position: absolute;
895+
top: 0;
896+
left: 0;
897+
right: 0;
898+
height: 3px;
899+
background: linear-gradient(90deg, #64ffda, #00d4aa);
900+
transform: scaleX(0);
901+
transition: transform 0.3s ease;
902+
z-index: 2;
903+
}
904+
905+
.portfolio-item:hover::before {
906+
transform: scaleX(1);
907+
}
908+
909+
.portfolio-item:hover {
910+
transform: translateY(-8px);
911+
border-color: rgba(100, 255, 218, 0.4);
912+
box-shadow:
913+
0 20px 40px rgba(0, 0, 0, 0.4),
914+
0 0 30px rgba(100, 255, 218, 0.2);
915+
}
916+
917+
.portfolio-image {
918+
position: relative;
919+
overflow: hidden;
920+
aspect-ratio: 16 / 10;
921+
background: rgba(15, 15, 35, 0.8);
922+
}
923+
924+
.portfolio-image img {
925+
width: 100%;
926+
height: 100%;
927+
object-fit: cover;
928+
transition: all 0.3s ease;
929+
border-bottom: 1px solid rgba(100, 255, 218, 0.1);
930+
}
931+
932+
.portfolio-item:hover .portfolio-image img {
933+
opacity: 0.7;
934+
transform: scale(1.05);
935+
}
936+
937+
.portfolio-overlay {
938+
position: absolute;
939+
top: 0;
940+
left: 0;
941+
right: 0;
942+
bottom: 0;
943+
background: linear-gradient(
944+
135deg,
945+
rgba(100, 255, 218, 0.9),
946+
rgba(0, 212, 170, 0.9)
947+
);
948+
display: flex;
949+
align-items: center;
950+
justify-content: center;
951+
opacity: 0;
952+
transition: opacity 0.3s ease;
953+
backdrop-filter: blur(5px);
954+
}
955+
956+
.portfolio-item:hover .portfolio-overlay {
957+
opacity: 1;
958+
}
959+
960+
.portfolio-link {
961+
padding: 14px 32px;
962+
background: rgba(15, 15, 35, 0.95);
963+
color: #64ffda;
964+
text-decoration: none;
965+
border-radius: 8px;
966+
font-weight: 700;
967+
font-size: 1em;
968+
display: inline-flex;
969+
align-items: center;
970+
gap: 10px;
971+
transition: all 0.3s ease;
972+
border: 2px solid #64ffda;
973+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
974+
}
975+
976+
.portfolio-link:hover {
977+
transform: scale(1.08);
978+
box-shadow: 0 12px 30px rgba(100, 255, 218, 0.4);
979+
background: #0f0f23;
980+
text-shadow: 0 0 10px rgba(100, 255, 218, 0.6);
981+
}
982+
983+
.portfolio-link i {
984+
transition: transform 0.3s ease;
985+
}
986+
987+
.portfolio-link:hover i {
988+
transform: translateX(5px);
989+
}
990+
991+
.portfolio-info {
992+
padding: 25px;
993+
background: rgba(15, 15, 35, 0.4);
994+
}
995+
996+
.portfolio-info h3 {
997+
font-size: 1.3em;
998+
margin-bottom: 12px;
999+
font-weight: 700;
1000+
color: #64ffda;
1001+
transition: color 0.3s ease;
1002+
}
1003+
1004+
.portfolio-item:hover .portfolio-info h3 {
1005+
color: #00d4aa;
1006+
text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
1007+
}
1008+
1009+
.portfolio-info p {
1010+
color: #8892b0;
1011+
line-height: 1.7;
1012+
font-size: 0.95em;
1013+
}
1014+
8291015
/* Contact Section */
8301016
.contact {
8311017
padding: 100px 0;
8321018
background:
8331019
linear-gradient(rgba(26, 26, 62, 0.9), rgba(26, 26, 62, 0.9)),
834-
url('https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?q=80&w=2341&auto=format&fit=crop')
1020+
url('/images/photo-1517430816045-df4b7de11d1d?q=80&w=2341&auto=format&fit=crop')
8351021
center/cover;
8361022
text-align: center;
8371023
}
@@ -1021,6 +1207,33 @@ footer p {
10211207
padding: 16px 30px;
10221208
font-size: 1em;
10231209
}
1210+
1211+
.portfolios-grid {
1212+
grid-template-columns: 1fr;
1213+
gap: 25px;
1214+
}
1215+
1216+
.portfolios-intro {
1217+
font-size: 1em;
1218+
margin-bottom: 40px;
1219+
}
1220+
1221+
.portfolio-item {
1222+
margin: 0 10px;
1223+
}
1224+
1225+
.portfolio-info {
1226+
padding: 20px;
1227+
}
1228+
1229+
.portfolio-info h3 {
1230+
font-size: 1.2em;
1231+
}
1232+
1233+
.portfolio-link {
1234+
padding: 12px 28px;
1235+
font-size: 0.95em;
1236+
}
10241237
}
10251238

10261239
/* Animations */

‎images/photo-1517430816045-df4b7de11d1d‎

269 KB
Binary file not shown.

‎images/photo-1518770660439-4636190af475‎

466 KB
Binary file not shown.

‎images/photo-1551288049-bebda4e38f71‎

158 KB
Binary file not shown.

‎images/photo-1586281380349-632531db7ed4‎

211 KB
Binary file not shown.

‎images/photo-1605379399642-870262d3d051‎

206 KB
Binary file not shown.

‎images/photo-1639762681057-408e52192e55‎

53.8 KB
Binary file not shown.

‎images/photo-1676299081847-824916de030a‎

63.7 KB
Binary file not shown.

‎index.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@
179179
<li><a href="#ai-bot">AI Bot</a></li>
180180
<li><a href="#resume">Resume</a></li>
181181
<li><a href="#projects">Projects</a></li>
182+
<li><a href="#portfolios">Portfolios</a></li>
182183
<li><a href="#contact">Contact</a></li>
183184
</ul>
184185
</div>
@@ -477,6 +478,98 @@ <h3>Mobile Task Manager</h3>
477478
</div>
478479
</section>
479480

481+
<section id="portfolios" class="portfolios">
482+
<div class="container">
483+
<h2 class="section-title">My Portfolio Designs</h2>
484+
<p class="portfolios-intro">
485+
I've created multiple portfolio variations, each showcasing different aspects of my work and expertise.
486+
Explore them to see my versatility in design and development.
487+
</p>
488+
<div class="portfolios-grid">
489+
<div class="portfolio-item">
490+
<div class="portfolio-image">
491+
<img
492+
src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/portfolios/dconco.tech.png"
493+
alt="dconco.tech Portfolio"
494+
/>
495+
<div class="portfolio-overlay">
496+
<a
497+
href="https://www.dconco.tech"
498+
class="portfolio-link"
499+
target="_blank"
500+
rel="noopener noreferrer"
501+
>
502+
<span>View Live</span>
503+
<i class="fas fa-arrow-right"></i>
504+
</a>
505+
</div>
506+
</div>
507+
<div class="portfolio-info">
508+
<h3>dconco.tech</h3>
509+
<p>
510+
Friendly and approachable portfolio featuring my AI WhatsApp bot,
511+
resume download, and vibrant colorful galaxy design.
512+
</p>
513+
</div>
514+
</div>
515+
516+
<div class="portfolio-item">
517+
<div class="portfolio-image">
518+
<img
519+
src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/portfolios/dconco.vercel.app.png"
520+
alt="dconco.vercel.app Portfolio"
521+
/>
522+
<div class="portfolio-overlay">
523+
<a
524+
href="https://dconco.vercel.app"
525+
class="portfolio-link"
526+
target="_blank"
527+
rel="noopener noreferrer"
528+
>
529+
<span>View Live</span>
530+
<i class="fas fa-arrow-right"></i>
531+
</a>
532+
</div>
533+
</div>
534+
<div class="portfolio-info">
535+
<h3>dconco.vercel.app</h3>
536+
<p>
537+
Professional showcase with detailed project descriptions,
538+
comprehensive work history, and modern clean design.
539+
</p>
540+
</div>
541+
</div>
542+
543+
<div class="portfolio-item">
544+
<div class="portfolio-image">
545+
<img
546+
src="https://raw.githubusercontent.com/dconco/dconco/refs/heads/main/portfolios/dconco.netlify.app.png"
547+
alt="dconco.netlify.app Portfolio"
548+
/>
549+
<div class="portfolio-overlay">
550+
<a
551+
href="https://dconco.netlify.app"
552+
class="portfolio-link"
553+
target="_blank"
554+
rel="noopener noreferrer"
555+
>
556+
<span>View Live</span>
557+
<i class="fas fa-arrow-right"></i>
558+
</a>
559+
</div>
560+
</div>
561+
<div class="portfolio-info">
562+
<h3>dconco.netlify.app</h3>
563+
<p>
564+
Backend engineer focus emphasizing scalable applications,
565+
system architecture, and dark purple tech aesthetic.
566+
</p>
567+
</div>
568+
</div>
569+
</div>
570+
</div>
571+
</section>
572+
480573
<section id="contact" class="contact">
481574
<div class="container">
482575
<h2 class="section-title">Let's Work Together</h2>

0 commit comments

Comments
 (0)