-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
168 lines (168 loc) · 6.56 KB
/
Copy pathindex.html
File metadata and controls
168 lines (168 loc) · 6.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="en">
<head>
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/e714b2e7e3.js"
crossorigin="anonymous"
></script>
</head>
<body>
<nav id="navbar">
<a class="nav-link" href="#welcome-section">About</a>
<a class="nav-link" href="#projects">Work</a>
<a class="nav-link" href="#contact">Contact</a>
</nav>
<section id="welcome-section">
<h1 id="intro">Hello my name is Ramiro</h1>
<h2 id="intro2">I am a Software & Web Developer based in Portland, Oregon</h2>
<div id="tag-line"> Focused on clean code, practical interfaces, and continuous improvement.</div>
<h3 id="intro3">
I build responsive, intuitive web experiences shaped by curiosity and thoughtful design. My work is driven by a mix of discipline and exploration — refining JavaScript fundamentals, improving interface design, and creating solutions that are both practical and enjoyable to use. Each project is part of a steady progression toward writing clearer code, understanding deeper patterns, and becoming a more capable developer with every build.
</h3>
</section>
<section id="projects">
<h2 id="project-intro">Some of my Projects</h2>
<div class="project-tile">
<div class="project-card">
<a href=" https://romie321.github.io/Musashi/" target="blank">
<img
src="https://raw.githubusercontent.com/Romie321/Musashi/main/musashi-tile.png"
alt="Tribute Page Project"
/>
<p class="project-title">Tribute Page</p>
<p class="project-description">
A tribute page for the famous samurai Miyamoto Musashi. This
project was built using HTML and CSS.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/drag-and-drop/" target="_blank">
<img src="https://raw.githubusercontent.com/Romie321/drag-and-drop/refs/heads/main/drag%20and%20drop.png" alt="Drag and Drop Project" />
<p class="project-title">Drag and Drop</p>
<p class="project-description">
A lightweight Kanban board featuring smooth drag‑and‑drop interactions built with HTML, CSS, and JavaScript.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Survey/" target="_blank">
<img
src="https://github.com/Romie321/Survey/blob/main/survey%20pic.png?raw=true"
alt="Survey Form Project"
/>
<p class="project-title">Survey Form</p>
<p class="project-description">
A survey form project built using HTML and CSS.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Cipher/" target="_blank">
<img
src="https://raw.githubusercontent.com/Romie321/Cipher/refs/heads/main/cypher%20pic.png"
alt="Caesar Cipher Project"
/>
<p class="project-title">Caesar Cipher</p>
<p class="project-description">
A simple Caesar decrypter implementation using JavaScript.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Palindrome/" target="_blank">
<img
src="https://raw.githubusercontent.com/Romie321/Palindrome/main/palindrome.png"
alt="Palindrome Project"
/>
<p class="project-title">Palindrome Checker</p>
<p class="project-description">
A simple palindrome checker implementation using JavaScript.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Register/" target="_blank">
<img
src="https://github.com/Romie321/Register/blob/main/Screenshot_8-7-2026_141410_127.0.0.1.png?raw=true"
alt="Cash Register Project"
/>
<p class="project-title">Cash Register</p>
<p class="project-description">
A simple cash register implementation using JavaScript.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Product/" target="blank">
<img
src="https://codepen.io/Romeo321/pen/BaraYYg/image/small.png"
alt="Product Landing Page Project"
/>
<p class="project-title">Product Landing Page</p>
<p class="project-description">
A simple product landing page implementation using HTML and CSS.
</p>
</a>
</div>
<div class="project-card">
<a href="https://romie321.github.io/Documentation/" target="blank">
<img
src="https://codepen.io/Romeo321/pen/mdxdKpQ/image/small.png"
alt="Technical Documentation Project"
/>
<p class="project-title">Technical Documentation Page</p>
<p class="project-description">
A simple technical documentation page implementation using HTML and
CSS.
</p>
</a>
</div>
</section>
</section>
<section id="contact">
<h2 id="social-intro">I look forward to working with you!</h2>
<p>Feel free to contact me anytime.</p>
<a
href="https://www.freecodecamp.org/Romie321"
target="blank"
class="contact-btn"
id="profile-link"
>
<i class="fa-brands fa-free-code-camp"></i>
Freecodecamp
</a>
<a
href="https://www.linkedin.com/in/ramiro-aguilera/"
target="blank"
class="contact-btn"
id="profile-link"
>
<i class="fa-brands fa-linkedin"></i>
LinkedIn
</a>
<a
href="https://github.com/Romie321"
target="blank"
class="contact-btn"
id="profile-link"
>
<i class="fa-brands fa-github"></i>
Github
</a>
<a href="https://codepen.io/Romeo321" target="blank" class="contact-btn">
<i class="fa-brands fa-codepen"></i>
Codepen
</a>
<a href="mailto:raguilera@gmail.com" target="blank" class="contact-btn">
<i class="fa-solid fa-envelope"></i>
Email
</a>
</section>
<footer>
<p>*This Portfolio was created by Ramiro Aguilera.</p>
</footer>
</body>
</html>