Skip to content

Commit 9d8738e

Browse files
Code-JLCode-JL
committed
Added 2 projects and updated inventory manager project page
1 parent fe17996 commit 9d8738e

File tree

7 files changed

+386
-0
lines changed

7 files changed

+386
-0
lines changed

‎projects/dna-sequence-analyzer copy/about.css‎

Whitespace-only changes.

‎projects/dna-sequence-analyzer copy/about.html‎

Whitespace-only changes.

‎projects/dna-sequence-analyzer/about.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/* Project Styling */
2+
.project img {
3+
width: 70%;
4+
border-radius: 5px;
5+
margin-bottom: 15px;
6+
}
7+
8+
/* Technology Badges */
9+
.tech-grid {
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 10px;
13+
justify-content: center;
14+
margin: 20px 0;
15+
}
16+
17+
.tech-badge {
18+
background: #1b4e7e;
19+
color: #eef6fc;
20+
padding: 8px 16px;
21+
border-radius: 20px;
22+
font-size: 16px;
23+
border: 2px solid #e7df69;
24+
}
25+
26+
/* Code Blocks */
27+
pre {
28+
background: #2a2a2a;
29+
padding: 15px;
30+
border-radius: 5px;
31+
overflow-x: auto;
32+
border-left: 3px solid #e7df69;
33+
margin: 15px 0;
34+
}
35+
36+
code {
37+
color: #e7df69;
38+
font-family: 'Consolas', monospace;
39+
}
40+
41+
/* Typography */
42+
li, p {
43+
font-size: 18px;
44+
}
45+
46+
h1 {
47+
font-size: 85px;
48+
}
49+
50+
h2 {
51+
font-size: 55px;
52+
}
53+
54+
h3 {
55+
font-size: 40px;
56+
text-align: left;
57+
}
58+
59+
/* Contact Section */
60+
section#contact p a img {
61+
width: 50px;
62+
height: 50px;
63+
margin-right: 8px;
64+
vertical-align: middle;
65+
}
66+
67+
section#contact p a {
68+
font-family: 'rampage-monoline', sans-serif;
69+
font-size: 30px;
70+
color: #e7df69;
71+
}
72+
73+
section#contact p a:visited {
74+
color: #dfa843;
75+
}

‎projects/dna-sequence-analyzer/about.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Projects - DNA Sequence Analyzer</title>
7+
<link rel="stylesheet" href="../../assets/load/universal.css">
8+
<link rel="stylesheet" href="about.css">
9+
</head>
10+
<body>
11+
<header></header>
12+
<main>
13+
<!-- Project Title -->
14+
<section class="title">
15+
<h1 id="type">DNA Sequence Analyzer</h1>
16+
<p>A robust <strong>Python-based bioinformatics tool</strong> for comprehensive DNA sequence analysis and manipulation, featuring advanced pattern recognition and gene detection capabilities.</p>
17+
</section>
18+
19+
<!-- Technologies -->
20+
<section class="technologies">
21+
<h2>Technologies Used</h2>
22+
<div class="tech-grid">
23+
<span class="tech-badge">Python 3.8+</span>
24+
<span class="tech-badge">pytest</span>
25+
<span class="tech-badge">FASTA</span>
26+
<span class="tech-badge">CLI</span>
27+
</div>
28+
</section>
29+
30+
<!-- Features Section -->
31+
<section class="project">
32+
<h2>Features</h2>
33+
<ul>
34+
<li><strong>GC Content Analysis:</strong> Precise calculation of GC content percentage in DNA sequences</li>
35+
<li><strong>Nucleotide Distribution:</strong> Detailed analysis of nucleotide frequencies</li>
36+
<li><strong>Pattern Recognition:</strong> Advanced motif finding with position reporting</li>
37+
<li><strong>Sequence Manipulation:</strong> Generate complement and reverse complement sequences</li>
38+
<li><strong>Gene Detection:</strong> Identify potential coding regions using start/stop codons</li>
39+
<li><strong>FASTA Support:</strong> Full compatibility with standard FASTA file format</li>
40+
</ul>
41+
</section>
42+
43+
<!-- Implementation -->
44+
<section class="project">
45+
<h2>Implementation</h2>
46+
<h3>Project Structure</h3>
47+
<pre><code>dna_analyzer/
48+
├── src/
49+
│ ├── sequence_analyzer.py
50+
│ ├── utils.py
51+
│ └── main.py
52+
├── tests/
53+
│ └── test_analyzer.py
54+
├── data/
55+
│ ├── example1.fasta
56+
│ └── example2.fasta
57+
└── docs/</code></pre>
58+
59+
<h3>Usage Example</h3>
60+
<pre><code># Basic Analysis
61+
python src/main.py -i data/example1.fasta -o results.txt -a
62+
63+
# Motif Search
64+
python src/main.py -i data/example2.fasta -m ATCG -o motif_results.txt</code></pre>
65+
</section>
66+
67+
<!-- Technical Details -->
68+
<section class="project">
69+
<h2>Technical Highlights</h2>
70+
<ul>
71+
<li>Modular architecture for easy extension and maintenance</li>
72+
<li>Comprehensive test coverage using pytest</li>
73+
<li>Efficient sequence processing algorithms</li>
74+
<li>Command-line interface for automated analysis</li>
75+
<li>Support for multiple input sequence formats</li>
76+
</ul>
77+
</section>
78+
79+
<!-- Documentation -->
80+
<section id="contact">
81+
<h2>Resources</h2>
82+
<p><a href="https://github.com/Code-JL/DNA-Sequence-Analyzer" target="_blank">
83+
<img src="../../images/github.png" alt="GitHub Icon">GitHub Repository
84+
</a></p>
85+
</section>
86+
87+
<!-- License -->
88+
<section class="project">
89+
<h2>License</h2>
90+
<p>This project is licensed under the MIT License. See the <a href="https://github.com/Code-JL/DNA-Sequence-Analyzer/blob/main/LICENSE" target="_blank">LICENSE</a> file for details.</p>
91+
</section>
92+
</main>
93+
94+
<footer>
95+
<p>© 2025 DNA Sequence Analyzer</p>
96+
</footer>
97+
98+
<canvas id="bg1"></canvas>
99+
100+
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
101+
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/plugins/matter-wrap.min.js"></script>
102+
<script src="../projectsUniversal.js"></script>
103+
</body>
104+
</html>

