projectwebtech/about.html at main · garciacode1/projectwebtech · GitHub

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JUAN DAVID GARCIA Portfolio</title>
    <link rel="stylesheet" href="./assets/css/site.css">
    <link rel="stylesheet" href="./assets/css/main.css">
</head>
<body>
<header>
    <div class="bg-blue-400 font-extrabold text-3xl container flex flex-col items-center justify-center p-6 mx-auto md:flex-row gap-2">
        <h1>Juan Garcia Portfolio</h1>
        <img src="https://placehold.co/64?text=logo" alt="Logo">
    </div>
    <nav>
        <ul class="flex flex-col md:flex-row text-amber-800 bg-amber-400 font-bold text-3xl pl-6 ml-6 gap-6 md:gap-10 border-l border-gray-200 md:mr-auto border border-dashed justify-center">
            <li><a href="./index.html">Home | </a></li>
            <li><a href="./about.html">About | </a></li>
            <li><a href="./resume.html">Resumé | </a></li>
            <li><a href="./contact.html">Contact | </a></li>
            <li><a href="./projects.html">Projects | </a></li>
            <li><a href="./sampleprojects.html">Sample Project | </a></li>
        </ul>
    </nav>
</header>

<main>

    <div class="articles">
        <article class="main-article">
            <header>
                <h2>What about me?</h2>
            </header>

            <section>
                <header>
                    <h3> Nationality:</h3>
                </header>
                <p>
                    Colombian
                </p>
            </section>
            <section>
                <header>
                    <h3> Hobbies:</h3>
                </header>
                <p>
                    Running, reading, swimming.
                </p>
            </section>

            <footer>
                <p>Phone number : +6152684852. </p>
            </footer>
        </article>

        <article>

            <section>
                <header>
                    <h3>My root:</h3>
                </header>

                <p>I was born in Colombia, and during my chilhood I experienced
                    great moments besides my family. My hometown "La mesa" is mostly warm and people know each other very well.
                </p>
            </section>

            <section>
                <header>
                    <h3>My culture</h3>
                </header>

                <p>
                    In our culture, we tend to be friendly and loud. However, I prefer calm environments.
                    Our food is delicious! That might be the reason why enjoy cooking so much.
                </p>
            </section>
            <footer>
                <p>I am a big fan of traveling. However, the feeling of being home is so special for <me></me></p>
            </footer>
        </article>

        <article>
            <header>
                <h2>My Favourite books:</h2>
            </header>

            <section>
                <header>
                    <h3>You can´t hurt me - David Goggins </h3>
                </header>
                <p> This book became my favourite book as it changed my mindset and discipline. David goggins
                    talks very much about mental strenght and the power of your thoughts
                </p>
            </section>

            <section>
                <header>
                    <h3>The Truth - Neil Strauss </h3>
                </header>
                <p>
                    This book helped me to understand that we all need to understand how important our chilhood was
                    because our relationships are affected by that.
                </p>
                <header>
                    <h3>Never finished -David Goggins</h3>
                </header>
                <p>
                    This book reminds us that self-mastery is never finished.
                    We should aim for a constant improvement to make our life a bit better day by day.
                </p>
            </section>

            <footer>
                <p>Reading has helped me to spend less time on social media and focusing more in one thing at a time. </p>
            </footer>

        </article>

        <article>
            <header>
                <h2>Some things that I like:</h2>
            </header>
            <section>
                <header>
                    <h3> Running: </h3>
                </header>
                <p>
                    Running has been part of my life since I was very young.
                </p>
                <p>
                    I run at least 2 times a week as it helps me to feel better.
                </p>

            </section>
            <section>
                <header>
                    <h3>Languages </h3>
                </header>
                <p>
                    I speak three languages. However, I am willing to learn a new one soon.
                </p>
                <p>
                    Programming languages are also interesting to me, my favourite is c#.
                </p>

            </section>
            <footer>
                <p>
                    I believe that learning should be a constant in our life.
                </p>
            </footer>
        </article>
    </div>
    <aside>
        <section class="aside-section-one aside-section">
            <header>
                <h3>My perception of life</h3>
            </header>
            <p>
                I believe that life is about keep going, keep learning something new, and being aware that nothing is for granted.
            </p>
            <p>
                Great things can happen when we are brave enough.
            </p>
            <img src="../project-web-tech/assets/img/img6.jpg"  width=300 alt="image of a person in Egypt">
            <footer>
                Abu Simbel temple, Egypt.
            </footer>
        </section>
    </aside>
</main>

<footer class="text-black bg-yellow-200 text-9xl body-font w-full container flex flex-col items-start justify-between p-6 mx-auto md:flex-row gap-2">
    <a class="flex items-center mb-4 title-font md:mb-0 gap-2 hover:text-white transition duration-500 ease-in-out">
        <img src="https://placehold.co/64?text=logo" alt="Logo" class="h-6">
        <h1 class="text-lg">Site Name</h1>
    </a>
    <div class="flex flex-wrap text-lg pl-6 ml-6 text-base border-l border-gray-400 grow">
        <p class="m-auto">
            © Copyright 2024 JUAN DAVID GARCIA, all rights reserved.
        </p>
    </div>
    <div class="flex flex-wrap text-lg pl-6 ml-6 text-base border-l border-gray-400 md:mr-auto gap-2">
        <a href="./about.html" class="border-b border-gray-400 hover:border-gray-200 hover:text-white transition duration-500 ease-in-out">About</a>
        <a href="./contact.html" class="border-b border-gray-400 hover:border-gray-200 hover:text-white transition duration-500 ease-in-out">Contact</a>
        <a href="./resume.html" class="border-b border-gray-400 hover:border-gray-200 hover:text-white transition duration-500 ease-in-out">Resumé</a>
        <a href="./projects.html" class="border-b border-gray-400 hover:border-gray-200 hover:text-white transition duration-500 ease-in-out">Projects</a>
        <a href="./sampleprojects.html" class="border-b border-gray-400 hover:border-gray-200 hover:text-white transition duration-500 ease-in-out">Sample Project</a>

    </div>
</footer>
<script src="./assets/js/main.js"></script>
</body>
</html>