‎projects/inventory_manager/about.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,37 @@ <h2>Features</h2>
3939
</ul>
4040
</section>
4141

42+
<!-- Development Journey Section (Add this after the Features Section) -->
43+
<section class="project">
44+
<h2>Development Journey</h2>
45+
<h3>Command-Line Origins</h3>
46+
<p>The GUI Inventory Manager evolved from a robust command-line application that established the core functionality:</p>
47+
<ul>
48+
<li>CSV-based data persistence</li>
49+
<li>Comprehensive item management</li>
50+
<li>Configurable settings system</li>
51+
<li>Input validation and error handling</li>
52+
</ul>
53+
54+
<h3>Evolution to GUI</h3>
55+
<p>Building on this foundation, the project transformed into a modern graphical application using wxWidgets, introducing:</p>
56+
<ul>
57+
<li>Intuitive visual interface replacing command-line menus</li>
58+
<li>Real-time item updates and visual feedback</li>
59+
<li>Cross-platform compatibility</li>
60+
<li>Enhanced data visualization</li>
61+
</ul>
62+
63+
<h3>Technical Growth</h3>
64+
<p>This evolution showcases the project's technical progression:</p>
65+
<ul>
66+
<li>From standard C++ file I/O to GUI-integrated storage systems</li>
67+
<li>Expansion from console-based validation to interactive form validation</li>
68+
<li>Migration from CSV-only storage to multiple data format support</li>
69+
<li>Integration of visual components while maintaining core business logic</li>
70+
</ul>
71+
</section>
72+
4273
<!-- Implementation -->
4374
<section class="project">
4475
<h2>Implementation</h2>

‎projects/portfolio_website/about.css‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/* Project Styling */
2+
.project img {
3+
width: 70%;
4+
border-radius: 5px;
5+
margin-bottom: 15px;
6+
}
7+
8+
/* Technology Badges */
9+
.tech-grid {
10+
display: flex;
11+
flex-wrap: wrap;
12+
gap: 10px;
13+
justify-content: center;
14+
margin: 20px 0;
15+
}
16+
17+
.tech-badge {
18+
background: #1b4e7e;
19+
color: #eef6fc;
20+
padding: 8px 16px;
21+
border-radius: 20px;
22+
font-size: 16px;
23+
border: 2px solid #e7df69;
24+
}
25+
26+
/* Code Blocks */
27+
pre {
28+
background: #2a2a2a;
29+
padding: 15px;
30+
border-radius: 5px;
31+
overflow-x: auto;
32+
border-left: 3px solid #e7df69;
33+
margin: 15px 0;
34+
}
35+
36+
code {
37+
color: #e7df69;
38+
font-family: 'Consolas', monospace;
39+
}
40+
41+
/* Typography */
42+
li, p {
43+
font-size: 18px;
44+
}
45+
46+
h1 {
47+
font-size: 85px;
48+
}
49+
50+
h2 {
51+
font-size: 55px;
52+
}
53+
54+
h3 {
55+
font-size: 40px;
56+
text-align: left;
57+
}
58+
59+
/* Contact Section */
60+
section#contact p a img {
61+
width: 50px;
62+
height: 50px;
63+
margin-right: 8px;
64+
vertical-align: middle;
65+
}
66+
67+
section#contact p a {
68+
font-family: 'rampage-monoline', sans-serif;
69+
font-size: 30px;
70+
color: #e7df69;
71+
}
72+
73+
section#contact p a:visited {
74+
color: #dfa843;
75+
}

‎projects/portfolio_website/about.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Projects - Portfolio Website</title>
7+
<link rel="stylesheet" href="../../assets/load/universal.css">
8+
<link rel="stylesheet" href="about.css">
9+
</head>
10+
<body>
11+
<header></header>
12+
<main>
13+
<!-- Project Title -->
14+
<section class="title">
15+
<h1 id="type">Portfolio Website</h1>
16+
<p>A modern, interactive portfolio website featuring dynamic animations and responsive design, built to showcase software development projects and professional experience.</p>
17+
</section>
18+
19+
<!-- Technologies -->
20+
<section class="technologies">
21+
<h2>Technologies Used</h2>
22+
<div class="tech-grid">
23+
<span class="tech-badge">HTML5</span>
24+
<span class="tech-badge">CSS3</span>
25+
<span class="tech-badge">JavaScript</span>
26+
<span class="tech-badge">Matter.js</span>
27+
<span class="tech-badge">Git</span>
28+
</div>
29+
</section>
30+
31+
<!-- Features Section -->
32+
<section class="project">
33+
<h2>Features</h2>
34+
<ul>
35+
<li><strong>Interactive UI:</strong> Dynamic hexagonal background animation powered by Matter.js physics engine</li>
36+
<li><strong>Responsive Design:</strong> Seamless experience across desktop, tablet, and mobile devices</li>
37+
<li><strong>Professional Sections:</strong> Comprehensive project showcase, skills overview, and educational background</li>
38+
<li><strong>Resource Access:</strong> Downloadable resume and direct contact information</li>
39+
</ul>
40+
</section>
41+
42+
<!-- Implementation -->
43+
<section class="project">
44+
<h2>Implementation</h2>
45+
<h3>Project Structure</h3>
46+
<pre><code>portfolio/
47+
├── assets/ # Core website assets
48+
│ ├── load/ # Universal components
49+
│ └── ... # Page-specific assets
50+
├── files/ # Downloadable content
51+
├── images/ # Media assets
52+
└── projects/ # Project-specific pages</code></pre>
53+
</section>
54+
55+
<!-- Development Status -->
56+
<section class="project">
57+
<h2>Development Status</h2>
58+
<h3>Current Features</h3>
59+
<ul>
60+
<li>Interactive physics-based animations</li>
61+
<li>Cross-device compatibility</li>
62+
<li>Project documentation system</li>
63+
<li>Professional content organization</li>
64+
</ul>
65+
<h3>Planned Enhancements</h3>
66+
<ul>
67+
<li>Additional project documentation</li>
68+
<li>Enhanced interactive features</li>
69+
<li>Expanded project gallery</li>
70+
</ul>
71+
</section>
72+
73+
<!-- Documentation -->
74+
<section id="contact">
75+
<h2>Resources</h2>
76+
<p><a href="https://github.com/Code-JL/Code-JL.github.io" target="_blank">
77+
<img src="../../images/github.png" alt="GitHub Icon">GitHub Repository
78+
</a></p>
79+
<p><a href="https://code-jl.github.io" target="_blank">
80+
<img src="../../images/home.png" alt="Live Demo Icon">Live Demo
81+
</a></p>
82+
</section>
83+
84+
<!-- License -->
85+
<section class="project">
86+
<h2>License</h2>
87+
<p>This project is licensed under the MIT License. See the <a href="https://github.com/Code-JL/Code-JL.github.io/blob/main/LICENSE" target="_blank">LICENSE</a> file for details.</p>
88+
</section>
89+
</main>
90+
91+
<footer>
92+
<p>© 2025 Portfolio Website</p>
93+
</footer>
94+
95+
<canvas id="bg1"></canvas>
96+
97+
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
98+
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/plugins/matter-wrap.min.js"></script>
99+
<script src="../projectsUniversal.js"></script>
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)